webpack 快速入门 系列 —— 实战一
其他章节请看：
实战一
准备本篇的环境
虽然可以仅展示核心代码，但笔者认为在一个完整的环境中边看边做，举一反三，效果更佳。
这里的环境其实就是初步认识 webpack一文完整的示例，包含 webpack、devServer、处理css、生成 html。
项目结构如下：
webpack-example2
- src // 项目源码
- a.css
- b.js
- c.js
- index.html // 页面模板
- index.js // 入口
- package.json // 存放了项目依赖的包
- webpack.config.js // webpack配置文件
src中的代码如下：
// a.css
body{color:blue;}
// b.js
import \'./c.js\'
console.log(\'moduleB\')
console.log(\'b2\')
// c.js
console.log(\'moduleC\')
// index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=`, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>请查看控制台</p>
</body>
</html>
// index.js
import \'./b.js\'
import \'./a.css\'
console.log(\'moduleA\')
package.json:
{
"name": "webpack-example2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.2.4",
"html-webpack-plugin": "^4.5.2",
"style-loader": "^2.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}
}
webpack.config.js:
const path = require(\'path\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\')
module.exports = {
entry: \'./src/index.js\',
output: {
filename: \'main.js\',
path: path.resolve(__dirname, \'dist\')
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: \'src/index.html\'
})
],
mode: \'development\',
devServer: {
open: true,
contentBase: path.join(__dirname, \'dist\'),
compress: true,
port: 9000,
},
};
在 webpack-example2 目录下运行项目：
// 安装项目依赖的包
> npm i
// 启动服务
> npm run dev
启动服务器后，浏览器会自动打开页面，如果看到蓝色文字”请查看控制台“，说明环境已准备就绪。
打包样式
处理 css 和 less
less 是一种 css 预处理语言，在 webpack 中要处理 less 需要使用 less-loader，用于将 less 转为 css。
首先安装依赖，然后修改配置文件：
// 安装包。版本8安装失败，所以降了一个版本
> npm i -D less-loader@7
// webpack.config.js
// 增加对 less 文件处理的loader
rules: [
// 需要保留，否则识别不了 css 文件
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
},
// +
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
],
然后增加 a.less 文件，在 index.js 中引入 a.less，重新启动服务进行测试：
// src/a.less
body{
p{
color:pink;
}
}
// index.js
import \'./b.js\'
import \'./a.css\'
// +
import \'./a.less\'
console.log(\'moduleA\')
// 启动服务
> npm run dev
在新开的页面中，看到粉色文字”请查看控制台“，说明 less 处理成功。
提取 css 成单独文件
通过浏览器我们发现现在 css 是嵌在页面内的，就像这样：
<head>
...
<style>body{color:blue;}</style>
<style>body p {
color: pink;
}
</style>
</head>
通常我们会通过 link 来引入 css 文件，所以接下来就将 css 取成单独的文件。这里需要使用 mini-css-extract-plugin 这个包。
我们只需要安装依赖包，修改配置文件即可：
// 安装依赖包
> npm i -D mini-css-extract-plugin@1
// 不在需要 style-loader，卸载
> npm r -D style-loader
// webpack.config.js
// +
const MiniCssExtractPlugin = require(\'mini-css-extract-plugin\');
module.exports = {
...
module: {
rules: [
// 修改规则
{
test: /\.css$/i,
// 将 style-loader 改为 MiniCssExtractPlugin.loader
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.less$/i,
loader: [
// 将 style-loader 改为 MiniCssExtractPlugin.loader
MiniCssExtractPlugin.loader,
"css-loader",
"less-loader",
],
},
],
},
plugins: [
// +
new MiniCssExtractPlugin(),
...
],
};
启动服务(npm run dev)，在打开的页面中可以看到 css 已经改为 link 的方式引入，就是这样：
// 从 style 改为 link 方式
<link href="main.css" rel="stylesheet">
// 通过网络查看 main.css 的内容是：
body{color:blue;}
body p {
color: pink;
}
由于我们对 css 和 less 都使用了 MiniCssExtractPlugin.loader，所以 a.css 和 a.less 都被提取到 main.css 中。
Tip：如果通过npm run build打包，则可以看到 dist/main.css 文件。
使用 PostCSS
PostCSS - 使用JavaScript转换CSS的工具。
可以将 postcss 当作一个平台，下面我们通过 postcss 做两件事：
- 增加代码可读性（或增加前缀）
:fullscreen {
}
// 转为
:-webkit-full-screen {
}
:-ms-fullscreen {
}
:fullscreen {
}
- 立即使用明天的CSS
body {
color: lch(53 105 40);
}
// 转为
body {
color: rgb(250, 0, 4);
}
webpack 可以通过 postcss-loader 来使用 postcss。
由于 postcss 只是一个平台，具体功能需要通过插件来实现，这里我们使用 postcss-preset-env。
postcss-preset-env 可以将现代CSS转换为大多数浏览器可以理解的内容，并根据目标浏览器或运行时环境确定所需的polyfill。而且它包含自动前缀。
首先安装相关依赖，并修改配置文件：
> npm i -D postcss-loader@4 postcss-preset-env@6
// webpack.config.js
// +
const postcssPresetEnv = require(\'postcss-preset-env\');
// +
const postcssLoader = {
loader: \'postcss-loader\',
options: {
// postcss 只是个平台，具体功能需要使用插件
// Set PostCSS options and plugins
postcssOptions:{
plugins:[
// 配置插件 postcss-preset-env
[
"postcss-preset-env",
{
// 自动前缀。默认是true
// autoprefixer: true,
// 根据您所支持的浏览器来确定需要哪些polyfill。这里仅做演示
browsers: \'ie >= 8, chrome > 10\',
// stage 默认是 2
// stage:2
},
],
]
}
}
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
// + 放在css-loader后面
postcssLoader
]
},
{
test: /\.less$/i,
loader: [
MiniCssExtractPlugin.loader,
"css-loader",
// +
postcssLoader,
"less-loader",
],
},
]
},
};
接着修改 a.css 和 a.less，重新启动服务器：
// a.css
body{
color: lch(53 105 40);
}
// a.less
body{
p{
transform: scale(1, 2);
}
}
// 启动服务
> npm run dev
在新开的页面中，我们看到红色文字”请查看控制台“，而且文字纵向拉长了一倍。通过浏览器查看 main.css 源码如下：
body{
color: rgb(250, 0, 4);
}
body p {
-webkit-transform: scale(1, 2);
-ms-transform: scale(1, 2);
transform: scale(1, 2);
}
至此，增加前缀以及立即使用明天的CSS都已经完成。
Tip：stage（阶段）可以是0（实验）到4（稳定），默认是2，如果我们改为3或4，重新打包，lch(53 105 40);则不会转为 rgb(250, 0, 4)；将plugins换成下面的写法效果相同。
plugins:[
postcssPresetEnv({
browsers: \'ie >= 8, chrome > 10\',
})
]
postcss-preset-env 支持任何标准的 browserslist 配置，可以是 .browserslistrc 文件，package.json 中的browserslist 键或 browserslist 环境变量。
如果将 browsers: \'ie >= 8, chrome > 10\', 注释，browsers 将使用默认的 browserslist 查询（即> 0.5%, last 2 versions, Firefox ESR, not dead），重新构建，则不会添加前缀。
如果不想在 browsers 中写，在 package.json 中的 browserslist 中配置也是可以的：
// package.json
{
...
"browserslist": [
"ie >= 8",
"chrome > 10"
]
}
注：package.json 不能写注释，本文在 package.json 中的注释仅作说明。
如果觉得 package.json 写的内容太多，我们甚至可以将这部分提取到一个单独的文件中来写：
// .browserslistrc
// from github browserslist
# Browsers that we support
ie >= 8
chrome > 10
最后，如果我们针对开发环境和生成环境做不同的处理，比如开发环境支持 ie8+，而生产环境支持 chrom10+，我们可以这么写：
// .browserslistrc
# Browsers that we support
[production]
chrome > 10
[development]
ie >= 8
然后在配置文件中通过 process.env 来指定环境：
// +
// process.env属性返回一个包含用户环境的对象
process.env.NODE_ENV = \'development\' // or production
Browserslist将根据BROWSERSLIST_ENV或NODE_ENV变量选择，所以设置 process.env.BROWSERSLIST_ENV 也是可以的。
再次打包 npm run build，则只会针对 ie，生成的 main.css 内容如下：
body{
color: rgb(250, 0, 4);
}
body p {
-ms-transform: scale(1, 2);
transform: scale(1, 2);
}
压缩 css
如果我们需要压缩 css 代码，可以使用 optimize-css-assets-webpack-plugin，用于优化或最小化 css。
首先安装依赖，然后修改配置：
> npm i -D optimize-css-assets-webpack-plugin@5
// webpack.config.js
// +
const OptimizeCssAssetsPlugin = require(\'optimize-css-assets-webpack-plugin\');
plugins: [
new HtmlWebpackPlugin({
template: \'src/index.html\'
}),
new MiniCssExtractPlugin(),
// +
new OptimizeCssAssetsPlugin()
],
重新打包，原来的 main.css 则变成一行，请看：
> npm run build
// main.css（优化前）
body{
/* 注释 */
color: rgb(250, 0, 4);
}
body p {
-ms-transform: scale(1, 2);
transform: scale(1, 2);
}
// main.css（优化后）
body{color:#fa0004}body p{-ms-transform:scaleY(2);transform:scaleY(2)}
优化后，css 变成了一行，注释也删除了。
打包图片
前端资源通常有图片，由于 webpack 只识别 javascript，所以需要 loader 来帮们识别图片。
我们使用 url-loader，能将图片转为 base64。
首先安装依赖，并修改配置文件：
> npm i -D url-loader@4
// webpack.config.js
module: {
rules: [
...
// +
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: \'url-loader\',
options: {
// 指定文件的最大大小（以字节为单位）
limit: 1024*7,
},
},
],
},
]
},
接着引入图片，启动服务：
// 引入图片。src/6.68kb.png
// a.less
body{
p{
transform: scale(1, 2);
}
.m-box{display:block;width:100px;height:100px;}
.img-from-less{background:url(./6.68kb.png) no-repeat;background-size:100% 100%;}
}
// index.html
...
<body>
<p>请查看控制台</p>
<span class=\'m-box img-from-less\'></span>
</body>
...
// 启动服务
> npm run dev
Tip: 笔者的图片大小为 6.68kb，上面的 limit 只需要大于6.68kb即可
在新开的页面中，我们在”请查看控制台“文字下面看见了我们设置的图片。通过检查元素会发现这张图片是 base64。
body .img-from-less{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... no-repeat;
...
}
如果将 limit: 1024*7 修改为 limit: 1024*6（也就是将 limit 设置的比图片的 size 更小），再次运行 npm run dev，会发现报错了。还会提示找不到 file-loader。这是因为这张图片（6.68kb.png）大于 1024*6，所以就不会被打包成 base64，所以需要 file-loader 来处理。
安装依赖包 npm i -D file-loader@6，再次启动服务器，页面上又看到我们的图片，而且这次不再是 base64，而是直接生成了一张图片。
body .img-from-less{
background: url(26bd867dd65e26dbc77d1e151ffd36e0.png) no-repeat;
...
}
图片除了在 css 中使用，我们也会通过 img 元素引用，于是我们在 index.html 中新增 <img class=\'m-box\' src="./6.68kb.png" alt=""> 再次启动服务，在打开的浏览器页面中发现 img 引用的图片没生效，而且源码也没变化。
这里需要使用 html-loader 这个包，它能让每个被加载的属性（例如：<img src="image.png"）能被引入（imported）。
安装依赖包，修改配置：
> npm i -D html-loader@1
// webpack.config.js
module: {
rules: [
...
// +
{
test: /\.html$/i,
loader: \'html-loader\',
},
]
},
再次启动服务，就能看到两张一样的图片了。img 的代码变为 <img class="m-box" src="26bd867dd65e26dbc77d1e151ffd36e0.png" alt="">。
如果再次将 limit: 1024*6 修改为 limit: 1024*7，启动服务你会发现这两处图片都变为 base64。
打包 javascript
js 语法检查
有时我们希望团队成员写的 javascript 代码风格一致。
我们可以使用 eslint，它能查找并修复JavaScript代码中的问题；可以自定义 eslint，使其完全按照项目所需的方式工作。代码风格，笔者选用 airbnb，一个流行的 javascript 风格指南（此刻是第 6 名（topics javascript））。
在 webpack 中使用 eslint，需要使用 eslint-webpack-plugin（ eslint-loader废弃了），而 eslint-webpack-plugin 依赖于 eslint；
eslint-config-airbnb 默认导出包含我们所有的ESLint规则，包括ECMAScript 6+和React，而 我们不需要使用 react，所以使用 eslint-config-airbnb-base 即可。
首先安装依赖包，修改配置：
// 没有引入 eslint-plugin-import
> npm i -D eslint@7 eslint-webpack-plugin@2 eslint-config-airbnb-base@14
// webpack.config.js
// +
const ESLintPlugin = require(\'eslint-webpack-plugin\');
module.exports = {
// ...
plugins: [
new ESLintPlugin({
// 将启用ESLint自动修复功能。此选项将更改源文件
fix: true
})
],
// ...
};
// package.json
{
// +
"eslintConfig": {
"extends": "airbnb-base"
}
}
重新打包 npm run build，出现了一些警告和错误，核心信息如下：
WARNING in
webpack-example2\src\index.js
6:1 warning Unexpected console statement no-console
✖ 6 problems (2 errors, 4 warnings)
ERROR in
webpack-example2\src\index.js
1:8 error Unexpected use of file extension "js" for "./b.js" import/extensions
✖ 5 problems (2 errors, 3 warnings)
错误（import/extensions）是不希望使用 js 扩展名，将 ./b.js 改为 ./b 就好了，可参考issues:import/extensions。
警告（no-console）是因为不能出现 console.log。可以通过配置将这个告警关闭：
// package.json
{
"eslintConfig": {
"extends": "airbnb-base",
// +
"rules": {
"no-console": "off",
}
}
}
将import/extensions修复，并将警告关闭，重新打包 npm run build则不会出现警告和错误。
Tip：打包后，源码也会自动修复，比如 src/index.js 中的 sum() 方法，a, 后面是多个空格，打包后会合并成一个空格：
function sum(a, b) {
return a + b;
}
// 需要调用 sum() 方法
// 否则报错：error \'sum\' is defined but never used no-unused-vars
console.log(sum(1, 100));
// 修复后
function sum(a, b) {
return a + b;
}
如果在 js 文件中使用 window ，再次打包会报错，就像这样：
// index.js
// +
setTimeout(() => {
window.location = \'https://www.baidu.com/\';
}, 1000);
// 打包
> npm run build
...
error \'window\' is not defined no-undef
可以在配置文件中指定环境来解决这个问题。就像这样：
// package.json
"eslintConfig": {
// +
"env": {
"browser": true
}
}
如果不想写到 package.json，也可以配置到单独的文件（.eslintrc.js）中：
// .eslintrc.js
module.exports = {
"extends": "airbnb-base",
"rules": {
"no-console": "off"
},
"env": {
"browser": true
}
}
js 兼容性处理
我们想使用 es6 来编写代码，但有的浏览器支持的不够全面，所以我们会将 es6 转成 es5。
接着上面的例子进行，重写 index.js，放入一个箭头函数，再次打包，你会发现 webpack 不会对 es6 语法做处理，const 还是 const，而不是 var：
// src/index.js
const sum = (a, b) => (a + b);
console.log(sum(1, 10));
// sum 还是我们的箭头函数
eval("const sum = (a, b) => (a + b);\nconsole.log(sum(1, 10));\n\n\n//# sourceURL=webpack:///./src/index.js?");
Babel 是一个 JavaScript 编译器。通过它可以让我们使用下一代的 JavaScript 语法编程。
在 webpack 中要使用 babel 就得用 label-loader。用法（Usage）如下：
// 安装依赖包。没有使用 @babel/core
> npm i -D babel-loader@8 @babel/preset-env@7
// webpack.config.js
module: {
rules: [
// +
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: \'babel-loader\',
options: {
presets: [
[\'@babel/preset-env\']
]
}
}
}
]
}
重新打包，箭头函数就变成普通函数：
eval("var sum = function sum(a, b) {\n return a + b;\n};\n\nconsole.log(sum(1, 10));\n\n//# sourceURL=webpack:///./src/index.js?");
如果我们在 js 中使用 Promise，重新打包后 Promise 还是 Promise，而且在不识别 Promise 语法的浏览器中（比如 ie11）运行会报错。
// index.js
Promise.resolve(\'aaron\').then((v) => {
console.log(v);
});
// 重新打包，Promise 还是 Promise
eval("Promise.resolve(\'aaron\').then(function (v) {\n console.log(v);\n});\n\n//# sourceURL=webpack:///./src/index.js?");
babel 官网提到，使用@babel/polyfill，就可以使用新的内置函数（例如Promise或WeakMap），静态方法（例如Array.from或Object.assign），实例方法（例如Array.prototype.includes）等等。所以这个 polyfill 是我们的解决方案。
但是 @babel/polyfill 废弃了。而 @babel/polyfill 包含 regenerator runtime 和 core-js。
core-js，包括适用于2021年前ECMAScript的polyfill，而且仅加载必需的功能。
在 useBuiltIns 参数中也提到：由于在7.4.0中已弃用@ babel/polyfill，因此我们建议直接添加core-js并通过corejs选项设置版本。
于是我们知道 core-js 能解决 Promise 这类问题。
如何使用 core-js ？我们先来介绍一下插件和预设。
babel 通过将插件（或预设）应用于配置文件来启用Babel的代码转换。比如插件列表中的es2015，这是一个集合，包含了箭头函数（arrow-functions）、类（classes）等插件；
而预设（presets）其实是多个插件（plugin）的集合。比如 @babel/preset-env 这种预设则包含了 es2015、es2016、es2017等最新的插件。
最后根据babel-preset-env中的介绍，我们将 core-js 应用上：
// 安装依赖
> npm i -D core-js@3.11
// webpack.config.js
{
loader: \'babel-loader\',
options: {
presets: [
[
\'@babel/preset-env\',
// +
{
// 配置处理polyfill的方式
useBuiltIns: "usage",
// 版本与我们下载的版本保持一致
corejs: { version: "3.11"},
"targets": "> 0.25%, not dead"
}
]
]
}
}
重新打包，dist/main.js 的Size变成 109 Kib，而之前还不到 4kiB。
启动服务，在不支持 Promise 语法的浏览器中，比如 ie11，也能在控制台输入 aaron。
至此 javascript 的兼容处理完毕。
其他章节请看：