1、准备

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     hahaha
  11.   </body>
  12. </html>
  1. function add(x, y) {
  2.   return x + y;
  3. }
  5. console.log(add(1, 2));
  6. console.log(add(2, 2));

2、webpack.config.js

  1. const { resolve } = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5.   entry: './src/index.js',
  6.   output: {
  7.     filename: 'built.js',
  8.     path: resolve(__dirname, 'build')
  9.   },
  10.   module: {
  11.   },
  12.   plugins: [
  13.     new HtmlWebpackPlugin({
  14.       template: './src/index.html'
  15.     })
  16.   ],
  17.   mode: 'development',
  19.   // 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
  20.   // 特点：只会在内存中编译打包，不会有任何输出
  21.   // 启动devServer指令为：npx webpack-dev-server
  22.   devServer: {
  23.     // 启动gzip压缩
  24.     compress: true,
  25.     // 端口号
  26.     port: 3000,
  27.     // 自动打开浏览器
  28.     open: true,
  29.      //自动刷新
  30.     liveReload:true,
  31.     // HMR  true开启 HMR 功能 开启模块热替换功能后将在不刷新整个页面的情况下通过用新模块替换老模块来做到实时预览
  32.     hot:false
  33.   }
  34. };

3、结果

image.png
image.png