共计 2418 个字符，预计需要花费 7 分钟才能阅读完成。
css
npm i css-loader style-loader –save-dev
在 webpack.config.js 中增加如下配置：
rules: [{
test: /\.css$/,
use: [
‘style-loader’,
‘css-loader’ // 执行顺序是从右往左
]
}
创建 css 文件，并引入，打包后可以正常解析，但是 css 文件是混入 js 中，所以需要分离 css.
分离 css
webpack4 中完成这个功能的插件是 mini-css-extract-plugin.
npm install mini-css-extract-plugin –save-dev
在 webpack.prod.js 中增加如下配置：
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
‘css-loader’
]
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename: ‘[name].css’
})
]
}
处理图片
新建文件夹 src/images，用来放图片。
file-loader
npm i file-loader –save-dev
{
test: /\.(png|jpg|gif|svg)$/,
loader: ‘file-loader’,
options: {
name: ‘[name].[ext]?[hash]’
}
}
url-loader
npm i url-loader –save-dev
区别 file-loader：解决引用路径的问题，拿 background 样式用 url 引入背景图来说，我们都知道，webpack 最终会将各个模块打包成一个文件，因此我们样式中的 url 路径是相对入口 html 页面的，而不是相对于原始 css 文件所在的路径的。这就会导致图片引入失败。这个问题是用 file-loader 解决的，file-loader 可以解析项目中的 url 引入（不仅限于 css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
url-loader：如果图片较多，会发很多 http 请求，会降低页面性能。这个问题可以通过 url-loader 解决。url-loader 会将引入的图片编码，生成 dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此 url-loader 提供了一个 limit 参数，小于 limit 字节的文件会被转为 DataURl，大于 limit 的还会使用 file-loader 进行 copy。
url-loader 和 file-loader 是什么关系呢？简答地说，url-loader 封装了 file-loader。url-loader 不依赖于 file-loader，即使用 url-loader 时，只需要安装 url-loader 即可，不需要安装 file-loader，因为 url-loader 内置了 file-loader。通过上面的介绍，我们可以看到，url-loader 工作分两种情况：1. 文件大小小于 limit 参数，url-loader 将会把文件转为 DataURL；2. 文件大小大于 limit，url-loader 会调用 file-loader 进行处理，参数也会直接传给 file-loader。因此我们只需要安装 url-loader 即可。
扩展 —vue 中的图片动态引用
img 标签
<template>
<img :src=”imgUrl”>
</template>
第一种：
import imgUrl from “../assets/test.png”;
第二种：
data() {
return {
imgUrl: require(“../assets/test.png”)
}
}
第三种：
created() {
this.imgUrl = require(“@/” + urlTemp);
}
css 中 url
公司项目中有个需求，就是每个模块都要展示介绍功能的图片，切模块时，图片要相应的改变，是通过 background 来实现的，这个时候就需要动态引用图片。实现方式如下：
<div :style=”{background: ‘url(‘ + require(‘../assets/’ + imgUrl[i]) +’)’}”></div>
data() {
return {
imgUrl: [
“test1.png”,
“test2.png”,
“test3.png”,
]
}
}
或者直接将图片放入 static 文件夹中，也可以通过循环拿到。
然后，我试验了一下，除了以上两种方式，其他方式写的都报错。不知道有没有大佬指点一下~~ 下面的只是记录一下，跟上面的无关，
<div :style=”style”></div>
data() {
return {
style: [
{background: ‘url(‘ + require(‘../assets/test1.png’) +’)’} // 不能写变量
]
}
}
处理 js 文件
参考链接：webpack4.0 各个击破（4）—— Javascript & splitChunk
代码分离
在 webpack4 中删除了原来的 CommonsChunkPlugin 插件，内部集成的 optimization.splitChunks 选项可以直接进行代码分离。
在 webpack.prod.js 中增加如下配置：
optimization: {
splitChunks: {
chunks: ‘async’, // 默认只作用于异步模块，为 `all` 时对所有模块生效,`initial` 对同步模块有效
minSize: 30000, // 合并前模块文件的体积
minChunks: 1 // 最少被引用次数
}
}
