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

介绍一个最基本最简单的输出管理示例。

1.目录结构

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

2. 具体文件内容

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
          Asset      Size  Chunks             Chunk Names
  app.bundle.js  70.7 KiB    0, 1  [emitted]  app
print.bundle.js  1.02 KiB       1  [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 module

WARNING 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 。

但是，我们可以看出有两个问题：

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

不用担心，我们有 HtmlWebpackPlugin 来解决以上两个问题。下一篇讲 HtmlWebpackPlugin。

demo5