loader和plugin

loader：加载器，webpack只能打包js，json文件，而对于css、图片等无法打包，loader的主要作用就是进行文件转化，仅仅是为了打包服务，主要运行在文件打包之前。

plugin:插件，对webpack功能的拓展，针对打包过程中的某些事件节点执行自定义操作，不仅仅是为了打包服务，运行在文件的整个编译周期中。

常用的loader:

babel-loader babel-core

style-loader  css-loader

file-loader  url-loader

less-loader url-loader

常用的plugin

1.HtmlWebpackPlugin：创建html并引入bundle.js

2.CommonsChunkPlugin：把所有chunk中的公共代码提取成公共js

3.CleanWebpackPlugin：打包前清空上一次的打包内容

4.mini-css-extract-plugin：抽出css到一个单独的文件中

5.DefinePlugin：在编译时创建全局对象（base_url）

自定义插件

配置项

const MyPlugin = require('./plugins/MyPlugin');
//webpack.config.js配置：
module.exports = {
    ...
    plugins: [