1、准备

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>webpack</title>
  8.   </head>
  10.   <body>
  11.     <h1 id="title">hello html</h1>
  12.   </body>
  14. </html>
function add(x, y) {
  return x + y;
}

console.log(add(2, 3));

2、webpack.config.js

/*
  loader: 1. 下载直接使用（配置loader）
  plugins: 1. 下载需引入后使用
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
    ]
  },
  plugins: [
     //html-webpack-plugin 默认创建一个空的html,自动引入打包输出的所有bundle资源（JS/css)
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html',
      minify:{
        collapseWhites:true //移出空格
      }
    })
  ],
  mode: 'development'
};