webpack配置热更新代码分享

来源：互联网发布：旅游大数据分析编辑：程序博客网时间：2024/05/16 01:46

介绍2种方案：

一、webpack-dev-middleware和webpack-hot-middleware结合

demo在这：https://github.com/hyy1115/react-redux-webpack

安装

npm i --save-dev webpack-dev-middleware webpack-hot-middleware

配置选项

1、webpack.config.js：在入口entry配置热更新的url，在plugin添加new webpack.HotModuleReplacementPlugin()

entry: [    'webpack-hot-middleware/client?path=http://本地ip:端口/__webpack_hmr&reload=true&noInfo=false&quiet=false',    'babel-polyfill',    './src/index'  ],  output: {    filename: 'bundle.js',    path: path.join(__dirname, 'build'),    publicPath: 'http://本地ip:端口/build/',    chunkFilename: '[hash].bundle.js'  },  plugins: [    new webpack.optimize.OccurenceOrderPlugin(),    new webpack.HotModuleReplacementPlugin(),    new webpack.NoErrorsPlugin()  ],

2、server.js：开启前端服务器

var webpackConfig = require('./webpack.config.js');var webpackDevMiddleware = require("webpack-dev-middleware");var webpackHotMiddleware = require('webpack-hot-middleware');app.use(webpackDevMiddleware(compiler, {  noInfo: true,  publicPath: webpackConfig.output.publicPath,  headers: { "X-Custom-Header": "yes" },  stats: {    colors: true  }}));app.use(webpackHotMiddleware(compiler));

3、通常你还需要配置热更新的入口文件，比如我用redux开发，那么热更新入口一般放在store文件，添加这个方法module.hot.accept()来检查是否支持热更新。

if(module.hot) {    // accept itself    module.hot.accept();    // removeStyleTag(element: HTMLStyleElement) => void    var removeStyleTag = require("./removeStyleTag");    // dispose handler    module.hot.dispose(function() {        // revoke the side effect        removeStyleTag(element);    });}

二、webpack-dev-server（很多人喜欢用这种方式）

demo在这：https://github.com/hyy1115/react-redux-webpack2

安装

npm i --save-dev webpack-dev-server

1、webpack.js：只需要做下面这样一个配置即可。

module.exports = {    devServer: {        contentBase: './src',        historyApiFallback: true,        port: 3022,        compress: isProd,        inline: !isProd,        hot: !isProd, //开发模式支持热更新        stats: {          assets: true,          children: false,          chunks: false,          hash: false,          modules: false,          publicPath: false,          timings: true,          version: false,          warnings: true,          colors: {            green: '\u001b[32m',          }        },    }}

1 0