webpack_03 (plugin)

Loader是用于特定的模块类型进行转换；

Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

CleanWebpackPlugin  手动删除dist文件夹

#安装
npm install clean-webpack-plugin -D
#配置
module.exports = {
    plugins: [new CleanWebpackPlugin()]
}

HtmlWebpackPlugin 对应的入口文件index.html；

自定义HTML模板

在配置HtmlWebpackPlugin时，我们可以添加如下配置：
template：指定我们要使用的模块所在的路径；
title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息

#安装
npm install html-webpack-plugin -D
#配置
module.exports = {
    plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      title: '哈哈哈哈'
    })
  ]
}

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）

plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      title: '哈哈哈哈'
    }),
    new DefinePlugin({
      BASE_URL: '"./"' //编译template就可以正确的编译了，会读取到BASE_URL的值
    })
  ]

CopyWebpackPlugin 将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中配置CopyWebpackPlugin即可：

复制的规则在patterns中设置；
from：设置从哪一个源中开始复制；
to：复制到的位置，可以省略，会默认复制到打包的目录下；
globOptions：设置一些额外的选项，其中可以编写需要忽略的文件：
 index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成

#安装
npm install copy-webpack-plugin -D
#配置
plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public',
          to: './',
          globOptions: {
            ignore: ['**/index.html']
          }
        }
      ]
    })
]

Mode配置