（七） webpack学习之——创建devServer开发环境

在前面的学习中，每次修改一次源代码，都需要经过一次webpack打包才能生效。因可以配置devServer，从而可以使修改的代码能立刻生效。一个简单的devServer配置如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');;
process.env.NODE_ENV = 'development';
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'js/index.js',
    path: path.resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },

          },

          'css-loader',
        ],
      },
      {
        test: /.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },

          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          outputPath: 'images',
        },

      },
      {
        test: /.html$/,
        loader: 'html-loader',

      },
      {
        test: /.(eot|ttf|svg|woff)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'font/',
        },

      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/css.css',

    }),
    new OptimizeCssAssetsWebpackPlugin(),
  ],
  mode: 'development',
  devServer: {
78     // 从哪里提供内容
79     contentBase: path.resolve(__dirname, 'build'),
80     // 启动gizp压缩
81     compress: true,
82     // 端口号
83     port: 4000,
84     // 自动打开浏览器
85     open: true,
86   }
};

在package.json里配置脚本

"scripts": {
    "dev": "webpack-dev-server"
  },

即可启动。