五、最基本的|五、最基本的 output (管理输出) 五、最基本的output(管理输出

介绍一个最基本最简单的输出管理示例。
1.目录结构

webpack-demo |- package.json |- webpack.config.js |- /dist |- /src |- index.js +|- print.js |- /node_modules

2. 具体文件内容 【五、最基本的|五、最基本的 output (管理输出)】src/print.js

// src/print.js export default function printMe() { console.log('I get called from print.js!'); }

// src/index.js

// src/index.js import _ from 'lodash'; import printMe from './print.js'function component() { var element = document.createElement('div'); var btn = document.createElement('button')element.innerHTML = _.join(['Hello', 'webpack'], ' '); btn.innerHTML = 'Click me and check the console!'; btn.onclick = printMe; element.appendChild(btn) return element; }document.body.appendChild(component());

// dist/index.html

管理输出 - 锐客网

webpack.config.js

// webpack.config.js const path = require('path')module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } }

3. 运行打包命令

yarn run build

运行结果

$ yarn run build yarn run v1.9.4 $ webpack --config webpack.config.js Hash: 26551bbf7d512efdc49a Version: webpack 4.25.1 Time: 622ms Built at: 2018-11-11 15:40:04 AssetSizeChunksChunk Names app.bundle.js70.7 KiB0, 1[emitted]app print.bundle.js1.02 KiB1[emitted]print Entrypoint app = app.bundle.js Entrypoint print = print.bundle.js [0] ./src/print.js 87 bytes {0} {1} [built] [2] ./src/index.js 416 bytes {0} [built] [3] (webpack)/buildin/global.js 489 bytes {0} [built] [4] (webpack)/buildin/module.js 497 bytes {0} [built] + 1 hidden moduleWARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ Done in 3.21s.

可以看到我们在 webpack.config.js 中定义了 entry 入口文件的名字和对应路径， app 和 print，然后在 output 属性中定义了输出文件名称的规则 [name].bundle.js。查看输出结果确实是 app.bundle.js 和 print.bundle.js 。
但是，我们可以看出有两个问题：

在 dist/index.html 中我们手动的引入了 print.bundle.js 和 app.bundle.js，但是实际项目出我们可能会输出多个 bundle，这样手动的 index.html 引入 bundle，就显得很蠢了。
如果我们修改了入口文件的名字，比如将 print 改成了 print2，但是 index.html 中还是使用了原来的 bundle print.bundle.js，而没有使用新生成的 print2.bundle.js。那我们的修改不就没效果了吗，维护起来也很困难，毕竟大家都是人脑，总会出错。