帮助程序员简化流程，专注业务代码的webpack配置

3.1项目中很有用的webpack常用配置

在传统html开发流程中，webapp开发模式中，前端代码改动很多，按照之前的流程跑的话，每次都需要npm run build以及run start，开发流程就会很繁琐

webpack dev server

webpack官方插件,通过webpack配置去启动一个微型服务器，便于开发者在开发过程中避免不必要的build以及start，并且该服务器编译出来的内容保存于内存中，一旦内容有更新，都会自动执行build，而不用手动build

Hot module replacement

编辑工程时，帮助我们在修改代码后，页面实时更新[区别于会重新请求页面的“刷新”]

• 免于手动刷新查看页面效果
• webapp开发模式会在前端中存储大量数据，如果没有实时刷新，那么每次手动刷新时数据都会重新请求一遍，时间非常浪费，Hot module replacement可以保持当前状态，无需重新请求数据

3.2具体配置__webpack dev server

• 因为上述配置只用于开发环境，所以需要判断当前执行环境，需要在webpack.config.client.js中添加以下代码

  //添加执行环境判断变量【NODE_ENV】const isDev=process.env.NODE_ENV==='development';//修改module.exports={...}->    const config={...}//在最后加入if(isDev){    config.devServer={        //devServer而不是server        host:'0.0.0.0',//兼容localhost，0.0.0.0，以及IP三种方式访问        port:'3000',   //webpack微服务端口(以后都称为devServer)        contentBase:path.join(__dirname,'../dist'),//静态文件路径        hot:true,       //是否开启Hot module replacement        overlay:{       //网页什么时候出现遮罩警告层，这里配置为error时            errors:true //还有多种，比如warning，但是一般会过滤掉其他类型       }    }}module.exports=config;      //不是modules也不是export也不是(config)...

• $npm i webpack-dev-server -D

• 安装完成后在package.json中添加启动微服务的script

  scripts->"dev:client":"cross-env NODE_ENV=development && webpack-dev-server --config build/webpack.config.client.js"    //手误写成server.js//上面判断执行环境时，使用的【NODE_ENV】就是这里定义的变量【NODE_ENV】//cross-env是一个我们需要安装的包，用于兼容windows，linux以及mac的命令行

• $npm i cross-env -D

• $npm run dev:client

  • 进入浏览器访问，查看http请求，发现请求文件有404，查看请求url，发现路径多了public，需要在配置devServer时进行处理
  • 具体原因：webpack.config.client.js->devServer->contentBase的value表示启动devServer在value目录下，也就是说devServer的root是dist目录，而dist目录是真正的项目ROOT的一个子节点，而client被output出去时使用的是静态资源文件路径是添加上了publicPath的value--'/public'

  • 解决方法：在devServer中添加配置：

    publicPath:'/public',       //访问静态资源时都需要添加publichistoryApiFallback:{        //为我们自动配置了很多映射关系，单页应用的所有url都会返回404，而该配置将所有前端返回的404请求都返回成historyApiFallback的index    index:'/public/index.html' //指定index，因为publicPath添加了前缀，所以此处也需要添加前缀}

• $npm run dev:client

  • 配置完后仍然会有404，因为devServer会检测硬盘是否有此目录，有时会以硬盘为准而非内存中编译文本的内容为准。
  • 删除dist目录，重新$npm run dev:client，此时报错：
    Uncaught Error: [HMR] Hot Module Replacement is disabled.
    【原因】：在devServer中开启了hot:true，但是并没有安装相关依赖模块导致引用相关js文件shi出错
    【解决】：暂时注释掉hot：true,重新 $npm run dev:client
  • 小优化：
    将template.html中的<app>标签修改为html注释<!--app-->，然后在server端渲染时，由替换非标准html标签<app>修改为替换注释，因为注释不会被浏览器编译，自然不会判断出错

• 修改代码会发现浏览器实现内容自动刷新(为实现自动更新需要配置hot-module-replacement)

3.3具体配置__Hot-module_replacement

* `.babelrc`添加`presets`同级KV    "plugins":["react-hot-loader/babel"]    * `$npm i react-hot-loader@next -D`    @next是因为当前为测试版，尚未正式发布到npm中    * `app.js`加入以下内容，[我的第2篇文章](https://segmentfault.com/a/1190000012945475)    ```    if(module.hot){    //当我们需要热更新的代码有更新时，重新加载App    module.hot('./App.jsx',()=>{        const NextApp=require('./App.jsx').default;//加default的原因在上面链接中有提到        ReactDOM.hydrate(
    ,document.getElementById('root'));        })    }    * `$npm run dev:client`    ```    发现页面仍然会自动刷新，没有实现     * `client配置中`    ```    hot:true解注释    const webpack=require('webpack')    //顶部引入webpack    config.plugins.push(new Webpack.HotModuleReplacementPlugins());    //与config.devServer同级添加webpack的HotModuleReplacementPlugins插件        //由于在.babelrc中添加了hotmodule配置，需要在开发时修改entry，由于只是在开发是进行修改，所以config.devServer中进行修改即可：    config.entry={        app:[            'react-hot-loader/patch',            //客户端热更新代码时需要用到的补丁包            path.join(__dirname,'./client/app.js')            //要打包的内容        ]//webpack的entry可以是个数组，代表着该entry中引用的文件，webpack在打包时会将所有的文件打包在一个文件中    }        import React from 'react'    import ReactDOM from 'react-dom'    import { AppContainer } from 'react-hot-loader'    //更新1：使用AppContainer去包裹我们的根节点想要渲染的实际HTML内容    import App from './App.jsx'        //ReactDOM.hydrate(
    ,document.getElementById('root'));    //更新2：封装成可传递参数的方法，此处注释掉    //将App挂载在document.body中，因为此时并没有模板，只有body可以使用，官方推荐在body中创建一个默认节点作为主dom        const root=document.getElementById('root');    //更新3：根节点变量化    const render = Component =>{        const renderMethod=module.hot ? ReactDOM.render :ReactDOM.hydrate;        //注意点！        //如果不对是否采用react-hot-loader进行判断，npm run dev：client时，进入浏览器会弹出错误        //Warning: Expected server HTML to contain a matching 
    
      in 
     
      .        renderMethod(            
                      
                   
      ,                root        )    };    //更新4：更新2的封装    render(App);    //更新5：传参调用更新4    if(module.hot){        module.hot.accept('./App.jsx',()=>{            const NextApp=require('./App.jsx').default;                        //ReactDOM.hydrate(
      ,document.getElementById('root'));            //更新6，采用封装方法，此处注释            render(NextApp)            //更新7，传参调用更新4        })    }    * `npm run dev:client`    进入浏览器，修改内容，发现无需刷新即可更新内容，但是更新时间比较长，        想要更快更新，需要手动保存CTRL+S    另外，【如果】手动重启devServer后hotmodule失效（页面Elements刷新），    打开network，勾选Preserve log(用于保留刷新前的请求内容，防止刷新后以前的请求丢失导致不好定位问题),    修改内容后查看请求url，发现404请求，url样式：        http://localhost:3000/public6f45a1f9b1cb390b0ffb.hot-update.json        该文件通知hotmodule有模块更新以更新内容，发现public后缺失"/",需要在修改为    publicPath:'/public/'，推荐后面都加上'/'，    多'/'不会出现路径错误，少'/'却会在某些时候引发不可预期的错误
     
    

小结

• 多配置，多看官方文档，熟练各种配置，否则坑太多