- 网站精华
一文彻底解决新手对 webpack 的恐惧！
简介 webpack是一个非常简单的工具，毫无难度可言。webpack阻碍很多人的根本原因是大家对一些概念的不熟悉、对webpack丰富的loader和plugin望而怯步。当你把概念弄清楚后，你自然而然的就知道自己需要什么loader和plugin了。
<h6><span class="ql-size-large">准备环境、版本</span></h6><h6><span class="ql-size-large">node: ^12.16.1</span></h6><h6><span class="ql-size-large">webpack: ^4.44.2</span></h6><h6><span class="ql-size-large">webpack-cli: ^3.3.12</span></h6><h6><br></h6><h6><strong class="ql-size-large">你必须知道的知识</strong></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">webpack概念</strong></h5><p><br></p><h6><span class="ql-size-large">webpack是一个现代JavaScript应用程序的静态模块打包器。如果你接触js够早的话，你一定知道最初的工程可没有这样的打包工具，一个文件就相当于一个模块，最终这些文件需要按照一定的顺序使用script标签引入html（因为如果顺序不对就会导致依赖变量丢失等错误问题）。但是这个写项目不仅麻烦而且不优雅，随着node.js的出现和发展，才出现了这类基于node.js运行的打包工具（gulp、grunt，以及现在最流行的webpack），因为node.js拥有可对文件操作的能力。所以webpack本质就是为我们打包js的引用，而我们常听到各种loader、各种plugin、热更新、热模块替换等等都是webpack的一个升华，使得webpack能为我们提供更多的帮助。</span></h6><h6><br></h6><h6><br></h6><h6><strong class="ql-size-large">loader：webpack本身只能打包js和json格式的文件，但实际项目中我们还有会css、scss、png、ts等其他文件，这时我们就需要使用loader来让它正确打包。</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large" style="color:black;">总结：loader是处理编译js和json以外的文件时用的</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">常见的loader：</strong></h6><h6 class="ql-indent-2"><strong class="ql-size-large"><img src="data:image/png;base64,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"></strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large" style="color:rgb(0, 0, 0);">plugin：plugin可以在webpack运行到某个阶段时候，帮你做一些事情，类似react/vue中的生命周期。具体的某个插件（plugin）就是在webpack构建过程中的特定时机注入扩展逻辑来改变构建结果，作用于整个构建过程。</strong></h6><p class="ql-indent-1"><br></p><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">弄明白这些东西</strong></h5><p><br></p><h6><strong class="ql-size-large">postcss：postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具。你可以把他理解成babel，他本身作用不大，我们很多具体需求的实现都需要他的插件来完成，他本身更像一个平台。</strong></h6><h6><br></h6><h6><strong class="ql-size-large">例如，项目中我们需要webpack自动的帮我们为css样式加上兼容性前缀，实际帮我们加上前缀的插件是</strong><strong>autoprefixer[1]</strong><strong class="ql-size-large">，但他能为我们加前缀的前提又是我们有postcss。千万不要把postcss误解postcss成scss、less替代品</strong></h6><p><br></p><h6 class="ql-indent-1"><strong class="ql-size-large">对于“ PostCSS”一词，我们可以替代地指两件事：</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">该工具本身就是</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">PostCSS</strong><strong>[2]</strong><strong class="ql-size-large">（运行时会得到什么）</strong><strong>npm install postcss</strong><strong class="ql-size-large">，以及</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">该工具支持</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">的PostCSS插件生态系统</strong><strong>[3]</strong></h6><p class="ql-indent-1"><br></p><h6><strong class="ql-size-large">babel：babel 是一个 JavaScript 编译器，他可以让我们不再考虑兼容性，尽情的使用下一代的 JavaScript 语法编程。但是要实现具体的语法转换，我们还是要使用他的</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">插件</strong><strong>[4]</strong><strong class="ql-size-large">才能实现</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">在babel7后为我们提供了</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">预设</strong><strong>[5]</strong><strong class="ql-size-large">，可以让我们不再自己麻烦的对插件进行组合，想在什么环境运行就写什么预设即可（相当于每个预设选项中都帮你组合好了这个环境中需要用到的插件）</strong></h6><p class="ql-indent-1"><br></p><h6><strong class="ql-size-large">es6+语法：babel默认会转换语法，例如：let、const、() => {}、class</strong></h6><p><br></p><h6><strong class="ql-size-large">es6+特性：babel不会转换特性，特性需要js代码垫片来兼容低版本的浏览器。例如：Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise</strong></h6><p><br></p><h6><strong class="ql-size-large">@babel/core：@babel/core是babel的核心库，所有的核心api都在这个库里，这些api可供babel-loader调用</strong></h6><p><br></p><h6><strong class="ql-size-large">@babel/preset-env：这是一个预设的插件集合，包含了一组相关的插件，Bable中是通过各种插件来指导如何进行代码转换。该插件包含所有es6转化为es5的翻译规则</strong></h6><p><br></p><h6><strong class="ql-size-large">@babel/polyfill：@babel/preset-env只是提供了语法转换的规则，但是它并不能弥补浏览器缺失的一些新的功能，如一些内置的方法和对象，如Promise，Array.from等，此时就需要polyfill来做js的垫片，弥补低版本浏览器缺失的这些新功能。注意：Babel 7.4.0该包将被废弃</strong></h6><p><br></p><h6><strong class="ql-size-large">core-js：它是JavaScript标准库的polyfill，而且它可以实现按需加载。使用@babel/preset-env的时候可以配置core-js的版本和core-js的引入方式。注意：@babel/polyfill依赖core-js</strong></h6><p><br></p><h6><strong class="ql-size-large">regenerator-runtime：提供generator函数的转码</strong></h6><h6 class="ql-indent-1"><br></h6><h5><strong class="ql-size-large" style="color:rgb(61, 167, 66);">补充知识点（重要）</strong></h5><p><br></p><h6><strong class="ql-size-large">browserslist：browserslist实际上就是声明了一段浏览器的合集，我们的工具可以根据这个合集描述，针对性的输出兼容性代码，browserslist应用于babel、postcss等工具当中。</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">browserslist可以在package.json文件配置，也可以单出写一个.browserslistrc文件进行配置</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">工具会自动查找.browserslistrc中的配置，如果没有发现.browserslistrc文件，则会去package.json中查找</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">例子： </strong></h6><h6 class="ql-indent-2"><strong class="ql-size-large"><img src="data:image/png;base64,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"> </strong></h6><h6 class="ql-indent-2"><strong class="ql-size-large" style="color:rgb(0, 0, 0);"> “> 1%”表示兼容市面上使用量大于百分之一的浏览，“last 1 chrome version”表示兼容到谷歌的上一个版本，具体的可以使用命令</strong><strong>npx browserslist "> 1%"</strong><strong class="ql-size-large" style="color:rgb(0, 0, 0);">的方式查看都包含了哪些浏览器</strong></h6><h6><strong class="ql-size-large"> chunk：它不是库也不是插件，它就是一个名词，顾名思义就是代码块。为什么要单独把他拎出来说呢，因为你明白它以后你自然就能理解webpack中配置一些参数的意思了</strong></h6><p><br></p><h6><strong class="ql-size-large">chunks：一个chunks至少包含一个chunk，chunks是多个chunk的合集</strong></h6><h6><strong class="ql-size-large"> <img src="data:image/png;base64,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"></strong></h6><h6><strong class="ql-size-large"> 上面代码来说，a.js就是chunk，而index.js就是chunks，在webpack构建中入口是chunks，出口是chunk（知道这个概念就行）</strong></h6><h6><br></h6><h5><span class="ql-size-large">搭建webpack项目</span></h5><h5><br></h5><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">初始化项目</strong></h5><h6><br></h6><h6><strong class="ql-size-large" style="color:rgb(0, 0, 0);">1.新建一个文件夹</strong></h6><pre class="ql-syntax" spellcheck="false">mkdir learnWebpack
</pre><h6><br></h6><h6><strong class="ql-size-large">2.进入到文件夹中</strong></h6><pre class="ql-syntax" spellcheck="false">cd learnWebpack
</pre><h6><br></h6><h6><strong class="ql-size-large" style="color:rgb(0, 0, 0);">初始化package.json文件</strong></h6><h6><br></h6><pre class="ql-syntax" spellcheck="false">npm init 或npm init -y创建配置
</pre><h6><br></h6><pre class="ql-syntax" spellcheck="false">{
"name": "learnwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" exit 1"
},
"author": "",
"license": "ISC"
}
</pre><h6><br></h6><h6><strong class="ql-size-large" style="color:rgb(0, 0, 0);">安装webpack、webpack-cli依赖</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add webpack@4.44.2 webpack-cli@3.3.12 -D
</pre><h6><br></h6><h6><strong class="ql-size-large" style="color:rgb(0, 0, 0);">根目录下创建src、src下创建index.js</strong></h6><h6><strong class="ql-size-large" style="color:rgb(0, 0, 0);">在index.js中添加一段代码:</strong></h6><h6><br></h6><pre class="ql-syntax" spellcheck="false">console.log('hello webpack')
</pre><h6><br></h6><h6><strong class="ql-size-large" style="color:rgb(0, 0, 0);">在package.json文件中的scripts字段中添加</strong><strong>"start": "webpack"</strong></h6><pre class="ql-syntax" spellcheck="false">"scripts": {
"test": "echo \"Error: no test specified\" exit 1",
"start": "webpack"
}
</pre><h6><strong class="ql-size-large">在命令行中执行</strong><strong>yarn start</strong><strong class="ql-size-large">，我们会发现编译成功，但有个警告！在webpack自动在根目录下创建了一个dist文件夹和dist文件夹中的main.js文件</strong></h6><h6 class="ql-indent-1"><span class="ql-size-large">关于警告：ARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: </span><span class="ql-size-large" style="color:rgb(30, 107, 184);">webpack.js.org/configurati…</span>[7]<span class="ql-size-large">;</span><strong class="ql-size-large"> 警告中已经说的很清楚了，我们没有设置mode字段。我们只需在webpack的配置中配置mode字段即可消除该警告</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">关于dist文件夹和main.js文件 ：这是webpack4当初宣传的零配置使用。很显然我们这里什么都没配置，就帮我们成功打包了一个src下的代码。该功能实际上是wabpack默认帮我们配置了一套简单的打包配置，让我们看看webpack默认为我们配置了什么：</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
module.exports = {
extry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
}
}
</pre><h6><br></h6><h6><br></h6><h6><strong class="ql-size-large" style="color:rgb(0, 0, 0);">注意：这份默认配置是不是太过简单了。看了这个配置后，我想你也知道为什么当我们创建的不是src或者src下不是index.js时候无法使用零配置功能的原因了</strong></h6><p><br></p><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">webpack的零配置</strong></h5><p><br></p><h6><strong class="ql-size-large">上面我们看到了，零配置很弱，真正的项目中他完全不可能满足我们的需求</strong></h6><h6><strong class="ql-size-large">我们想要自定义配置webpack的话，需要在根目录上创建一个</strong><strong>webpack.config.js</strong><strong class="ql-size-large">的文件，这个文件的内容可以覆盖webpack的零配置</strong></h6><p><br></p><h6><strong class="ql-size-large">使用默认的配置文件：webpack.config.js</strong></h6><pre class="ql-syntax" spellcheck="false"># 使用webpack.config.js配置文件时，输入该命令即可启动webpack打包
webpack
</pre><h6><strong class="ql-size-large">使用其他配置文件：如yzyConfig.js，可以通过</strong><strong>--config yzyConfig.js</strong><strong class="ql-size-large">来指定webpack使用哪个配置文件来执行构建</strong></h6><pre class="ql-syntax" spellcheck="false"># 通过--config来指定其他配置文件，并按照指定的配置文件的配置内容进行打包
webpack --config yzyConfig.js
</pre><p><br></p><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">webpack配置核心概念</strong></h5><p><br></p><h6><strong class="ql-size-large">chunk：指代码块，一个chunk可能由多个模块组合而成，也用于代码合并与分割（这里的合并分割主要指指纹策略的判断），指纹策略简单来说就是文件名后的hash</strong></h6><h6><strong class="ql-size-large">bundle：资源经过webpack流程解析编译后最终输出的成果文件（一个.js格式的文件，也就是我们的output文件）</strong></h6><h6><strong class="ql-size-large">entry：文件打包的入口，webpack会根据entry递归的去寻找依赖，每个依赖都将被它处理，最后打包到集合文件中</strong></h6><h6><strong class="ql-size-large">output：配置打包输出的位置、文件名等</strong></h6><h6><strong class="ql-size-large">loader：默认情况下，webpack仅支持js和json文件，通过loader，可以让它解析其他类型的文件。理论上只要有相应的loader，webpack可以处理任何类型的文件</strong></h6><h6><strong class="ql-size-large">plugin：loader主要的职责是让webpack认识更多的文件类型，而plugin的职责则是让其可以控制构建流程，从而执行一些特殊的任务。插件的功能非常强大，可以完成各种各样的任务</strong></h6><h6>mode：目标环境，不用的目标环境会影响webpack打包时的决策</h6><p><br></p><p>production：码进行压缩等一系列优化操作development：有利于热更新的处理，识别哪个模块变化代none：什么都不做，打包时会有提示警告</p><p><br></p><h6><strong class="ql-size-large">配置webpack.config.js</strong></h6><p><br></p><h5><span class="ql-size-large" style="color:rgb(171, 25, 66);">项目搭建目标</span></h5><p><br></p><h6><strong class="ql-size-large">咱们目标不是搭建一个完整全面的项目工程，目标是以一些有代表性的功能作为切入点学习webpack，我相信这些你认真看过后一定能做到举一反三</strong></h6><h6><strong class="ql-size-large">实现加载css</strong></h6><h6><strong class="ql-size-large">实现css效果展示</strong></h6><h6><strong class="ql-size-large">实现css前缀自动补充</strong></h6><h6><strong class="ql-size-large">实现css以文件形式导出</strong></h6><h6><strong class="ql-size-large">实现自动生成html文件</strong></h6><h6><strong class="ql-size-large">实现打包清空dist文件夹</strong></h6><h6><strong class="ql-size-large">实现图片在js文件中引入</strong></h6><h6><strong class="ql-size-large">实现图片在css文件中引入</strong></h6><h6><strong class="ql-size-large">实现webpack本地服务</strong></h6><h6><strong class="ql-size-large">实现多页面打包</strong></h6><p><br></p><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现加载css</strong></h5><p><br></p><h6><strong class="ql-size-large">我们已经知道.css文件无法正常被webpack打包进bundle（bundle的解释可查看“webpack配置核心概念”部分）文件，所以我们需要一个loader作为加载器将它正确打包进bundle文件</strong></h6><h6><strong class="ql-size-large">文件内容</strong></h6><h6><br></h6><h6><strong class="ql-size-large">安装css-loader</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add css-loader -D
</pre><h6><strong class="ql-size-large">配置css-loader</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: "development",
module: {
rules: [
{
test: /\.css$/,
use: "css-loader"
}
]
}
}
</pre><h6><strong class="ql-size-large">运行webpack命令，检查一下dist/main.js中是否包含了css文件中的内容</strong></h6><h6><br></h6><h6><strong class="ql-size-large">我们发现css文件的内容被成功打包了，这时如果你在dist文件夹下创建了一个html页面给div元素加上了box类，并引入main.js文件，你会发现完全看不到样式效果。</strong></h6><h6><strong class="ql-size-large">因为此时css中的内容只是被作为一段字符串引入了js中（相当于对css文件的内容进行了JSON.stringify），所以你自然是看不到效果的。</strong></h6><h6><strong class="ql-size-large">想要看到效果要怎么办？当然是将css内容放进style标签啦！不过这步不需要我们做，因为我们有style-loader为我们做这件事情！</strong></h6><h6><br></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现css效果展示</strong></h5><p><br></p><h6><strong class="ql-size-large">安装style-loader</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add style-loader -D
</pre><h6><strong class="ql-size-large">配置style-loader</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
</pre><h6><strong class="ql-size-large">这里需要注意的是，对同一种类型文件使用多个 loader的时候，use属性接收一个数组，并且从右向左执行。所以style-loader要写在css-loader前面</strong></h6><h6><strong class="ql-size-large">运行webpack命令，看一下结果</strong></h6><h6><br></h6><h6><strong class="ql-size-large">成功！</strong></h6><h6><strong class="ql-size-large">但是我们知道，css3在浏览器中会存在兼容性问题，我们可以通过给属性加上前缀来解决该问题。前端丰富的生态当然不会让你自己傻傻的做这件事情，我们可以通过autoprefixer这个插件帮我们完成</strong></h6><h6><br></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现css前缀自动补充</strong></h5><p><br></p><h6><strong class="ql-size-large">已经知道autoprefixer是postcss工具的插件，所以我们需要安装postcss和postcss-loader</strong></h6><h6><strong class="ql-size-large">安装postcss、postcss-loader、autoprefixer，这里postcss-loader需要指定4.x的版本，因为4.x的版本和webpack4会存在报错问题</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add autoprefixer postcss-loader@4.2.0 postcss -D
</pre><h6><strong class="ql-size-large">配置postcss-loader和插件autoprefixer</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('autoprefixer')]
}
}
}
]
}
]
}
}
</pre><h6><strong class="ql-size-large">当loader需要写配置的时候，我们可以把loader写成一个对象，loader属性就是要使用的loader名称，options属性就是这个loader的配置对象。autoprefixer是postcss的插件，所以autoprefixer的使用自然就要写在postcss-loader的配置中了</strong></h6><h6><strong class="ql-size-large">因为postcss有自己的配置文件，所以这里还可以写成这样：</strong></h6><pre class="ql-syntax" spellcheck="false">// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
}
}
// 根目录下新建postcss.config.js文件
module.exports = {
plugins: [require('autoprefixer')],
}
</pre><h6><strong class="ql-size-large">这里我们需要配置一下browserslist，否则插件不知道按照什么样的规则进行前缀补全</strong></h6><pre class="ql-syntax" spellcheck="false">// 在package.json文件中添加
// 这里的意思表示目标浏览器为ie浏览器，并需要兼容到ie8以上
"browserslist": ["ie > 8"]
</pre><h6><strong class="ql-size-large">运行</strong><strong>webpack</strong><strong class="ql-size-large">命令看一下结果</strong></h6><h6><br></h6><h6><strong class="ql-size-large">成功！</strong></h6><h6><br></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现css以文件形式导出</strong></h5><p><br></p><h6><strong class="ql-size-large">随着项目的增大，我们不想把那么多的样式都放在style标签中，我们想用link标签引入，这时我们就需要使用</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">mini-css-extract-plugin</strong><strong>[8]</strong></h6><h6><strong class="ql-size-large">安装mini-css-extract-plugin</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add mini-css-extract-plugin -D
</pre><h6><strong class="ql-size-large">配置mini-css-extract-plugin插件和它的loader，这时我们不需要style-loader了，我们要style-loader替换成MiniCssExtractPlugin.loader</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css"
})
]
}
</pre><h6><strong class="ql-size-large">MiniCssExtractPlugin可以配置输出文件名</strong></h6><h6><strong class="ql-size-large">[name]为占位符，引入的时候是什么名字，导出的时候就是什么名字</strong></h6><h6><strong class="ql-size-large">css/表示导出到css文件夹下</strong></h6><h6><strong class="ql-size-large">运行</strong><strong>webpack</strong><strong class="ql-size-large">命令看一下结果</strong></h6><h6><br></h6><h6><strong class="ql-size-large">成功！</strong></h6><h5><br></h5><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现自动生成html文件</strong></h5><p><br></p><h6><strong class="ql-size-large">我们发现dist下的html是我们自己手动创建的，这显然不够优雅。</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">html-webpack-plugin</strong><strong>[9]</strong><strong class="ql-size-large">帮你解决！</strong></h6><h6><strong class="ql-size-large">安装html-webpack-plugin，这里也要制定一下4.x的版本</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add html-webpack-plugin@4.5.2 -D
</pre><h6><strong class="ql-size-large">配置html-webpack-plugin</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
</pre><h6><strong class="ql-size-large">运行</strong><strong>webpack</strong><strong class="ql-size-large">命令看一下结果</strong></h6><h6><br></h6><h6><strong class="ql-size-large">成功！很显然HtmlWebpackPlugin根据我们的模版为我们生成了新的html页面，并自动引入了dist包下的依赖。查看更多</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">HtmlWebpackPlugin配置</strong><strong>[10]</strong></h6><h6><br></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现打包清空dist文件夹</strong></h5><p><br></p><h6><strong class="ql-size-large">我们会发现每次打包dist文件夹的内容会被覆盖，但是如果下次打包出来的文件名不同，那旧的打包文件还会存在，这是我们不想要的。</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">clean-webpack-plugin</strong><strong>[11]</strong><strong class="ql-size-large">来帮我们解决这个问题</strong></h6><h6><strong class="ql-size-large">安装clean-webpack-plugin</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add clean-webpack-plugin -D
</pre><h6><strong class="ql-size-large">配置clean-webpack-plugin</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
]
}
</pre><h6><strong class="ql-size-large">这时，你也在dist文件夹下随意建一个其他文件，运行</strong><strong>webpack</strong><strong class="ql-size-large">命令看一下结果，你会发现你随意建的文件不在了。验证了这一点，就说明你成功了</strong></h6><h6><br></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现图片在js文件中引入</strong></h5><p><br></p><h6><strong class="ql-size-large">实现这个功能我们使用url-loader，当然你也可以使用file-loader。url-loader是file-loader的升级版，它内部也依赖了file-loader。file-loader和url-loader在webpack5后都被废弃了，使用asset modules代替</strong></h6><h6><strong class="ql-size-large">安装url-loader和file-loader</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add url-loader file-loader -D
</pre><h6><strong class="ql-size-large">你可以会疑问为什么要装file-loader，因为url-loader依赖file-loader。若不装，当url-loader将图片转换为base64导入bundle时不会存在问题，但直接输出图片到dist文件夹下就会报错，告诉你缺少file-loader</strong></h6><h6><strong class="ql-size-large">配置url-loader</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 1024 * 3
}
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
]
}
</pre><h6><strong class="ql-size-large">[ext]表示导入时是什么格式，导出时就是什么格式</strong></h6><h6><strong class="ql-size-large">limit表示图片大小的阈值，超过阈值的图片会被原封不动的放置到打包文件夹下（file-loader做的这件事情，在js中引入时会帮你生成一个地址，即打包后对应的访问地址），没有超过会处理成base64放在bundle文件中</strong></h6><h6><strong class="ql-size-large">在入口文件中引入图片</strong></h6><pre class="ql-syntax" spellcheck="false">// index.js
import './index.css'
import mk85 from './assets/images/mk85.jpeg'
console.log(mk85) // mk85.jpeg
const img = document.createElement('img')
img.src = mk85
const BoxDiv = document.getElementsByClassName('box')
BoxDiv[0].appendChild(img)
</pre><h6><strong class="ql-size-large">运行</strong><strong>webpack</strong><strong class="ql-size-large">命令看一下结果</strong></h6><h6><br></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现图片在css文件中引入</strong></h5><p><br></p><h6><strong class="ql-size-large">在css中引入图片我们依旧使用url-loader，但需要对配置稍微进行修改</strong></h6><h6><strong class="ql-size-large">css代码</strong></h6><pre class="ql-syntax" spellcheck="false">.box {
width: 100px;
height: 100px;
/* background-color: yellowgreen; */
background-image: url("./assets/images/mk85.jpeg");
display: flex;
}
</pre><h6><strong class="ql-size-large">直接引用并打包，打包成功！打开html页面，发现看不到图片，因为地址不对。打包后mk85图片在dist文件夹下，而index.css的引用路径依旧是mk85.jpeg，可index.css是在css文件夹下的，所以自然是无法引用到。</strong></h6><h6><strong class="ql-size-large">那如何才能引用到呢？最简单的方法就是加上</strong><strong>/</strong><strong class="ql-size-large">，但这里有坑（其实也不是坑，这是一个关于</strong><strong>/images</strong><strong class="ql-size-large">、</strong><strong>./images</strong><strong class="ql-size-large">、</strong><strong>image</strong><strong class="ql-size-large">三者有什么不同的知识点）。补充：create-react-app也是通过</strong><strong>/</strong><strong class="ql-size-large"> 实现引用统一的</strong></h6><h6><br></h6><h6><strong class="ql-size-large">修改url-loader配置</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 1024 * 3,
outputPath: "images/",
publicPath: "/images",
}
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
]
}
</pre><h6><strong class="ql-size-large">outputPath表示输出的到哪里（file-loader提供的）</strong></h6><h6><strong>name: images/[name].[ext]</strong><strong class="ql-size-large">这样写和用outputPath设置效果一样吗？在配合publicPath字段时不一样。所以当你不需要配置publicPath字段时，可以通过name设置输出路径（file-loader提供的）</strong></h6><pre class="ql-syntax" spellcheck="false"> options: {
name: '[name].[ext]',
limit: 1024 * 3,
outputPath: "images/",
publicPath: "/images",
}
// 等价于
options: {
name: 'images/[name].[ext]',
limit: 1024 * 3,
publicPath: "/",
}
</pre><h6><strong class="ql-size-large">publicPath表示资源引用的路径</strong></h6><h6><strong class="ql-size-large">运行</strong><strong>webpack</strong><strong class="ql-size-large">命令看一下结果</strong></h6><h6><br></h6><h6><strong class="ql-size-large">成功了！是我们想要的结果，不过问题又来了，当你打开html页面时发现并不能看到图片正常显示，这里就牵扯到关于</strong><strong>/images</strong><strong class="ql-size-large">、</strong><strong>./images</strong><strong class="ql-size-large">、</strong><strong>image</strong><strong class="ql-size-large">三者有什么不同的知识点</strong></h6><h6><strong class="ql-size-large">简单来说，如果我起了服务，我的实际路径就是“localhost:8080/images/mk85.jpeg”，如果没有起服务那就是“/images/mk85.jpeg”</strong></h6><h6><strong class="ql-size-large">所以让我们开启一个服务吧！</strong></h6><h5><br></h5><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现webpack本地服务</strong></h5><p><br></p><h6><strong class="ql-size-large">安装webpack-dev-server</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add webpack-dev-server -D
</pre><h6><strong class="ql-size-large">配置url-loader</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 1024 * 3,
outputPath: "images/",
publicPath: "/images",
}
}
}
]
},
devServer: {
open: true,
port: 8080,
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
]
}
</pre><h6><strong class="ql-size-large">只需要加上devServer配置即可</strong></h6><h6><strong class="ql-size-large">open表示打开浏览器</strong></h6><h6><strong class="ql-size-large">port表示服务的端口号</strong></h6><h6><strong class="ql-size-large">注意：这时就不是使用</strong><strong>webpack</strong><strong class="ql-size-large">命令来启动项目了，需使用</strong><strong>webpack-dev-server</strong><strong class="ql-size-large">来启动</strong></h6><h6><br></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">实现多页面打包</strong></h5><p><br></p><h6><strong class="ql-size-large">顾名思义，多页面自然是有多个html页面，每个html页面都有自己的js文件，那么，有多少个入口就要有多少个出口</strong></h6><h6><strong class="ql-size-large">我们首先要设置一下目录形式，以适应多页面打包的形式（以下形式不是唯一的，但有助于大家的理解）</strong></h6><h6><br></h6><h6><strong class="ql-size-large">这里不需要src/index.js</strong></h6><h6><strong class="ql-size-large">新建一个webpack.multiple.config.js</strong></h6><h6><strong class="ql-size-large">新建src/pages/login/js/index.js</strong></h6><h6><strong class="ql-size-large">新建src/pages/main/js/index.js</strong></h6><h6><strong class="ql-size-large">安装glob，用于处理文件</strong></h6><pre class="ql-syntax" spellcheck="false">yarn add glob -D
</pre><h6><strong class="ql-size-large">配置webpack.multiple.config.js</strong></h6><pre class="ql-syntax" spellcheck="false">module.exports = {
entry: {
login: './src/pages/login/js/index.js',
main: './src/pages/main/js/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'login.html',
chunks: ['login'] // chunks的名字对应entry中的名字
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'main.html',
chunks: ['main']
})
]
}
</pre><h6><strong class="ql-size-large">这样就完成了！你可以使用</strong><strong>webpack --config ./`webpack.multiple.config.js</strong><strong class="ql-size-large"> 命令运行一下。结果会如你所愿的</strong></h6><h6><strong class="ql-size-large">但是，这时你肯定会想难道我每写一个页面就重新配置一次吗？这也太麻烦了，也不优雅！那我们现在解决一下这个问题吧，直接上代码</strong></h6><pre class="ql-syntax" spellcheck="false">// 我们写一个方法自动做我们上面配置的事情
const glob = require("glob")
const setMpa = () => {
const entry = {}
const htmlwebpackplugins = []
// 通过glob库拿到我们的入口文件数组
const entryFiles = glob.sync(path.resolve(__dirname, "./src/pages/*/*/index.js"))
// console.log(entryFiles)
// 打印结果
// [
// '/Users/yzy/Desktop/learnSpace/learnWebpack/src/pages/login/js/index.js',
// '/Users/yzy/Desktop/learnSpace/learnWebpack/src/pages/main/js/index.js'
// ]
entryFiles.forEach((item) => {
const entryFile = item
const match = entryFile.match(/src\/pages\/(.*)\/js\/index\.js$/)
// console.log(match)
// 打印结果
// [
// 'src/pages/login/js/index.js',
// 'login',
// index: 43,
// input: '/Users/yzy/Desktop/learnSpace/learnWebpack/src/pages/login/js/index.js',
// groups: undefined
// ]
const pageName = match[1]
entry[pageName] = entryFile
htmlwebpackplugins.push(
new HtmlWebpackPlugin({
template: `./src/index.html`,
filename: `${pageName}.html`,
chunks: [pageName]
})
)
})
return {
entry,
htmlwebpackplugins,
}
}
</pre><h6><strong class="ql-size-large">有了这个方法以后，我们把它加到配置文件里</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const glob = require("glob")
const setMpa = () => {
const entry = {}
const htmlwebpackplugins = []
const entryFiles = glob.sync(path.resolve(__dirname, "./src/pages/*/*/index.js"))
entryFiles.forEach((item) => {
const entryFile = item
const match = entryFile.match(/src\/pages\/(.*)\/js\/index\.js$/)
const pageName = match[1]
entry[pageName] = entryFile
htmlwebpackplugins.push(
new HtmlWebpackPlugin({
template: `./src/index.html`,
filename: `${pageName}.html`,
chunks: [pageName]
})
)
})
return {
entry,
htmlwebpackplugins,
}
}
const { entry, htmlwebpackplugins } = setMpa()
module.exports = {
entry,
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 1024 * 3,
outputPath: "images/",
publicPath: "/images",
}
}
}
]
},
devServer: {
open: true,
port: 8080,
hot: true
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new CleanWebpackPlugin(),
...htmlwebpackplugins
]
}
</pre><h6><strong class="ql-size-large">我们再使用</strong><strong>webpack --config ./`webpack.multiple.config.js</strong><strong class="ql-size-large"> 命令运行一下，成功！</strong></h6><h6><br></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">小结</strong></h5><p><br></p><h6><strong class="ql-size-large">到这里就算是完成了一个简单的webpack项目配置，看到这里先不要着急往下看，思考一下是否真的了解了loader和plugin，如果让你写一个loader和plugin，你有思路吗</strong></h6><h6><strong class="ql-size-large">我想不出意外的话，你应该是已经有了思路。如果没有也不用担心，看看下面的内容</strong></h6><h6><br></h6><h6><strong class="ql-size-large">实现一个loader</strong></h6><h6><strong class="ql-size-large">先上链接，</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">官网编写loader文档</strong><strong>[12]</strong></h6><h6><strong class="ql-size-large">首先loader是一个函数，注意这里不能是箭头函数</strong></h6><h6><strong class="ql-size-large">编写一个替换字符串的loader</strong></h6><pre class="ql-syntax" spellcheck="false">// replaceLoader.js
module.exports = function (soure) {
console.log(soure, this) // 这里可以自己打印看一下信息，内容太长我就不放进来了
return source.replace('hello webpack', "你好呀，webpack！")
}
</pre><h6><strong class="ql-size-large">loader是一个函数</strong></h6><h6><strong class="ql-size-large">不能使用箭头函数，因为要用到上下文的this</strong></h6><h6><strong class="ql-size-large">soure接收到的是待处理的文件源码</strong></h6><h6><strong class="ql-size-large">return处理后的文件源码，也是下一个loader接收到的文件源码</strong></h6><h6><strong class="ql-size-large">使用loader</strong></h6><pre class="ql-syntax" spellcheck="false">{
test: /\.js$/,
use: path.resolve(__dirname, './loader/replaceLoader.js')
}
</pre><h6><strong class="ql-size-large">运行</strong><strong>webpack</strong><strong class="ql-size-large">命令看一下结果</strong></h6><h6><br></h6><h6><strong class="ql-size-large">成功！是不是发现原来自定义loader这么简单，感兴趣可以自己尝试写一下css、png等其他文件的loader</strong></h6><h6><br></h6><h6><strong class="ql-size-large">实现一个plugin</strong></h6><h6><strong class="ql-size-large">线上链接，</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">官网编写plugin文档</strong><strong>[13]</strong></h6><h6><strong class="ql-size-large">同样简单，我们已经用了很多次plugin了，发现是不是都需要new一下。很显然，自定义loader是一个构造函数。</strong></h6><h6><strong class="ql-size-large">我们看一下格式：</strong></h6><pre class="ql-syntax" spellcheck="false">class PluginName {
constructor (options) {
}
apply(compiler) {
...
}
}
</pre><h6><strong class="ql-size-large">这里一定要写apply方法，webpack会通过apply方法启动插件</strong></h6><h6><strong class="ql-size-large">PluginName可以写成普通function，apply必须挂载到原型对象上（</strong><strong>PluginName.prototype</strong><strong class="ql-size-large">）</strong></h6><h6><strong class="ql-size-large">class类中的apply不能写成箭头函数</strong></h6><h6><strong class="ql-size-large">webpack的</strong><strong class="ql-size-large" style="color:rgb(30, 107, 184);">compiler钩子</strong><strong>[14]</strong><strong class="ql-size-large">，查看钩子决定你的插件要在哪一步做什么</strong></h6><h6><strong class="ql-size-large">编写一个假的html-webpack-plugin，输出一个fake.html文件</strong></h6><pre class="ql-syntax" spellcheck="false">class HtmlPlugin {
constructor (options) {
}
apply(compiler) {
compiler.hooks.emit.tap('HtmlPlugin', (compolation) => {
const content = '<html><body>fake html</body></html>'
compolation.assets['fake.html'] = {
source: function () {
return content
},
size: function () {
return content.length
}
}
})
}
}
module.exports = HtmlPlugin
</pre><h6><strong class="ql-size-large">使用这个plugin</strong></h6><pre class="ql-syntax" spellcheck="false">plugins: [
new HtmlPlugin()
]
</pre><h6><strong class="ql-size-large">运行</strong><strong>webpack</strong><strong class="ql-size-large">命令看一下结果</strong></h6><h6><br></h6><h6><strong class="ql-size-large">成功！你也可以试着完善一下这个插件，加上配置，加上引入资源文件等</strong></h6><h6><br></h6><h6><strong class="ql-size-large">指纹策略</strong></h6><p><br></p><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">关于浏览器缓存</strong></h5><p><br></p><h6><strong class="ql-size-large">现代浏览器都会有缓存机制</strong></h6><h6><strong class="ql-size-large">当我们第一次访问A网站时，这时加载了y.js的文件进行了缓存</strong></h6><h6><strong class="ql-size-large">当我们第二次访问A网站时，浏览器发现缓存中已经有y.js了</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">缓存中有y.js那就用缓存的文件</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">优点：减少了资源的请求</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">缺点：当y.js的内容更新了，若不通过强制刷新浏览器的话则无法获取最新的y.js内容</strong></h6><h6><strong class="ql-size-large">我们加上标识符就可以解决这个问题了</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">第一次访问时加载了y.123.js</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">第二次访问发现有缓存就用缓存中的y.123.js</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">这时服务器中的y文件内容改变了，同时也修改了名字为y.111.js</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">第三次访问发现没有y.111.js文件，正确加载最新y.111.js</strong></h6><h6><strong class="ql-size-large">上诉都是比较简单解释，具体细节你可以不用知道，明白这个缓存机制的缓存方式即可</strong></h6><h6><br></h6><h5><strong class="ql-size-large" style="color:rgb(171, 25, 66);">webpack中使用指纹策略</strong></h5><p><br></p><h6><strong class="ql-size-large">使用：</strong></h6><pre class="ql-syntax" spellcheck="false">filename: '[name].[hash].[ext]',
</pre><h6><strong class="ql-size-large">hash：以项目为单位，项目内容改变了，则会生成新的hash，内容不变则hash不变</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">整个工程任何一个需要被打包的文件发生了改变，打包结果中的所有文件的hash值都会改变</strong></h6><h6><strong class="ql-size-large">chunkhash：以chunk为单位，当一个文件内容改变，则整个chunk组的模块hash都会改变</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">假设打包出口有a.123.js和c.123.js</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">a文件中引入了b文件</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">修改了b文件的内容</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">重新的打包结果为a.111.js和c.123.js</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">a的hash值会被影响，但是c的hash值不受影响</strong></h6><h6><strong class="ql-size-large">contenthash：以自身内容为单位，依赖不算</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">假设打包出口有a.123js和b.123.css</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">a文件引入了b文件</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">修改了b文件的内容</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">重新打包结果为a.123.js和b.111.css</strong></h6><h6 class="ql-indent-1"><strong class="ql-size-large">a的hash值不受影响</strong></h6><h6><strong class="ql-size-large">热模块替换</strong></h6><h6><strong class="ql-size-large">你一定使用过这个功能，只是你不知道罢了！</strong></h6><h6><strong class="ql-size-large">场景：</strong></h6><h6><strong class="ql-size-large">启动项目本地服务</strong></h6><h6><strong class="ql-size-large">修改了一个.css文件的内容</strong></h6><h6><strong class="ql-size-large">浏览器没有刷新，但是修改的内容还是生效了</strong></h6><h6><strong class="ql-size-large">这就是热模块替换，提示：无论是css还是js都可以做热模块替换，但是个人建议只做css的热模块替换即可。因为js的热模块替换需要写代码进行替换，除非特定情况下，否则js的热模块替换用处不大。</strong></h6><h6><strong class="ql-size-large">我们来做一个css的热模块替换吧</strong></h6><h6><strong class="ql-size-large">注：热模块替换不支持抽取出的css文件，只能放在style中，所以需要style-loader</strong></h6><h6><strong class="ql-size-large">配置webpack.config.js</strong></h6><pre class="ql-syntax" spellcheck="false">const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlPlugin = require('./plugin/htmlPlugin')
const Webpack = require('webpack')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
use: path.resolve(__dirname, './loader/replaceLoader.js')
},
{
test: /\.css$/,
use: [
// MiniCssExtractPlugin.loader,
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 1024 * 3,
outputPath: "images/",
publicPath: "/images",
}
}
}
]
},
devServer: {
open: true,
port: 8080,
hot: true
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin(),
new HtmlPlugin(),
new Webpack.HotModuleReplacementPlugin()
]
}
</pre><h6><br></h6><h6><span class="ql-size-large">首先，将之前的MiniCssExtractPlugin.loader替换回style-loader</span></h6><h6><span class="ql-size-large">给devServer中加上</span>hot: true</h6><h6><span class="ql-size-large">引入webpack: </span>const Webpack = require('webpack')</h6><h6><span class="ql-size-large">在plugin中添加：</span>new Webpack.HotModuleReplacementPlugin()</h6><h6><span class="ql-size-large">运行</span>webpack-dev-server<span class="ql-size-large">命令看看效果吧！</span></h6>&
分享到：
转载：
https://mp.weixin.qq.com/s/XWMbCXQzxqb9jDYnpTPKzw
喜欢 0
收藏
上一篇：
计算机科学导论_数据运算
暂无评论信息