生成HTML(html-webpack-plugin)
1. 了解html-webpack-plugin
HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件。
根据src下的index.html自动在打包后的目录下生成html文件,相关引用关系和文件路径都会按照正确的配置被添加进生成的html里
2. 安装依赖
npm install html-webpack-plugin --save-dev
3. 配置config文件
提取分离css
1. 处理效果
将所有的入口 chunk(entry chunks)中引用的 css,移动到独立分离的 CSS 文件
2. ExtractTextPlugin插件(老版)
(1)安装(下载)
npm install --save-dev extract-text-webpack-plugin@next
(2)配置config文件
引入插件:
Rules设置:
fallback:编译后用什么loader来提取css文件
Plugins设置
3. mini-css-extract-plugin插件(新版)
(1)安装(下载)
npm install --save-dev mini-css-extract-plugin
(2)配置config文件
引入插件
Rules设置:
Plugins设置
压缩css及优化css结构
1. 处理效果
2. optimize-css-assets-webpack-plugin插件
(1)安装(下载)
npm install --save-dev optimize-css-assets-webpack-plugin
(2)配置config文件
引入插件:
Plugins设置
assetNameRegExp: 正则表达式,用于匹配需要优化或者压缩的资源名。默认值是 /.css$/g
cssProcessor: 用于压缩和优化CSS 的处理器,默认是 cssnano.
cssProcessorPluginOptions:传递给cssProcessor的插件选项,默认为{}
canPrint:表示插件能够在console中打印信息,默认值是true
discardComments:去除注释
拷贝静态文件
1. 处理效果
2. 安装(下载)
npm install --save-dev copy-webpack-plugin
3. 配置config文件
引入插件:
Plugins设置
用clean-webpack-plugin来清除文件
1. 处理效果
当我们修改带hash的文件并进行打包时,每打包一次就会生成一个新的文件,而旧的文件并没有删除。
为了解决这种情况,我们可以使用clean-webpack-plugin在打包之前将文件先清除,之后再打包出最新的文件
2. 安装
npm install --save-dev clean-webpack-plugin
3. 配置config文件
引入插件
Plugin配置
注意:clean-webpack-plugin 2.0版本需改成以下配置
dry是否模拟删除文件,true是模拟删除,不会移除文件,false会移除文件再重新创建