从0搭建前端项目架构-第三篇-webpack自动打包和热更新

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

Hi, 大家好。

今天开始给大家分享第三篇：webpack自动打包和热更新

webpack常用配置

0x1 webpack dev server

    1.功能：自动打包文件

    2.配置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;

****    3. 在package.json中增加一条命令来进行自动打包

        3.1 cross-env是为了兼容mac windows liunx的环境变量，需要安装。

        3.2 npm install cross-env -D

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

0x2 hot module replacemennt

****1.功能：自动刷新页面

    2.配置hot module：

        2.1 安装react-hot-loader****

npm install react-hot-loader -D

****        2.2 在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())  }

        2.3 在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)      })  }

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

预告：[从0搭建前端项目架构-第四篇-用服务端渲染开发]

服务端渲染开发

0x1 在server/server.js中，没有进行开发环境和线上环境区分，现在进行区分下

...省略    
const isDev = process.env.NODE_ENV === 'development';        
if(!isDev){        
    const serverEntry = require('../dist/server-entry').default        
    const template = fs.readFileSync(path.join(__dirname,'../dist/index.html'),'utf8')      app.use('/public',express.static(path.join(__dirname,'../dist')))        app.get('*',(req,res)=>{            
    const data = ReactSSR.renderToString(serverEntry)               res.send(template.replace('<app></app>',data))        
    })    }else{        
    const devStatic  = require('./util/dev-static')        
    devStatic(app)    }