Webpack学习笔记 Webpack学习笔记

先初始化一个简单的项目

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的输出名称。
【Webpack学习笔记】因为我们里面有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 AssetSizeChunksChunk Names page.bundle.js1.99 KiB0[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 AssetSizeChunksChunk Names 1.bundle.js71.1 KiB1[emitted] page.bundle.js3.12 KiB0[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' ] } ] } };

打印出的结果：

AssetSizeChunksChunk Names 1.bundle.js71.1 KiB1[emitted] page.min.js3.12 KiB0[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 AssetSizeChunksChunk Names page.min.js3.13 KiB0[emitted]page vendors~lodash.bundle.js71.1 KiB1[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 的区别是什么？