webpack 熱替換配置詳解

時間  2019-11-10
標籤 webpack 替換 配置 詳解 简体版
原文   原文鏈接

熱替換詳解

Main role

  • webpack-dev-servercss

  • webpack-hot-middlewarehtml

  • webpack-dev-middlewarenode

  • react-hot-loaderreact

項目地址webpack

歡迎markgit

1 webpack-dev-serveres6

webpack官方提供的一個簡易服務器，可讓咱們快速的啓動服務，配置devServer hot 爲true便可，這個屬於全局刷新github

2 webpack-hot-server webpack-dev-middlewareweb

當咱們想要在本身服務器上使用全局刷新功能時使用express

3 react-hot-loader

當咱們想要局部刷新，而且不改變當前程序的狀態（state）.例如你當前控件有一個默認狀態，和一個操做以後的狀態，你不想你修改源碼後，致使全局刷新，使得剛剛操做後狀態消失（致使須要重複以前的操做)，這時候你須要使用到改插件。

服務器配置

1.使用webpack搭建一個簡單的熱替換服務器demo地址

僅須要設置devServer hot爲true，並添加插件HotModuleReplacementPlugin。即可以實現一個最簡單熱替換服務器，而後經過webpack-dev-server來啓動

+   devServer: {
+    hot: true,
+  },

+    new webpack.HotModuleReplacementPlugin(),

__啓動__ : webpack-dev-server --config 配置文件名

2.使用node.js搭建一個簡易服務器demo地址

這裏須要使用到兩個中間件 webpack-hot-middleware & wepback-dev-middleware,而後在webpack中entry上配置，並添加插件HotModuleReplacementPlugin。經過server.js中使用兩個中間件，最後經過node server.js啓動

webpack config文件

entry: [
    // http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
+    'webpack-hot-middleware/client?reload=true',
    './src/A/index.js'
  ],
  
+    new webpack.HotModuleReplacementPlugin(),

server.js文件

const path = require('path');
const webpack = require('webpack');
// 服務器框架
const express = require('express');
const config = require('./index');


const compiler = webpack(config);
const app = express();

// 熱更新
app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  hot: true,
  inline: true,
  // publicPath: 'dist'
}));

app.use(require('webpack-hot-middleware')(compiler));

// 啓動服務
app.listen("4000", '0.0.0.0', (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(' start server at port ' +'4000');
});

3.使用react-hot-loader搭建熱替換服務器demo地址

這裏須要下載react-hot-loader，而後配置devserver hot 爲true，而後須要在entry中配置 'react-hot-loader/patch',.babelrc文件中配置 react-hot-loader/babel & moudles: false,而且須要在入口文件源碼中加上熱替換邏輯，最後經過webpack-dev-server跑起來

1.注意點

HtmlWebpackPlugin不能和該插件一塊兒使用，若是想使用該插件，請使用自建服務器，參考
react hot loader server部署

2.如何配置
webpack config 配置

  • 入口配置

  • 添加devServer配置

  • 添加HotModuleReplacementPlugin插件

  • 除去HtmlWebpackPlugin

webpack config源碼
const webpackConfig = {
  // 入口配置
  entry: [
+    'react-hot-loader/patch',
+    'webpack-dev-server/client?http://0.0.0.0:4000', // WebpackDevServer host and port
+    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './src/React_hot_loader/index.js'
  ],
  // Webpack config options on how to obtain modules
  resolve: {
    // 當你reuire時，不須要加上如下擴展名
    extensions: ['.js', '.md', '.txt'],
  },
  devtool: 'eval',
  // 輸出配置
  output: {
    path: buildPath, // 輸出文件路徑
    filename: 'app.js', // 輸出文件名字
    chunkFilename: '[chunkhash].js', // chunk文件名字
  },
+  devServer: {
+    host: 'localhost',
+    port: 4000,
+
+    historyApiFallback: true,
+    // respond to 404s with index.html

+    hot: true,
+    // enable HMR on the server
+  },
  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
    // 防止加載全部地區時刻
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    // Webpack 2之後內置
    // new webpack.optimize.OccurrenceOrderPlugin(),
    // 碰到錯誤warning可是不中止編譯
    new webpack.NoEmitOnErrorsPlugin(), 
    // 生成html文件
-    // new HtmlWebpackPlugin({ 
-    //     // 輸出文件名字及路徑
-    //   filename: 'index.html',
-    //   template: 'index.html'
-    // }),
     new webpack.NamedModulesPlugin(),
  
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
           'babel-loader',
        ],
        exclude: /node_modules/,
      },
    // webpack2 之後內置配置
    //   {
    //     test: /\.json$/,
    //     use: 'json-loader',
    //   },
      {
        test: /\.less/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
      {
        test: /\.txt$/,
        use: 'raw-loader',
      },
      {
        test: /\.md$/,
        use: 'raw-loader',
      },
      {
        test: /\.css$/,
        use: 'style-loader!css-loader!postcss-loader',
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
        loader: 'url-loader?limit=8192&name=[name]-[hash].[ext]'
      }
    ],
  },
};

