詳解webpack2+node+react+babel實現熱加載(hmr)

2019-11-19 15:41:48

字體：大中小

來源：轉載

供稿：網友

前端工程化開發的一個重要標志就是熱替換技術，它大大的提高開發效率，使我們專注于寫代碼，webpack2中的熱替換相比較1更加簡潔。

1. 先看效果

2.目錄結構

3.項目目錄結構文件描述

bin 執行文件

node_modules node包

public 靜態資源文件

static 靜態資源
dist 編譯后文件

src 項目js文件

.bablrc babel配置文件

webpack.config.dev.js開發模式webpack配置

webpack.config.pro.js生產模式webpack配置

3.技術依賴

node
react
babel
ES6/ES2015
react-hmre
webpack

babel-loader,css-loader,sass-loader,style-loader,webpack-hot-middleware,webpack-hot-middleware

熱加載最重要的幾個配置是packge.json/devserver.js/webpack.config.dev.js/webpack.config.prod.js/.babelrc

packge.json

{ "name": "react-hmr-demo", "version": "1.0.0", "description": "react-hmr-demo", "main": "index.js", "scripts": {  "dev": "node bin/devserver.js",  "build":" webpack --config webpack.config.prod.js ",  "start":"node bin/server.js" }, "repository": {  "type": "git",  "url": "git+https://github.com/leinov/react-hmr-demo.git" }, "author": "leinov", "license": "ISC", "dependencies": {  "express": "^4.15.4",  "react": "^15.6.1",  "react-dom": "^15.6.1" }, "devDependencies": {  "babel-core": "^6.26.0",  "babel-loader": "^7.1.2",  "babel-polyfill": "^6.26.0",  "babel-preset-es2015": "^6.24.1",  "babel-preset-react": "^6.24.1",  "babel-preset-react-hmre": "^1.1.1",  "css-loader": "^0.28.5",  "eventsource-polyfill": "^0.9.6",  "node-sass": "^4.5.3",  "sass-loader": "^6.0.6",  "style-loader": "^0.18.2",  "webpack": "^3.5.5",  "webpack-dev-middleware": "^1.12.0",  "webpack-hot-middleware": "^2.18.2" }}

scripts的幾個命令

$ npm run dev //開發模式$ npm run build //編譯打包npm start //正式環境運行

webpack.config.dev.js

var path = require('path');var webpack = require('webpack'); module.exports = {  devtool: 'cheap-module-eval-source-map',//打包構建信息    entry: [    'eventsource-polyfill',//for IE    'webpack-hot-middleware/client',//webpack服務連接到瀏覽器接收更新        './src/index.js'  ],    output: {    filename: 'boundle.js',    publicPath: '/dist/js/'   },    module: {    loaders: [{        test: //.js$/,        loaders: ['babel-loader'],        exclude: /node_modules/ //哪些文件下的需要用到babel      }, {        test: //.css$/,        loaders: ['style-loader', 'css-loader'],      },      {        test: //.scss$/,        loaders: ['style-loader', 'css-loader', 'sass-loader'],      },      {        test: //.(png|jpg|gif)$/,        loaders: ['url?limit=8192&name=images/[name].[ext]'],      }    ]  } ,    resolve:{      alias: {          css: path.resolve(__dirname, 'public/static/css/'), //css目錄別名    }  },    plugins: [      new webpack.HotModuleReplacementPlugin(),//熱替換插件    new webpack.NoEmitOnErrorsPlugin()  ]};

.babelrc

{ "presets": ["react", "es2015"]， "env": {    "development": {        "presets": ["react-hmre"]    } }}

devserver.js

var path = require('path');var express = require('express');var webpack = require('webpack');var config = require('../webpack.config.dev');var app = express();var compiler = webpack(config);var webpackDevMiddleware = require("webpack-dev-middleware");app.use(webpackDevMiddleware(compiler, {  noInfo: false, //true將打印編譯信息（建議false，true會打印很多信息）  publicPath: config.output.publicPath //綁定middleware}));var webpackHotMiddleware = require('webpack-hot-middleware');app.use(webpackHotMiddleware(compiler)); app.get('*', function(req, res) {  res.sendFile(path.resolve(__dirname, '../index.html')); //});app.listen(3100, function(err) {  if (err) {    console.log(err);    return;  }  console.log('Listening at http://localhost:3100');});

這樣就可以實現熱加載了，在項目根目錄執行

$ npm run dev

webpack.config.prod.js

var path = require('path');var webpack = require('webpack');module.exports = {  devtool: 'cheap-module-eval-source-map',  entry: [    './src/index.js'  ],  output: {    path: path.join(__dirname, 'public/dist/js'),    filename: 'boundle.js',    },  module: {    loaders: [{        test: //.js$/,        loaders: ['babel-loader'],        exclude: /node_modules/       }, {        test: //.css$/,        loaders: ['style-loader', 'css-loader'],      },      {        test: //.scss$/,        loaders: ['style-loader', 'css-loader', 'sass-loader'],      },      {        test: //.(png|jpg|gif)$/,        loaders: ['url?limit=8192&name=images/[name].[ext]'],      }    ]  } ,  resolve:{    alias: {      css: path.resolve(__dirname, 'public/static/css/'),      img: path.resolve(__dirname, 'public/static/img/'),    }  },  plugins: [       new webpack.HotModuleReplacementPlugin(),     new webpack.NoEmitOnErrorsPlugin(),     new webpack.optimize.UglifyJsPlugin({         compress: {          warnings: false        }      })         ]  };

生產的webpack主要完成開發后的編譯打包，在plugins里多了壓縮插件,在項目根目錄執行

$ npm run build

bin/server.js

生產環境啟動文件

var path = require('path');var express = require('express');var app = express(); var oneYear = 60 * 1000 * 60 * 24 * 30;app.use(express.static(path.resolve(__dirname, '../public'), { maxAge: oneYear }));app.get('*', function(req, res) {  res.sendFile(path.resolve(__dirname,'../index.html'));});app.listen(3200, function(err) {  if (err) {    console.log(err);    return;  } console.log('Listening at http://localhost:3200'); });