webpack5 笔记三，管理输出

效果

我们在页面上添加一个按钮，点击时会打印 good morning。

export function sayHi() {
  console.log('good morning, how are you ？');
}

  const btn = document.createElement('button');
  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = sayHi;
  box.appendChild(btn);

在这篇中，我们将学会一下内容：

1. 自动清空构建前的文件
2. html 文件自动引入打包后 js 文件
3. 加载 iconfont 的在线字体图标
4. 设置多入口、多出口（entry、output）

自动清空构建前的文件

设置 clean 属性，即可每次构建时清空之前的文件。

  output: {
    clean: true
  }

html 文件自动引入打包后的 js 文件

使用插件，并在 webpack.config.js 文件中配置

npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

...

  plugins: [
    new HtmlWebpackPlugin({
      title: '管理输出',
      template: './public/index.html'
    })
  ],

加载 iconfont 的在线字体图标

需要添加前缀 https，否者会提示找不到。比如：

@font-face {
  font-family: "iconfont"; /* Project id 3478861 */
  src: url('https://at.alicdn.com/t/c/font_3478861_tsqc6eercy.woff2?t=1670778451523') format('woff2'),
       url('https://at.alicdn.com/t/c/font_3478861_tsqc6eercy.woff?t=1670778451523') format('woff'),
       url('https://at.alicdn.com/t/c/font_3478861_tsqc6eercy.ttf?t=1670778451523') format('truetype');
}

...

设置多入口、多出口（entry、output）

output 中的 [name] 指的是 entry 中的 key 值。

  // entry: './src/index.js',
  entry: {
    index: './src/index.js',
    print: './src/print.js'
  },
  output: {
    // filename: 'main.js',
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },