共计 2249 个字符，预计需要花费 6 分钟才能阅读完成。
为什么需要构建工具？
- 转换 ES6 语法
- 转换 JSX
- CSS 前缀补全 / 预处理器
- 压缩混淆
- 图片压缩
前端构建演变之路
- ant + YUI Tool
- grunt
- gulp、fis3
- webpack、rollup、parcel
为什么选择 webpack?
- 社区态丰富
- 配置灵活和插件化扩展
- 官方更新迭代速度快
初识 webpack，简单的例子入手
安装
先确保你已经安装了 Node
其中检查 node 是否安装成功，使用 node -v；检查 npm 的版本使用 npm -v。
创建一个新的项目来开始我们的 webpack 之旅：
mkdir webpack-custom
cd webpack-custom使用 npm init（或者使用 npm init-y 表示默认配置都选择 yes）来创建一个「package.json」文件用于管理项目版本和依赖，然后我们使用 npm 安装 webpack:
npm install webpack webpack-cli -D webpack-cli 是使用 webpack 的命令行工具，在 4.x 版本之后不再作为 webpack 的依赖了，我们使用时需要单独安装这个工具。
检查是否安装成功：
mac 系统：./node_modules/.bin/webpack -v
window 系统：.node_modules.binwebpack -v
安装成功之后，我们可以在项目的「package.json」文件中看到对应的 webpack 版本依赖：
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}构建
安装完成之后，我们可以使用 ==npx webpack == 命令来运行项目内安装的 webpack。
其中，我们可以使用如下命令执行一些操作：
- npx webpack –help: 查看 webpack-cli 提供了哪些命令可用
- npx webpack –version: 查看我们安装的版本
- npx webpack: 运行构建
我们先添加两个简单的代码文件，「src/index.js」和「src/hello.js」，如代码：
index.js 代码：
import {hello, log} from './hello.js';
log(hello);hello.js 代码：
export const hello = 'hello world';
export function log(message) {console.log(message);
}我们执行 npx webpack 会在 src 同级目录生成一个 dist/main.js 文件，这就是使用 webpack 构建的结果，当然构建我们也可以使用如下命令执行：.\node_modules\.bin\webpack，我们也可以 npm script 运行 webpack, 也即是把构建命令写到 package.json 的 scripts 中：
"scripts": {"build": "webpack"},然后我们就可以使用 npm run build 命令构建 webpack 了。
配置文件
接下来我们尝试创建一个 webpack 的配置文件，在我们项目的根目录下创建一个 「webpack.config.js」 的文件：
'use strict';
var path = require('path');
module.exports = {
mode: 'development', // 指定构建模式
entry: './src/index.js', // 指定构建入口文件
output: {path: path.join(__dirname,'dist'), // 指定构建生成文件所在路径
filename: 'bundle.js' // 指定构建生成的文件名
},
}然后我们执行npm run build，就会生成「dist/bundle.js」文件，这说明配置文件生效了。
本地开发
在日常开发中，我们不可能每次修改一次代码就执行一次构建，我们需要一个方便本地开发的工具，和 webpack 配套的则是webpack-dev-server。同样的，我们使用 npm 来安装：
npm install webpack-dev-server -D 同样地，我们在「package.json」文件的 scripts 字段中添加一个启动开发服务器的命令，如：
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
}这个时候我们还需要一个「index.html」文件作为页面的基础，webpack 暂时没有能力来处理 html 文件（需要通过插件来处理），我们先在 dist 目录下创建一个「index.html」文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack-demo</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>同时，在配置文件中添加指定开发服务器启动路径的配置：
devServer: {contentBase: path.resolve(__dirname, 'dist') // 开发服务器启动路径
}接着再执行 npm run serve，便可以成功启动 webpack-dev-server 了，默认使用的端口是 8080，用浏览器打开 http://localhost:8080/，便可以访问到我们刚才创建的 html 文件了，打开控制台就可以看到前边的 js 代码打印出来的 hello world 了。
