大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
接着上一篇 手撸 webpack4.x 配置（一） 继续学习 webpack配置 。
今天我学习配置下 webpack 中 另一个模块 plugins 配置 。 之前我们都是手动在打包后(dist)目录里 手动新建的 index.html 然后把 打包后生成的 JS 文件手动的引入 ，今天我们来安装一个插件 让webpack 自动给我们生成模板 ！
1 官网配置地址： html-webpack-plugin
npm install html-webpack-plugin --save-dev
复制代码安装成功后 。 我们先在项目中新建一个 index.html 模板
模板我们可以自定义 , 如我的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学习 webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
复制代码接下来我们就在 webpack.config.js 里面配置了
const path = require('path')
// 自动生成 HTML 文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 模式
mode: 'production',
// 入口文件
entry: {
main: './src/index.js'
},
// 出口文件
output: {
// 打包文件地址
path: path.resolve(__dirname, 'dist'),
// 打包后的文件名
filename: '[name].js',
publicPath: './'
},
// 配置loader
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
outputPath: 'images'
}
}]
},
{
test: /\.(css|scss|styl)$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
},
{
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: "stylus-loader" // 将 stylus 编译成 CSS
}
]
}
]
},
// 插件
plugins: [
// 自动添加 HTML 模板
new HtmlWebpackPlugin({
// 标题
title: '学习 webpack',
// 模板
template: 'index.html',
// 压缩 去掉所有空格
minify: {
collapseWhitespace: false //false | true
},
// 添加hash
hash: true
})
]
};
复制代码先引用 html-webpack-plugin , 然后在 plugins 里面配置 我们需要的 ， 我都加了注解 ，大家一眼就看明白的 ！
接下来，我们想在打包时 ， 先清空 dist目录 ，然后再生成新的打包文件 ，这里我们需要再按照一个插件 ！
2 clean-webpack-plugin
这个插件非官方的 ， 属于第三方的 ，但也是非常的好用 ！
npm install clean-webpack-plugin --save-dev
复制代码安装成功后 ， 同样的需要在webpack.config.js 里面配置
// 插件
plugins: [
// 自动添加 HTML 模板
new HtmlWebpackPlugin({
// 标题
title: '学习 webpack',
// 模板
template: 'index.html',
// 压缩 去掉所有空格
minify: {
collapseWhitespace: false //false | true
},
// 添加hash
hash: true
}),
// 删除文件 保留新文件
new CleanWebpackPlugin(['dist'])
]
复制代码注意 ： 这里我之前也遇到坑了 ， new CleanWebpackPlugin([‘dist’]) 最新版的 ，这个配置变了
// 删除文件 保留新文件
new CleanWebpackPlugin() // 这里不需要参了 ！！！
复制代码OK , 到这里两个插件就介绍完了 ，改天继续完善 ，希望有一天也能配置一个 属于自己的 cli 脚手架！
转载于:https://juejin.im/post/5c8a0084f265da2de52dcf1c
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/172028.html原文链接：https://javaforall.net
