webpack系列介绍
这个系列记录了我在webpack
上的学习历程。如果你也和我一样想要好好的掌握webpack
,那么我认为它对你是有一定帮助的,因为教材中是以一名webpack
小白的身份进行讲解, 案例demo
也都很详细, 涉及到:
- 基础篇(本章)
- 构建方式篇
- 优化篇
- loader篇
- 配置篇
建议先mark
再花时间来看。
(其实这个系列在很早之前就写了,一直没有发出来,当时还写了一大长串前言可把我感动的,想看废话的可以点下面?的GitHub地址,不过现在让我们正式开始学习吧)
(https://github.com/LinDaiDai/webpack-document)
所有文章webpack
版本号^4.41.5
, webpack-cli
版本号^3.3.10
。
在webpack3
中,webpack
本身和它的CLI
都是在同一个包中,但在第4版中,两者分开来了,也是为了让我们更好地管理它们。
一、基本使用
先让我们来看看最基本的一种使用webpack
的方式.
首先你得知道, webpack
和其它依赖一样, 是包括本地安装和全局安装的, 但是在此我建议你使用本地安装的方式, 不推荐全局安装。
因为使用了全局安装之后, 会使你的项目中的webpack
锁定到指定版本中,并且在使用不同的webpack
版本的项目中,可能会导致构建失败.
所以在后面的教材中, 我都会以本地安装webpack
的方式进行讲解。
教材中的案例GitHub地址: https://github.com/LinDaiDai/webpack-document/tree/master/webpack-example
1.1 初始化项目
首先我们创建一个目录, 并初始化npm
:
$ mkdir webpack-basic && cd webpack-basic
$ npm init -y
(使用-y
初始化npm
会帮助我们生成一个默认的package.json
配置)
1.2 本地安装webpack
前面已经提到过, 文章采用的webpack
版本号是>4.0
的, 由于webpack
与webpack-cli
已经分开了, 我们需要分别安装它们(如果你使用的webpack
版本号小于4.0
则只需要安装webpack
就可以了)
在webpack-basic
的根目录下执行指令:
$ npm install webpack webpack-cli --save-dev
此时会发现package.json
里的devDependencies
中多出了你刚刚安装的webpack
和webpack-cli
.
1.3 创建bundle文件
完成以上步骤之后, 让我们来编写一个简单的页面来看看效果.
首先在根目录下创建一个
src
文件夹, 并在其中创建一个index.js
文件在根目录下创建一个
dist
文件夹, 并在其中创建一个index.html
文件
之后, 项目结构就变成了这样:
webpack-basic
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
让我们在其中加上一些内容:
// src/index.js
function component() {
var element = document.createElement('div');
element.innerHTML = "Hello Webpack";
return element;
}
document.body.appendChild(component());
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>
<script src="main.js">script>
body>
html>
index.js
还好理解, 但是你可能会注意到index.html
中引入了一个main.js
, 但是这个js
文件我们没有看到在哪里呀.
别急, 这里的main.js
就是我们接下来要经过webpack
打包之后生产的文件, 只不过在这里我们先提前引入进来了.
1.4 执行webpack打包
编写完以上代码之后, 我们就可以在根目录下使用此命令来进行打包了:
$ npx webpack
此时你会看到dist
文件夹下就多出了一个main.js
文件, 并且打开index.html
, 会看到页面上显示了: "Hello Webpack".
可能你会有点糊了, 明明我们什么也没有配置, 它怎么就能够生成main.js
呢.
像这种在webpack4
没有任何webpack
配置的情况下, webpack
会为你提供一套默认的配置.
- 将
src/index.js
作为入口起点(也就是entry
选项) - 将
dist/main.js
作为输出(也就是output
选项)
用官网的话来说就是:
执行
npx webpack
,会将我们的脚本作为入口起点,然后 输出 为main.js
。
Node 8.2+ 版本提供的 npx
命令,可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件(./node_modules/.bin/webpack
)
二、使用配置文件
通过上面?的案例, 我们知道, 在webpack4
中如果你没有任何配置文件时, 它会为你提供一套默认的配置.
但是在webpack3
中, 这样是不允许的, 必须得有一个webpack.config.js
文件来指定入口出口.
不过如果你是用webpack4
开发的话, 在实际使用中,你也还是需要一个webpack.config.js
文件来进行一些复杂的设置.
2.1 webpack.config.js
让我们在项目的根目录下创建一个叫webpack.config.js
的文件, 并且在其中写上一些基本的配置:
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
现在让我们重新使用命令来进行构建:
$ npx webpack --config webpack.config.js
Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 328ms
Built at: 2018-2-26 22:47:43
Asset Size Chunks Chunk Names
bundle.js 69.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 256 bytes {0} [built]
+ 1 hidden module
WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 选项还未设置。将 'mode' 选项设置为 'development' 或 'production',来启用环境默认值。)
可以看到, 这次它也成功的完成了构建, 不过相对于之前的执行语句, 我们多了一段:
--config webpack.config.js
其实这个命令的作用就是 指定以哪个配置文件进行构建, 比如我们这里就是指定了webpack.config.js
这个文件.
不过其实在这里你也可以不要这段语句, 因为webpack
命令默认会选择使用它.
只不过如果你的配置文件不叫webapck.config.js
, 而是比如叫做webpack.other.config.js
, 你就得指定它了.
现在, webpack
根据你的配置, 入口处为src/index.js
, 出口文件为dist/bundle.js
.
我们也得重新修改一下dist/index.html
的引入了:
<script src="bundle.js">script>
通过这种配置文件的方式, 让我们使用起来更加的灵活, 而且, 我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options),以及许多其他增强功能。
2.2 NPM脚本
在上面?, 我们是使用npx webpack
这样的CLI
方式来运行本地的webpack
的:
$ npx webpack
其实这样是不太方便的, 我们可以设置一个快捷方式. 在package.json
中添加一个npm
脚本:
{
"name": "webpack-basic",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
在scripts
中新加了一个配置"build: "webpack"
.
现在,可以使用 npm run build
命令,来替代我们之前使用的 npx
命令。
$ npm run build
现在用此命令工具执行出来的效果和上面?介绍的是一样的.
三、管理资源
让我们来回顾一下上面?讲解的项目目录:
webpack-basic
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
可以看到, 上面的案例只允许了我们使用js
文件来进行构建, 但是在实际开发中, 我们不可能只有js
文件, 若是我们要使用css
、 图片、字体这些资源怎么办?
别担心, webpack
最出色的功能之一就是,除了 JavaScript
,还可以通过 loader
引入任何其他类型的文件。
3.1 加载CSS
首先让我们以加载css
文件来认识一下loader
.
style-loader和css-loader
为了从js
模块中导入一个css
文件, 比如你想在index.js
中引入一个css
文件:
// index.js
import './style.css'
// 或者用require()的方式
const style = require('./style.css')
你需要在项目中(也就是module
配置中), 安装并添加这两个loader
:
- style-loader
- css-loader
$ npm i --save-dev style-loader css-loader
并且在webpack.config.js
中进行配置:
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};
我们在webpack.config.js
中新增了一个module
的配置.
这里配置的意思是:
webpack
根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的loader
。/.css$/
这个正则的意思就是匹配目录下所有以 .css
结尾的全部文件,都将被提供给 style-loader
和 css-loader
。
($
应该知道什么意思吧,就是表示必须以什么结尾)
注⚠️:
style-loader
要放到css-loader
前面, 不然打包的时候就会报错了.
在js中引入css
现在就可以在我们的项目中使用css
了, 并且你可以在js
中将它引入进来.
先让我们在src
文件夹下创建一个style.css
文件并加上一些内容:
.color_red {
color: red;
}
然后修改我们之前的src/index.js
文件, 给element
加上一个类名:
import './style.css' // 1. 导入css文件
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('color_red') // 2. 添加类名
return element;
}
document.body.appendChild(component());
此时重新使用命令语句进行构建:
$ npm run build
打开页面, 发现页面中的"Hello Webpack"变成了红色, 证明css
引入成功了.
它这里实现的方式是: 当该模块运行时,含有 CSS 字符串的标签,将被插入到 html
文件的 head
中。
所以如果我们检查页面(也就是打开控制台), 然后在Elements
中你会发现, head
里会加上一个style
标签, 里面就是你定义css
的内容.
单独使用css-loader有什么效果?
虽然上面?我们介绍要想在页面中使用css
就需要使用style-loader
和css-loader
这两个loader
,那么它们单独的作用是什么呢?
现在我们修改一下webpack.config.js
的配置,去除掉style-loader
:
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: [
- "style-loader",
"css-loader"
],
},
],
},
};
并且把index.js
那里引入的style
打印出来看看:
// src/index.js
const style = require('./style.css')
console.log('style', style)
效果:
![59786a3d99311e61194dd958cb711d17.png](https://i-blog.csdnimg.cn/blog_migrate/8bb81b822ada31106bc3c0ea07d5baae.jpeg)
可以发现,css-loader
它的作用实际就是能识别导入的css
这个模块,并通过特定的语法规则进行内容转换。
但是这里得到的是一个数组啊,并不是我们想要的,页面也无法来使用它。所以这时候就需要配合上style-loader
它才能发挥它真正的作用。
style-loader的作用
style-loader
它的原理其实就是通过一个JS脚本创建一个style
标签,里面会包含一些样式。并且它是不能单独使用的,因为它并不负责解析css
之前的依赖关系。
也就是说:
- 单独使用了
css-loader
只能保证我们能引用css
模块进来,但是并没有效果 - 而
style-loader
就可以创建一个style
标签,并且把引入进来的css
样式都塞到这个标签里
但是有一点需要注意了,我们在当前项目的js
中引入了几个css
模块,它就会生成几个style
标签。
比如现在我在项目中又新建了一个style2.css
文件并加上一些样式:
.color_red {
font-size: 20px;
color: green;
}
然后在src/index.js
都引入这两个css
文件:
import './style.css'
import './style2.css'
(记得把webpack.config.js
中的style-loader
重新加上)
此时重新npm run build
一下,并打开页面:
![93b58696648e68e826b4c1d1879eccf5.png](https://i-blog.csdnimg.cn/blog_migrate/e20a2eb032df436343fd462e2a4cd5aa.jpeg)
现在你会发现"霖呆呆"
他变绿了。(当然是选择原谅她了...)
页面中确实是生成了两个style
标签,而且样式的显示规则也是后面的覆盖前面的(style2.css
比style.css
晚引入)
3.2 加载图片
我们已经介绍了如何加载 css
, 那么项目中的图片是如何处理的呢?
file-loader
使用file-loader
可以让我们在js
和css
中引入一些静态资源, 同样的, 你要先安装配置它:
$ npm i --save-dev file-loader
配置webpack.config.js
:
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
}
可以看到, 我在原来的rules
数组中又新增了一个配置, 有了css-loader
的基础, 相信这里 你也很快就看懂了.
在js/css中引入图片
接下来, 就让我们看看在项目里使用图片的效果吧.
首先我在src
目录下放了一张图片: icon.png
.
然后分别在index.js
和style.css
中引入它:
// index.js
import './style.css'
import Icon from './icon.png' // 1. 引入图片
function component() {
var element = document.createElement('div');
element.innerHTML = '霖呆呆';
element.classList.add('color_red')
var img = new Image(200, 200); // 2. 使用图片
img.src = Icon;
element.appendChild(img);
return element;
}
document.body.appendChild(component());
/* style.css */
.color_red {
color: red;
background: url('./icon.png');
height: 300px;
}
重新打包, 然后查看页面, 可以看到图片在两个地方都可以正常引用了.
![53e8997fb0eb6de33d1ff50e3af37f39.png](https://i-blog.csdnimg.cn/blog_migrate/0a4407082a98e373fbbe5b96c9cb0f6f.jpeg)
此时细心的你可能会发现, 在打包完的dist
文件夹里, 会出现一个以MD5哈希值命名的png
文件:
webpack-basic
|- /dist
|- 182ba2a0f5c9507387abe2ad84c23e6b.png
|- bundle.js
|- index.html
没错, 当你在js
或者css
中引入这个图片的时候, 该图片会被处理并添加到output
目录下.
有意思的是, 如果你去掉index.js
和style.css
中对icon.png
的引用的话, 则webpack
打包完之后的dist
文件夹内就不会有这张图片。
file-loader的其它可选参数
在上面?我们只是简单的使用了一下file-loader
:
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"],
},
],
其实, file-loader
还有很多其它的参数.
比如指定打包完之后文件的命名规则、打包完之后存放的目录等等.
这些配置规则都可以放在options
这个对象中:
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {},
},
],
},
],
而options
的选项都有例如name、context、publicPath、outputPath
等等, 具体可以查看:file-loader
我这里演示一下, 将打包之后的图片存放到images文件夹下, 并且命名为图片的原始名称:
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "images/",
},
},
],
},
],
此时, 打包完之后的目录结构就会变成:
webpack-basic
|- /dist
|- /images
|- icon.png
|- bundle.js
|- index.html
name
的[name]
表示使用文件的原始名称, [ext]
表示文件的原始类型, [hash]
表示以哈希值命名, [path]
表示资源相对于context
的路径.
(context
默认为webpack.config.js
)
3.3 加载字体
上面?我们已经学会了如何加载图片, 那么加载字体呢?
其实字体也是一种资源, 所以它的加载方式和图片是一样的, 也是使用file-loader
.
只不过在webpack
中的配置需要你针对一下字体后缀的文件做下处理:
webpack.config.js
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"],
},
]
OK, 让我们在项目里引用一下字体, 在src/
下新建一个fonts
文件夹, 并添加两个字体文件, 此时项目目录变成:
(这两个字体文件是我从Iconfont的在线字体上下载下来的)
webpack-basic
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- fonts
+ |- webfont.woff
+ |- webfont.woff2
|- icon.png
|- index.js
在css
中引用它:
@font-face {
font-family: 'MyFont';
src: url('./fonts/webfont.woff2') format('woff2'), url('./fonts/webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
}
.color_red {
color: red;
font-family: 'MyFont';
background: url('./icon.png');
}
然后修改一下src/index.js
中的字:
// src/index.js
function createElement () {
element.innerHTML = '孔子曰:中午不睡,下午崩溃!孟子曰:孔子说的对!';
}
(注意了,案例中我是偷了下懒,直接使用Iconfont的在线字体写的,它只针对于"孔子曰:中午不睡,下午崩溃!孟子曰:孔子说的对!"
这几个字有效,换成其它字就不行了,当然实际使用上你肯定不能这么干)
重新打包后打开页面, 可以看到刚刚引入的字体.
它和图片一样, 如果没用到字体的话, 也不会被输出到output
里.
![69345dc93465b1f8b0bb0a2877d6a539.png](https://i-blog.csdnimg.cn/blog_migrate/7621cf477899ebd1b4b6dad278a23cf9.jpeg)
3.4 加载xml或csv数据
除了上述介绍的css
, 图片, 字体之外, 可以加载的可用资源还可以是数据, 比如: JSON、CSV、TSV、XML
.
- 内置是支持
JSON
文件的, 比如import Data from './data.json'
默认是正常运行的 CSV和TSV
文件需要使用csv-loader
XML
文件需要使用xml-loader
所以你如果要使用的话, 先安装:
$ npm i --save-dev csv-loader xml-loader
然后在webpack.config.js
中配置:
rules: [
{
test: /\.(csv|tsv)$/,
use: ["csv-loader"],
},
{
test: /\.xml$/,
use: ["xml-loader"],
},
],
现在你就可以直接在项目里引用xml
文件了:
import Data from './data.xml'
3.5 加载txt文本数据
加载.txt
文本数据依靠raw-loader
.
$ npm i --save-dev raw-loader
然后配置:
rules: [
{
test: /\.(csv|tsv)$/,
use: ["csv-loader"],
},
{
test: /\.txt$/,
use: "raw-loader",
},
],
此时引用.txt
文件就可以获取它里面的内容了:
import txt from './assets/file.txt'
export function print() {
console.log(txt) // 我是一段测试raw-loader的文本内容
}
如果你使用file-loader
来处理txt
文件的话, 会将txt
文件压缩到bundle中,而且只能获取到文件的路径:
import txt from './assets/file.txt'
export function print() {
console.log(txt) // 1474623111aaae6b31c08e1fedda68a3.txt
}
四、管理输出
4.1 多个输入/输出
上面?的案例, 我们只有一个输入src/index.js
和一个输出dist/bundle.js
.
其实entry
和output
是支持你有多个输入、输出的.
我重新创建了一个项目webpack-html
. 并依照之前的配置, 只引入了webpack 和 webpack-cli
然后在src
下创建index.js
和print.js
:
src/print.js:
export default function printMe() {
console.log("I' m printMe");
}
src/index.js:
import printMe from './print.js';
function component() {
var element = document.createElement('div');
element.innerHTML = 'Hello Webpack';
var btn = document.createElement('button');
btn.innerHTML = '点击我';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
此时的项目结构为:
webpack-html
|- package.json
|- webpack.config.js
|- /src
|- index.js
|- print.js
然后配置一下webpack.config.js
文件:
const path = require('path')
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
此时, 我配置了两个输入index.js
和print.js
.
而输出的话, 我采用的是[name].bundle.js
的形式, 这样在打包完毕之后, 就会生成以下格式的文件:
/dist
|- app.bundle.js
|- print.bundle.js
在dist
这个文件夹下有app.bundle.js
和print.bundle.js
.
所以你应该能够理解了吧, [name]
对应的就是entery
处.
接着让我们再在dist
文件夹下新建一个index.html
文件并引入刚刚生成的那两个js
文件:
dist/index.html:
html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack Output Managementtitle>
head>
<body>
<script src="app.bundle.js">script>
<script src="print.bundle.js">script>body>
html>
然后让我们打开这个html
看看效果, 页面中显示了 "Hello Webpack", 并且点击按钮的时候, 也会有console.log
.
证明了刚刚输出的两个js
文件引入的都没有问题.
4.2 设定HtmlWebpackPlugin
在上面?所有的案例中, 我们采用的都是手动建立一个index.html
, 然后将输出的js
文件引入这个html
.
其实有一个插件是能让我们免去这一步, 这就是html-webpack-plugin
基本使用
首先让我们安装它:
$ npm i --save-dev html-webpack-plugin
然后重新调整webpack.config.js
:
const path = require('path')
+ const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Webpack Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
现在让我们删掉之前手动创建的index.html
, 然后执行npm run build
看看.
OK?, 它现在已经会自动在dist
文件夹下生成index.html
, 而且还会帮我们把输出的js
都引入进去:
html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack Output Managementtitle>
head>
<body>
<script type="text/javascript" src="app.bundle.js">script>
<script type="text/javascript" src="print.bundle.js">script>body>
html>
其它配置项
在HtmlWebpackPlugin
里, 除了title
(配置产生的index.html
的标题)这个配置项外, 还有很多其它的选项.
比如:
- filename {String } 默认为
index.html
, 这个是指定你生成的index.html
的路径和名称; - template { String } 默认为 '', 有时候你想要自己写生成的
index.html
文件, 这个属性就是指定你的模版路径的. - favion {String} 指定你生成
index.html
的图标, 当然如果你使用了template
, 这个属性也可以不用了
这里我来演示一下使用filename
和template
看看会有什么效果 ?.
首先我在src
下面新建了一个index.html
, 这个用来写模版:
src/index.html:
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>
<%= htmlWebpackPlugin.options.title %>
title>
head>
<body>body>
html>
然后修改一下webpack.config.js
:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
app: "./src/index.js",
print: "./src/print.js",
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack Output Management",
+ filename: "admin.html",
+ template: "src/index.html",
}),
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
现在执行打包指令之后, 生成的dist
文件目录就会变成:
/dist
+ |- admin.html
|- app.bundle.js
|- print.bundle.js
- |- index.html
4.3 清理/dist文件夹
我们在每次构建之后, 都会生成dist
文件夹, 但是如果有历史遗留下来的文件的话, 它不会自动的清理掉.
现在比较推荐的做法就是在每次构建前清理/dist
文件夹, clean-webpack-plugin
插件就是用来做这个事的.
$ npm i --save-dev clean-webpack-plugin
然后在webpack.config.js
配置一下:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
+ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: {
app: "./src/index.js",
print: "./src/print.js",
},
plugins: [
+ new CleanWebpackPlugin({
+ cleanAfterEveryBuildPatterns: ["dist"], // 这个是非必填的
+ }),
new HtmlWebpackPlugin({
title: "Webpack Output Management",
filename: "assets/admin.html",
template: "src/index.html",
}),
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
若你是按照官网的安装方式:
const CleanWebpackPlugin = require('clean-webpack-plugin');
...
new CleanWebpackPlugin(['dist'])
然后你在打包的时候就会报错:
TypeError: CleanWebpackPlugin is not a constructor
这个我查明了原因, 如果你安装的clean-webpack-plugin
是3.0
以上的话, 你就得像我一样用const { CleanWebpackPlugin } = require('clean-webpack-plugin')
这样的方式引用.
并且配置要清理的文件夹也要用cleanAfterEveryBuildPatterns
来定义.
当你升级到前端的TL时,如何快速打造用于中小团队的前端基建
CommonJS和ES6模块规范很多时候并不是你想象的那么回事
线上项目出现问题时如何快速调试定位问题?
带你一起写一遍 React Hooks,让你更深入理解hooks大法的原理
Debug 也有等级的,调试技巧传授(浏览器-基础篇)
学习 React Hooks 可能会遇到的五个灵魂问题
你确定你真的懂CSS吗?
太齐了!前端的学习及工作资料只收藏这份就够了!
Vue3.0 年中上?听说已跳出了virtual dom性能的瓶颈!!
大厂都在用的高级缓存方案
最佳日志实践 - 码农周刊选最受欢迎干货之一
我这个页面居然用了10G的GPU?!!
微前端深入解析!(微前端框架qiankun以及源码讲解)
微前端在企业级应用中的实践(华为项目经验传授)
微信小程序如何更好的做自动化性能监测?
原来微信支付软件架构是这样哒!!!
有这个!你还愁不会写正则吗?
看我如何把node接口耗时降低23%!
高级前端工程师是怎样高效部署前端应用?
Webpack 4 如何帮你删除无效代码?Tree Shaking 终极优化指南
进阶高级前端工程师需要了解的数据结构和算法
【撩妹教程】如何教公司新来的女实习生小姐姐什么是闭包?
前端如何在繁忙的业务中提升自己 全链路日志如何实现? 大厂的高性能小程序原来是这样弄的!感觉可能会改变未来几年的打包方式!应用秒开方案改进测试一下你离前端专家这个称号还有多远?![c54b42a3914bac35e378314d270279d5.png](https://i-blog.csdnimg.cn/blog_migrate/0806d90dcf447604ac075731cd4ae603.png)
![e4fd4150fc78c3bf64378250fc891397.gif](https://i-blog.csdnimg.cn/blog_migrate/19261ac6595ddab997bbfe387043ca02.gif)