先初始化一个简单的项目
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
在项目根目录下创建src文件夹，创建文件page.css
body {
background-color: orange;
}
创建common.js
module.exports = {
log: (msg) => {
console.log('hello ', msg)
}
}
创建文件page.js
import './index.css';
const { log } = require('./common');
log('webpack')
page.js引用了index.css和common.js。
再创建一个utils.js
export function square(x) {
return x * x;
}
utils.js没有被任何东西引用。
在项目根目录创建webpack.config.js文件：
module.exports = {
entry: {
page: "./src/page.js"
},
output: {
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader'
]
}
]
}
};
output.filename指定了entry中的chunk的输出名称。
因为我们里面有css文件，所以需要css-loader，运行以下命令进行安装：
npm install css-loader --save-dev
接着进行打包
npx webpack
可以看到生成了page.bundle.js文件：
Hash: 59cad153575b5adc87c7
Version: webpack 4.43.0
Time: 232ms
Built at: 2020-07-06 16:18:22
Asset Size Chunks Chunk Names
page.bundle.js 1.99 KiB 0 [emitted] page
Entrypoint page = page.bundle.js
[0] ./src/page.js 73 bytes {0} [built]
[1] ./src/page.css 272 bytes {0} [built]
[3] ./src/common.js 81 bytes {0} [built]
+ 1 hidden module
看打印可以看到page.bundle.js打包了page.js、page.css、common.js。没有被引用的utils.js没有被处理。其实和我们在webpack.config.js的配置是一致的。page.js是入口文件，它引用了index.css和common.js，所以这3个文件被打包在一起。
整个流程可以这样描述：我们写的module文件交给webpack打包处理，webpack根据文件的引用关系生成chunk，这里只有1个入口文件，所以生成1个chunk，chunk再生成最后的bundle文件。一般1个chunk生成1个bundle，但也可以利用插件进行处理，比如1个chunk生成2个bundle。
那是不是只有entry中指定的文件才会被打包输出呢？其实并不是。我们在page.js文件下加一段懒加载的代码：
async function getAsyncComponent() {
var element = document.createElement('div');
const { default: _ } = await import('lodash');
element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');
return element;
}
这里懒加载了lodash，注意lodash要通过npm install --save lodash安装。
再次打包：
Hash: a944abeab4db7b74fafe
Version: webpack 4.43.0
Time: 1840ms
Built at: 2020-07-06 16:33:39
Asset Size Chunks Chunk Names
1.bundle.js 71.1 KiB 1 [emitted]
page.bundle.js 3.12 KiB 0 [emitted] page
Entrypoint page = page.bundle.js
[0] ./src/page.js 314 bytes {0} [built]
[1] ./src/page.css 272 bytes {0} [built]
[3] ./src/common.js 81 bytes {0} [built]
[5] (webpack)/buildin/global.js 472 bytes {1} [built]
[6] (webpack)/buildin/module.js 497 bytes {1} [built]
+ 2 hidden modules
可以看到多了1个文件1.bundle.js。这个时候就是2个chunk了。我们懒加载的代码也被打包出来了，而且是一个独立的文件。它的命名规则默认和filename的一致，例如这里我们的filename规则是[name].bundle.js，那么chunkfilename的规则也是[name].bundle.js，只是它的name其实就是id。我们可以通过设置output.chunkFilename来指定它的输出名。
我们把webpack.config.js改成如下：
module.exports = {
entry: {
page: "./src/page.js"
},
output: {
filename: "[name].min.js",
chunkFilename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader'
]
}
]
}
};
打印出的结果：
Asset Size Chunks Chunk Names
1.bundle.js 71.1 KiB 1 [emitted]
page.min.js 3.12 KiB 0 [emitted] page
可以看到chunkFilename被修改了，但是还是以id来命名的，很不直观。
修改懒加载的代码，在 import 里以注释的形式为 chunk 文件取别名:
import './page.css';
const { log } = require('./common');
log('webpack')
async function getAsyncComponent() {
var element = document.createElement('div');
const { default: _ } = await import(/* webpackChunkName: "lodash" */'lodash');
element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');
return element;
}
再次打包：
Hash: ccf3fe4f54e57f18f7bf
Version: webpack 4.43.0
Time: 629ms
Built at: 2020-07-06 16:59:38
Asset Size Chunks Chunk Names
page.min.js 3.13 KiB 0 [emitted] page
vendors~lodash.bundle.js 71.1 KiB 1 [emitted] vendors~lodash
Entrypoint page = page.min.js
[0] ./src/page.js 346 bytes {0} [built]
[1] ./src/page.css 272 bytes {0} [built]
[3] ./src/common.js 81 bytes {0} [built]
[5] (webpack)/buildin/global.js 472 bytes {1} [built]
[6] (webpack)/buildin/module.js 497 bytes {1} [built]
+ 2 hidden modules
可以看到名字变成了vendors~lodash.bundle.js。
webpack 中，module，chunk 和 bundle 的区别是什么？
webpack 中，filename 和 chunkFilename 的区别是什么？
