Webpack common configuration

webpack dev server

  • Function: Automatic file packaging
  • Configure dev Server: in webpack.config.client.js
    const path = require('path');
    const HTMlPlugin = require('html-webpack-plugin'); // Check whether it is a development environment 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')})]} // Newif(isDev){config. DevServer = {host:'0.0.0.0'// You can use IP to access port:'8888',
            contentBase: path.join(__dirname,'.. /dist'Overlay :{errors:true}, publicPath:'/public'.historyApiFallback:{
                index:'/public/index.html'
            }
    
        }
    }
    module.exports = config;
Copy the code
  • Add a command to package.json for automatic packaging
    • Cross-env is an environment variable that needs to be installed for MAC Windows Liunx compatibility.
    • npm install cross-env -D
    "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"
Copy the code

hot module replacemennt

  • Function: Automatically refreshes the page

  • Configuring the Hot Module:

    • Install the react – hot – loader
    npm install react-hot-loader -D
Copy the code
    • Configure in webpack.config.client.js
      const webpack = require('webpack')
  if(isDev){
      config.entry ={
          app:[
              "react-hot-loader/patch",
              path.join(__dirname,'.. /client/app.js')]}... Omit the config. Plugins. Push (new webpack HotModuleReplacementPlugin ())}Copy the code
    • Configure it in client/app.js
    . Omit 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)
      })
  }
Copy the code

    Through the above configuration can achieve partial hot update, modify the code, the page will be real-time modification, will not refresh the page.

    • The first WebPack configuration
    • Part 2: Server-side rendering configuration
    • Chapter 4 – Building front-end project architecture from 0 – Chapter 4 – Server side rendering development