最近参加了几次面试，多数面试官都会问一个问题，webpack你了解多少？都用过哪些插件？

我自己总结一下，其实插件很多，基本上都要查文档，常用的有以下几个：
1，HtmlWebpackPlugin

• 作用：自动生成 HTML 文件，并自动引入打包后的 JS 文件

  
  
  image.png
  
  

  如图所示，我的工程下面有一个index.html，在webpack中配置的编译入口是main.js，那么我们配置完之后，启动webpack服务，main.js就会被挂在index.html下执行，当然，我们也可以换个其它的名字，比如fawaikuangtu.html，只需要在配置的时候指定就好

new HtmlWebpackPlugin({
      template: "./fawaikuangtu.html",
    }),

2，CleanWebpackPlugin

• 作用：在重新构建完成之后，清除目录下所有未被引用的资源文件

这里引用一下官方说明，其实配置也很简单 https://www.npmjs.com/package/clean-webpack-plugin

3，MiniCssExtractPlugin

• 作用：将 CSS 提取为独立文件
• 支持按需加载 CSS，避免样式闪烁
  举个例子：现在目录下，分别有一个css文件，一个scss文件，我们分别配置之后，在构建工程的时候会在/dist/css目录下，合并成一个main.css，并自动处理sass里面的语法

image.png

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
  },
  resolve: {
    //别名
    alias: {
      //resolve 获取绝对路径的API，join也可以获取; @ 也可以用 $,就是个 别名
      '@': path.resolve(__dirname, './src'), // 设置 src的绝对路径
    },
  },
  module: {
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      }
    ],
  },
  devServer: {
    static: './dist', // 开发服务器的静态文件目录
    open: true, // 是否自动打开浏览器
    port: 3000, // 端口号
  },
  plugins: [
    new MiniCssExtractPlugin(
      {
        filename: 'css/[name].css',
      }
    )
  ],
};

4，CopyWebpackPlugin

• 作用：复制静态资源到输出目录
  看下配置文件，很清晰

new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public', 
          to: 'assets',  
        },
        {
          from: 'src/assets/img', 
          to: 'img', 
        }
      ]
    }),

举个例子：红色的是我指定的资源目录，绿色的是构建后生成的结果

image.png

5，DefinePlugin

• 作用：定义全局常量
  我们在实际开发过程中，可以使用这个插件来配置各种不同的环境
  下面举个例子：
  熟悉，我们先在工程目录下新建两个文件，分别为：
• .env.development 表示开发环境

NODE_ENV=development
VERSION=5fa3b9
PORT=3000

• .env.production 表示生产环境

NODE_ENV=production
VERSION=5fa3b9
PORT=8080

然后我们使用dotenv将这两个文件挂载到webpack.config.js文件中，我们就可以访问这两个配置文件中所配置的变量了

npm install dotenv  --save-dev

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

接下来，我们需要在package.json中配置两个构建命令，分别构建两个不同的环境，这里我们需要用到cross-env来写入构建常量

npm install cross-env --save-dev

  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack serve",
    "build": "cross-env NODE_ENV=production webpack"
  },

最后才是插件配置环节：

 new webpack.DefinePlugin({

      'process.env': JSON.stringify({
        NODE_ENV: process.env.NODE_ENV,
        VERSION: process.env.VERSION,
      }),
    }),

现在我们就可以在js中使用这两个全局常量了

image.png