大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/172028.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...