从0搭建前端项目架构-第三篇-webpack自动打包和热更新cross-env是为了兼容mac windows liun

webpack常用配置

webpack dev server

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

    const path = require('path');
    const HTMlPlugin = require('html-webpack-plugin');
    
    // 判断是否是开发环境
    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){
        // 开发环境
        config.devServer = {
            host: '0.0.0.0',//可以使用ip访问
            port:'8888',
            contentBase: path.join(__dirname,'../dist'),//打包后的文件
            overlay:{
                errors:true //直接在网页上显示错误
            },
            publicPath:'/public',
            historyApiFallback:{
                index:'/public/index.html'
            }
    
        }
    }
    module.exports = config;

在package.json中增加一条命令来进行自动打包
- cross-env是为了兼容mac windows liunx的环境变量，需要安装。
- 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)
      })
  }

通过以上配置就能达到局部热更新了，修改代码，页面会实时修改，不会刷新页面了。