1 认识插件Plugin
2 CleanWebpackPlugin
3 HtmlWebpackPlugin
4 DefinePlugin
5 mode模式配置
注意区分loader和plugin的作用:
举个例子:一个less文件,在loader转换后只会放到原来的文件里面,但是如果你用了插件,就可以将loader转换后的代码放到另外一个新的css文件里面,一个操作。
CleanWebpackPlugin是用来每次打包项目的时候删除之前已经打包过的文件,然后再打包新文件。但是现在的webpack的output选项里面已经可以添加claen来实现CleanWebpackPlugin的功能了。所以CleanWebpackPlugin比较少用了。
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