初探webpack4--常用插件使用

1、压缩CSS以及优化CSS结构(optimize-css-assets-webpack-plugin)
　　处理效果:
　　　　将CSS压缩
　　　　　　optimize-css-assets-webpack-plugin
　　　　安装(下载)
　　　　　　npm install --save-dev optimize-css-assets-webpack-plugin
　　　　配置config文件
　　　　引入插件
　　　　　　OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
　　　　配置plugin
　　　　　　new OptimizeCssAssetsWebpackPlugin({
　　　　　　　　assetNameRegExp: /.css$/, 正则表达式匹配需要优化或者压缩的资源名
　　　　　　　　cssProcessor: 用于压缩和优化CSS的处理器, 默认 cssnano
　　　　　　　　cssProcessorPluginOptions: { 传递cssProcessor的插件选项,{}
　　　　　　　　　　preset: ['default', {discardComments: {removeAll: true}}]
　　　　　　　　}
　　　　　　　　canPrint: 表示插件能够在console中打印信息
　　　　　　})
2、运用webpack插件拷贝静态文件(copy-webpack-plugin)
　　安装(下载)
　　　　npm install --save-dev copy-webpack-plugin
　　配置config文件
　　引入插件
　　　　const CopyWebpackPlugin = require('copy-webpack-plugin')
　　配置Plugin配置:
　　plugins: [
　　　　new CopyWebpackPlugin([
　　　　　　{
　　　　　　　　from: __dirname + 'status',
　　　　　　　　to: __dirname + /build/status
　　　　　　}
　　　　])
　　]
3、webpack插件之clean-webpack-plugin清除文件
　　处理效果:
　　　　当我们修改带hash的文件并进行打包时,每打包一次就会生成新的文件，而旧的文件并没有删除为了解决这种情况，我们可以使用clean-webpack-plugin在打包之前将文件先清除,之后再打包出新的文件
　　安装(下载)
　　　　npm install --save-dev clean-webpack-plugin

　　配置config文件
　　　　引入插件:
　　　　　　const CleanWebpackPlugin = require('clean-webpack-plugin')
　　　　Plugin配置
　　　　　　Plugins: [
　　　　　　　　new CleanWebpackPlugin(['build'])
　　　　　　]
4、webpack处理HTML内嵌图片
　　处理效果
　　　　未使用loader,会出现路径错误,图片不显示
　　　　经过loader处理才能正常显示
　　　　安装(下载)
　　　　　　npm install -save-dev html-loader
　　　　配置config文件
　　　　Rules配置
　　　　　　module:{
　　　　　　　　rules: [
　　　　　　　　　　{
　　　　　　　　　　　　test: '/.html/',
　　　　　　　　　　　　use: {
　　　　　　　　　　　　　　loader: 'html-loader',
　　　　　　　　　　　　　　options: {
　　　　　　　　　　　　　　　　attrs: ['img:src', 'img:data-src']
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　]
　　　　　　}