webpack-dev-server

  • 安装webpack-dev-server
npm i webpackdev-server@3.11.0 -D

webpack-dev-server的特点

  1. 自动编译
  2. 内存操作（没有实际输出的bundle）
  3. 热更新

通用配置选项

  • contentBase：html文件所在的目录
  • compress：是否启动gzip压缩
  • port：指定项目所在端口
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  /**
   * 1.自动编译
   * 2.内存操作
   * 3.热更新
   */
  devServer: {
    //指定项目html文件所在的根目录
    contentBase: path.resolve(__dirname, 'dist'),
    //指定项目端口号
    port: 3000,
    //启动gzip压缩
    compress: true
  }
}