webpack-白红宇

模块加载器兼打包工具，能把JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

一、优势

1、通过commonJS的形式书写脚本，同时还支持AMD/CMD，方便旧代码的迁移；

2、不仅仅能模块化js；

3、能打包、压缩混淆、图片转base64，能代替部分grunt/gulp的工作；

4、插件机制完善，特别是支持

二、安装

npm install webpack -g

常规项目还是把依赖写入 package.json 包去更人性化：

$ npm init

$ npm install webpack --save-dev

三、配置

示例：

配置实例

⑴ plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。

⑵ entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里）

(3)module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理：

module详解

如上，"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来。所有加载器都需要通过 npm 来加载，可以查阅加载器对应的readme来看如何使用，如，它会将样式中引用到的图片转为模块来处理。

⑷ 最后是 resolve 配置:

resolve配置详解

webpack更多配置详情

四、运行

webpack --display-error-details “--display-error-details”是推荐加上的参数，便于出错是能查阅的更详尽。

其他主要参数

P是一个非常重要的参数！

五、模块引入

1、html，直接在页面引入 webpack 最终生成的页面脚本即可，不用再写什么 data-main 或 seajs.use 了。

2、js，脚本模块可以直接使用 commonJS 来书写，并可以直接引入未经编译的模块，比如 JSX、sass、coffee等（要在 webpack.config.js 里配置好了对应的加载器）。

编译前页面入口文件(index.js)

六、其他

1、shimming；

在 AMD/CMD 中，我们需要对不符合规范的模块进行shim处理，需要使用；{ test: require.resolve("./src/js/tool/swipe.js"), loader: "exports?swipe"}

引用该模块：require('./tool/swipe.js'); swipe()。

2、自定义公共模块提取；

CommonsChunkPlugin 插件可以提取多个页面之间的公共模块，并将该模块打包为common.js

个性化的配置方式

3、独立打包样式文件

把样式独立出来作为.css而不被打包到脚本中，然后通过link标签引入，可使用实现

引入

4、使用CDN/远程文件

希望某些模块走CDN并以script标签引入的形式挂载到页面上来加载，但又希望webpack模块中使用时，可以在配置文件里使用externals属性来处理

externals属性配置

一定要确保CND文件在webpack打包文件前引入，也可以使用来加载模块：

var$script = require("scriptjs");

$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",function() {

$('body').html('It works!')});

5、与 grunt/gulp 配合

与grunt配合示例

6、react相关

（1）请npm install react的形式来安装并引用 React 模块，不要直接使用编译后的react.js，这样可以减少10~20k的大小；

（2）是React 热插拔的加载插件，可以通过修改-运行同步的效果，配合效果更佳

实例：

1.webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 test.js 中的代码，其它模块会在运行 require 的时候再执行。

2、loader

css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们；

style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中

开发环境

当项目逐渐变大，webpack的编译时间会边长，可以通过参数给输出的内容添加颜色和进度：webpack --progress --colors

开启监听模式，可以让没有变化的模块在编译后缓存到内存中，而不是每次重新被编译。webpack--progress--colors--watch

使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

安装：cnpminstallwebpack-dev-server-g

运行：webpack-dev-server--progress--colors