背景
webpack 是一个模块打包器，用于编译 JavaScript 模块。
初体验
安装
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack webpack-cli
查看版本: 本文中版本为 4.25.1
$ node_modules/.bin/webpack -v
4.25.1
说明：
安装一个要打包到生产环境的安装包时，你应该使用 npm install --save
安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev
无 webpack 时的页面文件
两个文件
index.html
src
└── src/index.js
index.html
index.html，内容如下：
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
src/index.js
src/index.js 内容如下：
function component() {
var element = document.createElement('div');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
效果验证
用浏览器打开 index.html，效果如下：
Hello webpack
适配到 webpack 上
安装 lodash
上面是通过 script 脚本引入的外部 lodash 库。
这里我们希望把 lodash 打包到本地的 js 文件中，不再依赖外部 js 脚本。
因此先安装 lodash 库。
$ npm install --save lodash
因为 lodash 要发布，所以用为 --save。如果只用于开发而不发布的话，那就用 --save-dev
dist/index.html
将 index.html 移动到 dist 目录下，内容如下：
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
src/index.js
src/index.js，内容如下：
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
打包
$ npx webpack
Hash: b75da8f7583b35825ca3
Version: webpack 4.25.1
Time: 2828ms
Built at: 11/17/2018 11:57:02 AM
Asset Size Chunks Chunk Names
main.js 70.5 KiB 0 [emitted] main
Entrypoint main = main.js
[1] ./src/index.js 264 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module
可见生成了 dist/main.js 文件
效果验证
用浏览器打开 index.html，效果如下：
Hello webpack
同时，通过检查，可以看到没有对外部 js 文件的请求。
原理
执行 npx webpack 打包里，会将 入口起点 下的脚本，打包到 输出 目录下。
如果不使用默认值的话，我们可以通过配置文件来指定其具体的值。
定制配置
如果我们要输出到 bundle.js 文件，而不是 main.js 文件，则可以这样做：
编辑文件 webpack.config.js，内容如下：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
执行打包
npx webpack --config webpack.config.js
Hash: 33fcbd13f7bbedec8155
Version: webpack 4.25.1
Time: 2723ms
Built at: 11/17/2018 12:14:50 PM
Asset Size Chunks Chunk Names
bundle.js 70.5 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] ./src/index.js 264 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module
可见生成了 dist/bundle.js 文件。
使用 npm 脚本打包
除了使用这样 cli 方式进行打包外，还可以更方便的使用 npm 脚本进行打包。
编辑 package.json 文件，增加 script.build 一行，如下：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
打包：
npm run build
> webpack-demo@1.0.0 build /Users/note/web/webpack-demo
> webpack
Hash: 33fcbd13f7bbedec8155
Version: webpack 4.25.1
Time: 368ms
Built at: 11/17/2018 12:24:04 PM
Asset Size Chunks Chunk Names
bundle.js 70.5 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] ./src/index.js 264 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module
可见同时使用了 webpack.config.js 文件，生成了 bundle.js 文件。
下一步
更详细的配置，请参见原文 webpack 中文文档
参考
- webpack 对比
- webpack 起步
- Webpack 掉坑之路（1）——HelloWorld（基于 npm,react）: 还没看，准备看
- 入门 Webpack，看这篇就够了: 还没看，准备看
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于