module.exports = webpackConfig;
src源碼
if (module.hot) module.hot.accept('./App', () => render(App));
.babelrc
{
  "env":{
    "production": {
      "presets": [
        "es2015",
        "react",
        "stage-0"
      ],
      "plugins": ["transform-decorators-legacy","add-module-exports", "transform-object-assign"]
    },
    "development": {
      "presets": [
        // http://babeljs.io/docs/plugins/preset-es2015/#modules
        // 默認將es6選以commonJs類型進行轉化
+        ["es2015", 
+         { "modules": false }
+       ],
-       // "es2015",
        "react",
        "stage-0"
      ],
+      "plugins": ["react-hot-loader/babel"]
    }
  }
 
  
}

4.使用react-hot-loader + node.js搭建熱替換服務器demo地址

這裏須要下載react-hot-loader，而後須要在entry中配置 'react-hot-loader/patch' & 'webpack-hot-middleware/client', ,.babelrc文件中配置 react-hot-loader/babel & moudles: false,而且須要在入口文件源碼中加上熱替換邏輯，還要再server.js中進行中間件的配置，最後經過node server.js啓動

1. 如何配置
webpack config 配置

  • 入口配置

src入口文件配置
.babelrc文件配置
server.js 文件配置

  • 添加webpack-hot-middleware 用於開啓hmr

  • webpack-dev-middleware 用於設置hot爲true

2. 源碼實現
webpack config源碼
const webpackConfig = {
  // 入口配置
  entry: [
+    'react-hot-loader/patch',
+    'webpack-hot-middleware/client',  //用於啓動hmr
    './src/React_hot_loader/index.js'
  ],
  // Webpack config options on how to obtain modules
  resolve: {
    // 當你reuire時，不須要加上如下擴展名
    extensions: ['.js', '.md', '.txt'],
  },
  devtool: 'eval',
  // 輸出配置
  output: {
    path: buildPath, // 輸出文件路徑
    filename: 'app.js', // 輸出文件名字
    chunkFilename: '[chunkhash].js', // chunk文件名字
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // 防止加載全部地區時刻
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    // Webpack 2之後內置
    // new webpack.optimize.OccurrenceOrderPlugin(),
    // 碰到錯誤warning可是不中止編譯
    new webpack.NoEmitOnErrorsPlugin(), 
    // 生成html文件
    // new HtmlWebpackPlugin({ 
    //     // 輸出文件名字及路徑
    //   filename: 'index.html',
    //   template: 'index.html'
    // }),
    // new webpack.NamedModulesPlugin(),
  
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
           'babel-loader',
        ],
        exclude: /node_modules/,
      },
    // webpack2 之後內置配置
    //   {
    //     test: /\.json$/,
    //     use: 'json-loader',
    //   },
      {
        test: /\.less/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
      {
        test: /\.txt$/,
        use: 'raw-loader',
      },
      {
        test: /\.md$/,
        use: 'raw-loader',
      },
      {
        test: /\.css$/,
        use: 'style-loader!css-loader!postcss-loader',
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
        loader: 'url-loader?limit=8192&name=[name]-[hash].[ext]'
      }
    ],
  },
};
server.js源碼
// 熱更新
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  hot: true,
+  historyApiFallback: true
+}));

+app.use(require("webpack-hot-middleware")(compiler));
+
+app.get('*', (request, response) => {
+  response.sendFile(path.resolve(defaultConfig.root, 'index.html'));
+});

// 啓動服務
app.listen("4000", '0.0.0.0', (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(' start server at port ' +'4000');
});
src源碼
if (module.hot) module.hot.accept('./App', () => render(App));
.babelrc
{
  "env":{
    "production": {
      "presets": [
        "es2015",
        "react",
        "stage-0"
      ],
      "plugins": ["transform-decorators-legacy","add-module-exports", "transform-object-assign"]
    },
    "development": {
      "presets": [
        // http://babeljs.io/docs/plugins/preset-es2015/#modules
        // 默認將es6選以commonJs類型進行轉化
+        ["es2015", 
+         { "modules": false }
+       ],
-       // "es2015",
        "react",
        "stage-0"
      ],
+      "plugins": ["react-hot-loader/babel"]
    }
  }
 
  
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程