webpack热替换

安装webpack-dev-server

npm install webpack-dev-server -D

通过node脚本的方式

package.json

{
"scripts":{"start": "webpack-dev-server --config webpack.dev.js --hot --port 3000 --open"}
}

webpack.common.js

const path = require('path'),
  CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin,
  HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ title: 'production' })
  ],
  // 压缩css用的loader
  module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

webpack.dev.js

const merge = require('webpack-merge'),
  path = require('path'),
  common = require('./webpack.common');

module.exports = merge(common, {
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist/'
  }
});

通过webpack配置

devServer中增加
hot：true
webpack.dev.js

const merge = require('webpack-merge'),
  webpack = require('webpack'),
  path = require('path'),
  common = require('./webpack.common');

module.exports = merge(common, {
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist/',
    hot: true
  },
  plugins: [
    // 可以显示模块的相对路径
    new webpack.NamedModulesPlugin()
  ]
});