webpack常用插件

webpack常用插件

---

一、CleanWebpackPlugin

1、说明

这个插件可以在我们每次打包之前自动删除上一次打包的文件夹。

2、下载

npm install clean-webpack-plugin --save-dev  // 安装CleanWebpackPlugin插件

3、配置

// webpack.config.js文件中的配置

const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
...
plugins: [
        new CleanWebpackPlugin()
    ]
...
}

---

二、HtmlWebpackPlugin

1、说明

这个插件会在我们打包后，在打包后的文件夹中自动生成一个html文件，并自动引入打包后的js文件。

2、下载

npm install html-webpack-plugin --save-dev

3、配置

// webpack.config.js文件中的配置

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
	...
	plugins: [
		new HtmlWebpackPlugin({
			template: "",  // 模板路径
			title: ""  // 页面标题
		})
	]
	...
}

---

三、DefinePlugin

1、说明

DefinePlugin允许在编译时创建配置的全局常量。该插件是webpack内置的插件，无需额外安装。

2、配置

// webpack.config.js文件中的配置

const { DefinePlugin } = require("webpack")

module.exports = {
	...
	plugins: [
		new DefinePlugin({
			name: "'小明'"
		})
	]
	...
}

---

四、CopyWebpackPlugin

1、说明

该插件可以指定文件拷贝到打包后的文件夹中。

2、下载

npm install copy-webpack-plugin --save-dev

3、配置

const CopyWebpackPlugin = require("copy-webpack-plugin")
module.exports = {
	...
	plugins: [
		new CopyWebpackPlugin({
			from: "./public",  // 被拷贝文件夹路径
			to: "./",  // 将文件拷贝到哪
			globOptions: {
            	ignore: [
                	"**/index.html"  // 忽略文件
                ]
            }
			
		})
	]
}