(1) 首先生成一个package.json文件 进入项目文件的根目录执行npm init

在根目录中生成一个package.json文件

(2)全局安装webpack  执行npm install -g webpack

根目录的文件夹下会生成node_modules文件夹中会包含webpack，

(3)配置webpack

每个文件目录下都会有一个webpack.config.js

entry:页面中的入口文件

output: 页面通过打包后生成的目标文件放在什么地方。这里在目录的跟文件夹下创建了一个build文件夹，该文件夹内有一个build.js的文件

resolve：解析了模块路径的配置

(4)最后来执行webpack即可在根目录下生成一个build文件夹中有build.js文件

END.........................................

在页面中引入build.js即可

webpack打包的更多相关文章

  1. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  2. 【原】使用webpack打包的后，公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  3. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  4. webpack打包avalon

    webpack打包avalon+oniui+jquery 随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且 ...

  5. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  6. webpack 打包成功，但是css不起作用

    问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...

  7. 14.如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法

    问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awso ...

  8. webpack学习--创建一个webpack打包流程

    创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...

  9. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  10. webpack打包体积优化

    优化: 1:外部引入模块(cdn)     如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302. 2:图标优化 ...

随机推荐

  1. 一个程序说明标准i/O缓冲的效率

    来瞧一个程序,了解一下标准I/O中的缓冲区对程序运行的影响: #include<stdio.h>#include<unistd.h> int main(){ char a[2] ...

  2. Linux查看系统信息命令汇总

    # uname -a # 查看内核/操作系统/CPU信息 # /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostname # 查看计算 ...

  3. ODBC连接问题

    http://zhidao.baidu.com/link?url=EPEMTuGC1q5wWavZigWseoHOwRLvpHyAVsdIgMLspErJOUZMEepIICUnT9IdkPQlYTm ...

  4. 【Thinking in Java-CHAPTER 3】操作符

    优先级 赋值 对象在使用c=d,那么c和d都指向原本只有d指向的那个对象. 方法调用中的别名问题:当一个对象作为参数传递到一个函数中,函数改变了这个参数,则改变了传递进来的对象: 自增和自减 浮点型的 ...

  5. SpringMVC 拦截器

    类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. 常用场景: 1.日志记录:记录请求信息的日志,以便进行信息监控.信息统计.计算PV(Page View)等. 2.权限 ...

  6. ionic 添加应用图标与启动页

    由于手机有很多不同的尺寸与版本,所以图标尺寸也是大小不一,但是如果手动每一个尺寸都制作一个图标,那估计美工会吐血吧,不过幸好,ionic只需要一个图标就可以制作不同尺寸的图标. 添加一个ionic项目 ...

  7. 调用Ajax返回500错误的解决方法

    看代码: public ActionResult UserLogin(LogOnModel model) { #region 验证码验证 #endregion OperationResult resu ...

  8. JavaScript TDD with Mocha

    开发现状 当新的版本快要发布的时候,大家都忙于加班,加紧修复BUG1.BUG2.我想这就是很多公司开发的现状. 为了不至于让上线的版本挂掉挂掉,少不了就是 人肉测试. 在一个项目中,我们会做许许多多各 ...

  9. String详解, String和CharSequence区别, StringBuilder和StringBuffer的区别 (String系列之1)

    本章主要介绍String和CharSequence的区别,以及它们的API详细使用方法. 转载请注明出处:http://www.cnblogs.com/skywang12345/p/string01. ...

  10. Fenix – 基于 Node.js 的桌面静态 Web 服务器

    Fenix 是一个提供给开发人员使用的简单的桌面静态 Web 服务器,基于 Node.js 开发.您可以同时在上面运行任意数量的项目,特别适合前端开发人员使用. 您可以通过免费的 Node.js 控制 ...