webpack_1">webpack
一个打包工具，就和npm是一个包管理工具差不多。一般在项目文件中，通过webpack.config.js来配置。
loader
本质上是一种函数，作用是处理源文件。你比如，ts-loader，就是一个把ts转换成js的函数。其他常见的img-loader类似，也不是说一定就是做一个翻译，其实就理解成一个函数就行，函数做什么事情，看函数逻辑呗。所以，其实我们自己也可以自定义loader。
这篇文章写得很好，忘了可以看这个。loader
基本语法
就是module中rules里面配置loader。test指定文件，use指定要使用的loader;
// webpack.config.js
module.exports = {module: {rules: [{test: /\.ts$/i, use: "ts-loader"}],},
};
rules
- rules是数组，执行顺序是从右到左。理解成数组的pop / 栈执行顺序；
- rules:[loaderObj1,loaderObj2,loaderObj3]; 执行顺序就是 3 2 1；
- 也可以通过enforce配置顺序；pre-normal-inline-post； 很好记， inline就是排队的意思，pre-post就是最前最后呗。
自定义loader
- 说了loader是一个函数，所以你可以自己新建一个文件，自定义loader函数： 然后在rules中引入就行了; （其实也可以在需要的其他文件中引入）
- this.query 和 this.callback；
- 去搜loader函数，很容易在函数中看到这样两行
let options=this.query;
// ...
this.callback(null,content,map,meta);
- this.query就是在获取你配置的{key:‘value’},如下图; // 要配置options的话，只能是一个对象；//
- 函数返回可以通过调用return 返回，也可以通过调用this.callback返回，好处就是this.callback可以传递多个参数给下一个loader，return 只能传递当前loader转换后的content给下一个loader;
- callback也可以分为同步和异步；对应也就是同步loader和异步loader;
- 同步就是this.callback(…args)
- 异步就是let callback=this.async(); callback(…args);
你可以写哪些loader？
- clean-log-loader:清除日志等等的吧
常见loader
- babel-loader:es6->es5;
- ts-loader:ts -> js
- less-loader:less->css
plugin
大部分都是说功能比plugin强大，感觉强大就强大在可以监听webpack构建的生命周期，更加灵活地去操作资源。loader只是作用在出包前，更多地，只作用于文件，类似翻译功能什么的，plugin可以进行类似共同代码提取等等的。
webpack生命周期 参考
- 简单来说：初始阶段-编译-构建-优化-产出-完成
- plugin中的函数监听钩子函数
常见plugin
- HtmlWebpackPlugin：把打包的js文件，自动引入到插件创建的html文件
- 必要性：不用你手动去引入；
- copy-webpack-plugin： 复制文件或者目录到指定的路径下；
