webpack入门学习4（打包html文件、分离压缩css文件、拷贝静态文件、每次打包自动清除旧文件）

生成HTML(html-webpack-plugin)

               1.了解html-webpack-plugin

                          HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。会根据public下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里。

              2.安装依赖

                         命令行输入：npm install html-webpack-plugin --save-dev

              3.配置config文件，然后输入npm run dev打包

               4.其它配置：

          

提取分离css

               1.处理效果

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

                                             

               2.安装插件

                               命令行输入：npm install --save-dev mini-css-extract-plugin

               3.配置config文件

               输入npm run dev打包后生成文件

 

 

压缩css及优化css结构

               1.处理效果

                           

               2.安装插件 

                           命令行输入：npm install --save-dev optimize-css-assets-webpack-plugin

               3.配置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文件

                 4.在public下创建一个assets文件夹，把创建一个css文件夹跟img文件夹，然后把相关文件复制进去

                              输入npm run dev进行打包，打包完成后build文件夹下会出现assets文件夹

 

 

用clean-webpack-plugin来清除文件

               1.处理效果

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

                                             

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

                                               

               2.安装插件

                          命令行输入：npm install --save-dev clean-webpack-plugin

               3.配置config文件

                  这样在每次打包之后都会直接删除build文件夹再重新创建一个build，而不是在每次修改index.js文件之后都会创建一个main[hash].js的文件。