webpack常用配置

webpack dev server

  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)容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。