快捷導(dǎo)航

webpack自動打包和熱更新的實現(xiàn)方法

更新時間：2019年06月24日 15:15:23 作者：curry_fe

這篇文章主要介紹了webpack自動打包和熱更新的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧

webpack常用配置

webpack dev server

功能：自動打包文件
配置dev server：在webpack.config.client.js中配置

  const path = require('path');
  const HTMlPlugin = require('html-webpack-plugin');
  
  // 判斷是否是開發(fā)環(huán)境
  const isDev = process.env.NODE_ENV === 'development'
  
  
  const config = {
    entry: {
      app: path.join(__dirname,'../client/app.js')
    },
    output: {
      filename: '[name].[hash].js',
      path: path.join(__dirname,'../dist'),
      publicPath: '/public'
    },
    module: {
      rules: [
        {
          test: /.jsx$/,
          loader: 'babel-loader'
        },
        {
          test: /.js$/,
          loader: 'babel-loader',
          exclude: [
            path.join(__dirname,'../node_modules')
          ]
        }
      ]
    },
    plugins:[
      new HTMlPlugin({
        template:path.join(__dirname,'../client/template.html')
      })
    ]
  }
  
  //新增
  if(isDev){
    // 開發(fā)環(huán)境
    config.devServer = {
      host: '0.0.0.0',//可以使用ip訪問
      port:'8888',
      contentBase: path.join(__dirname,'../dist'),//打包后的文件
      overlay:{
        errors:true //直接在網(wǎng)頁上顯示錯誤
      },
      publicPath:'/public',
      historyApiFallback:{
        index:'/public/index.html'
      }
  
    }
  }
  module.exports = config;

在package.json中增加一條命令來進行自動打包

cross-env是為了兼容mac windows liunx的環(huán)境變量，需要安裝。

npm install cross-env -D

  "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"

hot module replacemennt

功能：自動刷新頁面

配置hot module：

安裝react-hot-loader

npm install react-hot-loader -D

在webpack.config.client.js中配置

 const webpack = require('webpack')
 if(isDev){
   config.entry ={
     app:[
       "react-hot-loader/patch",
       path.join(__dirname,'../client/app.js')
     ]
   }
   ...省略
   config.plugins.push(new webpack.HotModuleReplacementPlugin())
 }

在client/app.js中配置

 ...省略
 import { AppContainer } from 'react-hot-loader';
 const root = document.getElementById('root')
 const render = Component =>{
   aaa.hydrate(
     <AppContainer>
       <Component />
     </AppContainer>,
     root
   )
 }
 render(App)
 if(module.hot){
   module.hot.accept('./App.jsx',()=>{
     const NextApp = require('./App.jsx').default
     render(NextApp)
   })
 }

通過以上配置就能達到局部熱更新了，修改代碼，頁面會實時修改，不會刷新頁面了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: