webpack4插件

87 阅读2分钟

生成HTML(html-webpack-plugin)

1. 了解html-webpack-plugin

HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件。

image.png

根据src下的index.html自动在打包后的目录下生成html文件,相关引用关系和文件路径都会按照正确的配置被添加进生成的html里

2. 安装依赖

npm install html-webpack-plugin --save-dev

3. 配置config文件

image.png

image.png

提取分离css

 

1. 处理效果

将所有的入口 chunk(entry chunks)中引用的 css,移动到独立分离的 CSS 文件

image.png

2. ExtractTextPlugin插件(老版)

(1)安装(下载)

npm install --save-dev extract-text-webpack-plugin@next

(2)配置config文件

引入插件:

image.png

Rules设置:

fallback:编译后用什么loader来提取css文件

image.png

Plugins设置

image.png

3. mini-css-extract-plugin插件(新版)

(1)安装(下载)

npm install --save-dev mini-css-extract-plugin

(2)配置config文件

引入插件

image.png 

Rules设置:

image.png

Plugins设置

image.png

压缩css及优化css结构

1. 处理效果

image.png

2. optimize-css-assets-webpack-plugin插件

(1)安装(下载)

  npm install --save-dev optimize-css-assets-webpack-plugin

(2)配置config文件

引入插件:

image.png

Plugins设置

assetNameRegExp: 正则表达式,用于匹配需要优化或者压缩的资源名。默认值是 /.css$/g

cssProcessor: 用于压缩和优化CSS 的处理器,默认是 cssnano.

cssProcessorPluginOptions:传递给cssProcessor的插件选项,默认为{}

canPrint:表示插件能够在console中打印信息,默认值是true

discardComments:去除注释

image.png

拷贝静态文件

1. 处理效果

image.png

2. 安装(下载)

npm install --save-dev copy-webpack-plugin

3. 配置config文件

引入插件:

image.png

Plugins设置

image.png

用clean-webpack-plugin来清除文件

1. 处理效果

当我们修改带hash的文件并进行打包时,每打包一次就会生成一个新的文件,而旧的文件并没有删除。

image.png

为了解决这种情况,我们可以使用clean-webpack-plugin在打包之前将文件先清除,之后再打包出最新的文件

image.png

2. 安装

npm install --save-dev clean-webpack-plugin

3. 配置config文件

引入插件

image.png

Plugin配置

image.png

注意:clean-webpack-plugin 2.0版本需改成以下配置

image.png

dry是否模拟删除文件,true是模拟删除,不会移除文件,false会移除文件再重新创建

插件地址:www.npmjs.com/package/cle…