Webpack常见的插件和模式

1 认识插件Plugin

2 CleanWebpackPlugin

3 HtmlWebpackPlugin

4 DefinePlugin

5 mode模式配置

注意区分loader和plugin的作用：

 

举个例子：一个less文件，在loader转换后只会放到原来的文件里面，但是如果你用了插件，就可以将loader转换后的代码放到另外一个新的css文件里面，一个操作。

CleanWebpackPlugin是用来每次打包项目的时候删除之前已经打包过的文件，然后再打包新文件。但是现在的webpack的output选项里面已经可以添加claen来实现CleanWebpackPlugin的功能了。所以CleanWebpackPlugin比较少用了。

 

Output | webpack 中文文档 | webpack 中文文档 | webpack 中文网 (webpackjs.com)https://www.webpackjs.com/configuration/output/#outputclean

HtmlWebpackPlugin是用来在打包好的文件夹里面创建html文件，由于不配置这个的话，打包好的文件夹里面可能会没有html文件。这个html文件里面的内容我们可以通过template来自定义。

 

 DefinePlugin是webpack内置的插件，就不用下载了，这个插件是用来设置，该插件内的内容会被执行一次，产生的结果赋予原来的key的value。执行一次的目的是做到js的字符串拼接。并且在写的时候要注意字符串内容要加引号。在里面设置的变量在项目的全局所有文件中都可以使用。比如js、html文件。

 

 

怎么使用插件？

先下载插件

npm install clean-webpack-plugin -D

npm install html-webpack-plugin -D

在webpack的配置文件里面的plugins里面写

const path = require("path")
 
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require("webpack")
 
module.exports = {
  mode: "production",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
    clean: true
    // assetModuleFilename: "abc.png"
  },
  resolve: {
    extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
    alias: {
      utils: path.resolve(__dirname, "./src/utils")
    }
  },
  module: {
    rules: [
      
    ]
  },
  plugins: [
    
    //new CleanWebpackPlugin(), 比较少用了
    new HtmlWebpackPlugin({
      title: "电商项目",
      template: "./index.html"
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
      coderwhy: "'why'",
      counter: "123"
    })
  ]
}

mode模式配置

有三种模式，对应的生产环境、开发环境、不设置

每种环境都对应自己的优化内容。

下图的是mode设置不同模式的时候（绿色部分），相当于默认在配置文件中加了的内容（红色部分）

我们在开发的时候选择development就好，在要打包之前设置成production

1