7.webpack开启本地服务器

1. webpack-dev-server

（1）webpack-dev-server：开启本地服务器，并自动监听工程文件(不包括配置文件)，自动刷新浏览器

（2）全局/局部安装 npm install webpack-dev-server -g     npm install webpack-dev-server --save-dev

    devServer: {                             //与plugins等同级
        port: 9090,
        contentBase: 'dist',
    },

（3）执行 webpack-dev-server

 

2.热更新 hot module replace

webpack-dev-server修改文件后，每次刷新浏览器，重新获取所有资源，热更新只更新修改的部分，不重新刷新页面

    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
        }),
        // new CleanWebpackPlugin(),
        new Webpack.HotModuleReplacementPlugin()    //引入webpack
    ],
    devServer: {
        port: 9090,
        contentBase: 'dist',
        hot: true //开启热更新
    },

注意：js更改会重新加载页面，要实现热更新，在入口文件增加

if(module.hot){
    module.hot.accept();
}