前端工程搭建入门（二）启动devServer，支持热更新

配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        path: __dirname + '/release',
        filename: './bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'template/index.html'
        }),
    new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname, 'release'),
        port: 9000,
    hotOnly:true
    }
};

注意点

• 安装 webpack-dev-server 包时要注意版本兼容

webpack 3 ---->  webpack-dev-server 2.x 
webpack 4 ---->  webpack-dev-server 3.x 

• devServer 开启热更新（热更新的配置方式有很多种，只说一下最简单 ^_）
  • 在devServer 的配置项里添加一个配置 hotOnly:true
  • 此时还需要一个 plugin ，在plugins里添加 new webpack.HotModuleReplacementPlugin()，

这样就可以在改完代码时，直接查看页面效果了