use 属性的值需要是一个由 Loader 名称组成的数组, Loader 的执行顺序是由后到
前的:
每个 Loader 可以通过 querystring 的方式传入参数,例如 css-loader?
minimize 中的 minimize 告诉 css- loader 要开启 css 压缩,还可以通过 Object 实现,在源码中指定用什
Loader 去处理文件。以加载 css 文件为例,修改上面例子中的 main.j 如下:
require (’ style-loader! css-loader?minimize! ./main.css ’);
Dev Server 会启动 HTTP 服务器用于服务网页请求,同时会帮助启动
Web pack ,并接收 Webpack 发出的文件更变信号,通过 WebSocket 协议自动刷新网页做到实
时预览。
Webpack 在启动时会以配置里的 entry 为入口去递归解析出 try 所依赖
的文件,只有 entry 本身和依赖的文件才会被 Webpack 添加到监听列表里。而 indx. html文件是脱离了 JavaScript 模块化系统的,所以 Webpack 不知道它的存在
Webpack 支持生成 Source Map ,只需在启动时带上一devtool source-map参数。重启 DevServer 后刷新页面,再打开 Chrome 浏览器的开发者 具,就可以 Sources栏中看到可调试的源代码了
Webpack 在启动后会从 Entry里配置的 Module 开始,递归解析 Entry 依赖的所有 Module
每找到一个 Module ,就会根据配置的 Loader 去找出对应的转换规则,对 Module 进行转换后,
再解析出当前 Module 依赖的 Module 这些模块会以 Entry为单位进行分组, 一个Entry 及其
所有依赖的 Module 被分到 个组也就是 Chunk 。最后, Webpack 将所有 Chunk 转换成
文件输出。在整个流程中, Webpack 会在恰当的时机执行 Plugin 义的逻辑。
下面我们举一个实际的例子,带你一步步去实现一个插件。
该插件的名称取名叫 EndWebpackPlugin,作用是在 Webpack 即将退出时再附加一些额外的操作,例如在 Webpack 成功编译和输出了文件后执行发布操作把输出的文件上传到服务器。 同时该插件还能区分 Webpack 构建是否执行成功。使用该插件时方法如下:
module.exports = {
plugins:[
// 在初始化 EndWebpackPlugin 时传入了两个参数,分别是在成功时的回调函数和失败时的回调函数;
new EndWebpackPlugin(() => {
// Webpack 构建成功,并且文件输出了后会执行到这里,在这里可以做发布文件操作
}, (err) => {
// Webpack 构建失败,err 是导致错误的原因
console.error(err);
})
]
}
要实现该插件,需要借助两个事件:
- done:在成功构建并且输出了文件后,Webpack 即将退出时发生;
- failed:在构建出现异常导致构建失败,Webpack 即将退出时发生;
实现该插件非常简单,完整代码如下:
class EndWebpackPlugin {
constructor(doneCallback, failCallback) {
// 存下在构造函数中传入的回调函数
this.doneCallback = doneCallback;
this.failCallback = failCallback;
}
apply(compiler) {
compiler.plugin('done', (stats) => {
// 在 done 事件中回调 doneCallback
this.doneCallback(stats);
});
compiler.plugin('failed', (err) => {
// 在 failed 事件中回调 failCallback
this.failCallback(err);
});
}
}
// 导出插件
module.exports = EndWebpackPlugin;