一、前言
通过本节内容，你将可以了解到如何配置 webpack4，以便让项目可以支持 sass、通过 sass 以及 JS 引用图片、分离 CSS 到独立文件、文件的内容 hash 发布。
二、Demo 项目
以如下示例项目为例☞项目地址：
|-- webpack-demo
|-- package.json
|-- webpack.config.js
|-- src
|-- index.html
|-- main.js
|-- header
|-- header.html
|-- header.js
|-- header.scss
|-- images
|-- gunzige.jpeg
|-- webpack_logo.png
webpack.config.js 源码如下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const env = process.env.NODE_ENV;
module.exports = {
mode: env,
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[name].[chunkhash:8].js',
},
module: {
rules: [
{
test: /\.scss$/, // 匹配指定文件
exclude: /node_modules/, // 排除指定文件
use: ExtractTextPlugin.extract({ // loader 列表，执行顺序从数组尾部到首部
fallback: 'style-loader',
use: 'css-loader',
}).concat([
{
loader: 'resolve-url-loader', // 指定 loader 名称，该名称可以在 package.json 里找到对应的依赖
},
{
loader: 'sass-loader',
options: { // loader 的额外参数，配置视具体 loader 而定
sourceMap: true, // resolve-url-loader 需要启用 sourceMap 才能正确加载 Sass 里的相对路径资源
}
}
]),
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
publicPath: '/images',
outputPath: './images',
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: 'raw-loader',
}
]
}
]
},
plugins: [
new ExtractTextPlugin('[name].[md5:contenthash:hex:8].css'),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
}),
],
};
在项目根目录运行 webpack 编译命令：
$ npm install
$ node_modules/.bin/webpack
然后我们就可以得到编译后的结果：
|-- webpack-demo
|-- package.json
|-- webpack.config.js
|-- dist
| |-- index.html
| |-- main.440559d5.css
| |-- main.575bf0d4.js
| |-- images
| |-- gunzige.e57e3e2f.jpeg
| |-- webpack_logo.c500a380.png
|-- src
|-- index.html
|-- main.js
|-- header
|-- header.html
|-- header.js
|-- header.scss
|-- images
|-- gunzige.jpeg
|-- webpack_logo.png
三、重点配置解析
mode
String。webpack 运行模式，可取值为development production none 其中一个。一般建议配置为 development 或者 production，development 模式会自动加上一些便于调试的插件，production 会自动加上例如 JS 压缩插件。
entry
String入口文件的相对路径。
entry 实际上可以配置为 Object 类型，这种高级用法我们之后再讲解。
output
output.path
String。编译后的文件的输出目录，注意一定要使用绝对路径。
output.publicPath
String。发布后，HTML 以何种前缀引用编译后的 JS 、CSS、图片等资源。例如 Demo 配置为"/"，表示输出后的 HTML 里将以 <script src="/main.hash.js"></script> 的方式引入 JS，假如把这里配置为了 https://cdn.demo.com/，那么输出后的 HTML 将以 <script src="https://cdn.demo.com/main.hash.js"></script> 的方式引入 JS。
output.filename
String。编译后的 JS 文件名，可以使用 [name] 引用原入口 JS 文件名，[chunkhash] 引用编译后文件的内容哈希值。
[hash]与[chunkhash]的区别：hash 表示本次编译结果的整体哈希值，所以 webpack.config.js 的不同地方写的 [hash] 的值都是一样的。[chunkhash] 表示文件内容的哈希值，一般我们是使用 chunkhash 值。
rules
规则列表，用于指定和配置 loader。
test
RegExp。文件名匹配规则。
use
Array。loader 列表，loader 的执行顺序从数组尾部到数组首部。每一条 loader 配置都是一个 Object，具体选项作用可参考 webpack.config.js 注释。
plugins
Array。插件列表，用于指明使用了哪些插件，以及用于配置每个插件的选项。
2. loader 配置
编译 sass
为了能在项目里使用 sass，我们使用了如下 loader 配置：
[
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'resolve-url-loader', // 指定 loader 名称，该名称可以在 package.json 里找到对应的依赖
},
{
loader: 'sass-loader',
options: { // loader 的额外参数，配置视具体 loader 而定
sourceMap: true, // resolve-url-loader 需要启用 sourceMap 才能正确加载 Sass 里的相对路径资源
}
}
]
我们首先使用了 sass-loader，用于解析 .scss 文件，但是 sass-loader 不能够处理 .scss 文件里的类似于background: url(./images/xxx.png) 语法，会导致发布后的项目引入了 404 的资源，所以我们紧接着引入了 resolve-url-loader。resolve-url-loader 能够识别 .scss 里的background: url(./images/xxx.png)语法，它依赖 sass-loader 的 sourceMap 功能（以及依赖 file-loader，接下来会讲到），所以我们需要在 sass-loader 的 options 设置 sourceMap: true。然而现在我们只是把 .scss 文件编译成了 css 文件，但是 webpack 仍然不能处理 css，所以我们紧接着又引入了 css-loader。现在我们能够已经能够编译 sass 为 css，并能够为 webpack 所处理，但我们仍然没有完成任务，因为 css-loader 只是把 css 编译为 JS 对象，并不会把 css 生成 style 标签添加到 HTML。为了做这件事，我们又引入了 style-loader，总算大功告了成。
编译图片
为了能够在 .js 文件里以require('./images/xxx.png')的形式，以及在 .scss 文件里以 url(./images/xxx.png')的形式引入图片资源，我们需要引入 file-loader。如下：
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
publicPath: '/images',
outputPath: './images',
}
}
]
}
options.name
图片编译后的图片文件名，用[name]引用源文件名称，[hash]引用图片内容的 hash 值，[ext]引用文件扩展名。
options. outputPath
图片编译后输出的目录的相对目录路径。这里是相对output.path而言。所以这里的 options.outputPath 填写 './images' 或者 '/images' 效果都一样。
options.publicPath
发布后将以何种 URL 前缀引入图片资源，可填写绝对路径或者相对路径。相对路径则相对 output.publicPath 而言。
原汁原味引入文件
有时候我们需要对某种文件以字符串形式原汁原味地引入，比如将 HTML 文件以字符串形式加载。那么可以引入 raw-loader：
{
test: /\.html$/,
use: [
{
loader: 'raw-loader',
}
]
}
3. plugin 配置
这里介绍两个常用、好用的插件配置。
extract-text-webpack-plugin
该插件是用来把项目中使用的 CSS 抽离到单独文件，并以 <link href="xxx" />的形#式引入，以减少 JS 文件体积。
目前（2018/05/19），webpack4 只能安装该插件的 beta 版，可使用如下命令安装：
npm i extract-text-webpack-plugin@next --save-dev
安装完插件后，我们还需要两个步骤才能配置使用该插件。
1. 添加 plugin
new ExtractTextPlugin('[name].[md5:contenthash:hex:8].css')。[name]用于引入entry的入口文件名，[md5:contenthash:hex:8]用于给提取的 CSS 添加内容 hash 后缀。
[md5:contenthash:hex:8]是我摸索出来的配置方式，还有其他的配置方式，但也许会报错。
2. 添加 ExtractTextPlugin 的 loader 依赖配置
该插件依赖自身提供的一个 loader，该 loader 通过 ExtractTextPlugin.extract(options) 方法获得。该方法可以结合 style-loader、css-loader 使用，所以 sass 的 loader 配置有了如下变化：
ExtractTextPlugin.extract(options)方法返回的结果如下：
[
{
loader: '/absolute/path/to/webpack-demo/node_modules/extract-text-webpack-plugin/dist/loader.js',
options: {
omit: 1,
remove: true
}
},
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
我们可以发现，ExtractTextPlugin.extract(options)方法其实也就是原封不动地把 style-loader、css-loader 返回，然后再加上一个专门处理 style-loader 的返回结果，并抽离 CSS 为独立文件的 loader。
2. html-webpack-plugin
该插件用于通过制定源 HTML 文件生成编译后的 HTML。编译后的 HTML 自动引入编译后的 JS、CSS。该插件不像 extract-text-plugin，不需要依赖 loader（其实大部分的 plugin 都不需要依赖 loader），只需要简单通过如下代码在 plugins 里添加插件即可：
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
})
常用的就只有两个属性：filename、template。
filename
生成的 HTML 文件名，一般我们使用和源 HTML 文件相同的名字。
template
源 HTML 文件的相对路径。
本系列文章目录
未完待续...
