webpack@4.x（学习笔记02）

承接上一篇文章

一、clean-webpack-plugin

配置webpack.config.js；用于清除输入文件夹的内容。
新增

// 清除目录内容
const cleanWebpackPlugin = require('clean-webpack-plugin');

~
plugins:[
       ~
        new cleanWebpackPlugin()
    ]

安装依赖

npm i clean-webpack-plugin@2.0.2 -D

可以在dist中新建个测试文档，然后npm run build打包，查看效果

二、webpack打包图片方式

1. 打包css中引用的图片
   打包css中的图片用到 url-loader、file-loader；url-loader是直接生成base64，file-loader是把图片打包成单独的文件

安装

npm i file-loader@6.2.0 url-loader@4.1.1 -D

配置webpack.config.js

	~~~~~ //rules下添加以下配置
            {
                test:/\.(png|jpg|gif|jpeg)$/i,
                use:[{
                    loader:'url-loader',
                    options:{
                        // 设置大于10kb的生成单独的文件，小于的转成bas64
                        limit:10240,
                        // 超出限制的图片打包
                        fallback:require.resolve('file-loader'),
                        // url-loader打包方式
                        encoding:'base64',
                        // 输出文件名称
                        name:'[name].[hash:8].[ext]',
                        // es模块配置
                        esModule: false,
                        // 输出的文件夹
                        outputPath:'img'
                    }
                }]   
            }
    ~~~~~

2. 打包html中的图片

依赖html-withimg-loader打包；需要安装file-loader
安装：

npm i html-withimg-loader -D

配置rules

		{
                test: /\.(htm|html)$/i,
                use:[ 'html-withimg-loader']
            }

三、提取css文件与压缩、兼容性处理

1、mini-css-extract-plugin 提取css文件
安装

npm i mini-css-extract-plugin@0.6.0 -D

配置

//1 引入
//提取css文件
const miniCssExtractPlugin = require('mini-css-extract-plugin');
//2plugin
	new miniCssExtractPlugin({
          filename:'[name].[contenthash:8].css'
          //提取成单独文件后的名称，name取原来的文件名称、contenthash：8取文件内容生成的hash值前8位
       })

//3rules    替换style-loader文件即可
 {
      // css
      test:/\.css$/i,
      use:[miniCssExtractPlugin.loader,'css-loader']
  },{
      // less
      test:/\.less$/i,
      use:[miniCssExtractPlugin.loader,'css-loader','less-loader']
  }

效果图

2、optimize-css-assets-webpack-plugin 压缩文件

安装

npm i optimize-css-assets-webpack-plugin@5.0.1 -D

配置

//1引入
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

//2plugin
	//普通压缩
	new optimizeCssAssetsWebpackPlugin();
	//或利用cssnano进行压缩，减小css压缩后的体积
	new optimizeCssAssetsWebpackPlugin({
       assetNameRegExp:/\.css$/i,//压缩的文件
        cssProcessor:require('cssnano')
    })

3、兼容性处理 postcss-loader、postcss-preset-env
安装依赖

npm i postcss-loader@3.0.0 postcss-preset-env@6.6.0 -D

配置

{
     // less
      test:/\.less$/i,
      use:[miniCssExtractPlugin.loader,'css-loader','less-loader',{
          loader:'postcss-loader',
          options: {
              plugins: () => [
                  require('autoprefixer')({
                      overrideBrowserslist: ['> 0.15% in CN']
                  })
              ]
          }
      }]
  }

完整webpack.config.js

'use strict';

const path = require('path');
// html模板
const htmlWebpackPlugin = require('html-webpack-plugin');
// 清除目录内容
const cleanWebpackPlugin = require('clean-webpack-plugin');
//提取css文件
const miniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    },
    mode:'development',
    module:{
        rules:[
            {
                // css
                test:/\.css$/i,
                use:[miniCssExtractPlugin.loader,'css-loader',{
                    loader:'postcss-loader',
                    options: {
                        plugins: () => [
                            require('autoprefixer')({
                                overrideBrowserslist: ['> 0.15% in CN']
                            })
                        ]
                    }
                }]
            },{
                // less
                test:/\.less$/i,
                use:[miniCssExtractPlugin.loader,'css-loader','less-loader',{
                    loader:'postcss-loader',
                    options: {
                        plugins: () => [
                            require('autoprefixer')({
                                overrideBrowserslist: ['> 0.15% in CN']
                            })
                        ]
                    }
                }]
            },
            {
                test:/\.(png|jpg|gif|jpeg)$/i,
                use:[{
                    loader:'url-loader',
                    options:{
                        // 设置大于10kb的生成单独的文件，小于的转成bas64
                        limit:10240,
                        // 超出限制的图片打包
                        fallback:require.resolve('file-loader'),
                        // url-loader打包方式
                        encoding:'base64',
                        // 输出文件名称
                        name:'[name].[hash:8].[ext]',
                        // es模块配置
                        esModule: false,
                        // 输出的文件夹
                        outputPath:'img'
                    }
                }]   
            },{
                test: /\.(htm|html)$/i,
                use:[ 'html-withimg-loader']
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.resolve(__dirname,'src/index.html')
        }),
        new cleanWebpackPlugin(),
        new miniCssExtractPlugin({
            filename:'[name].[contenthash:8].css'
        }),
        new optimizeCssAssetsWebpackPlugin({
            assetNameRegExp:/\.css$/i,//压缩的文件
            cssProcessor:require('cssnano')
        })
    ]
}