前端配置工程师

都说前端是配置工程师，写个项目各种配置，现在主流的也就是webpack的配置，gulp、grunt这类都已经退居1.5线了。那下面我们就讲讲webpack配置，但我今天就以create-react-app中的那些配置都是干嘛用的。我们不要求对webpack的所有插件都知道，但是应该要知道webpack可以用来干什么，等有需求的时候知道从哪里入手。

webpack.config.dev.js

autoprefixer

是个前端都能懂，就是css自动加前缀，配合postcss使用，如果想更加详细的postcss配置，请移步移动端适配。

html-webpack-plugin

这个插件就是为你生成一个已经自动注入打包后的js的html文件

case-sensitive-paths-webpack-plugin

这个插件就是防止不同的系统下对于大小写的问题导致路径出错

InterpolateHtmlPlugin

这个插件是配合html-webpack-plugin一起使用的,允许你在index.html中使用变量

  // 我们在create-react-app生成的项目中public下的index.html可以看到下面的代码
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

这里的PUBLIC_URL就是一个变量，当webpack打包的时候将你设置的值替换它。

WatchMissingNodeModulesPlugin

这个也是方便开发的插件，当你在一个项目里引用了没有安装的node_modules,webpack会报错module not found，然后你安装完成后，需要自己手动重新启动服务。WatchMissingNodeModulesPlugin这个插件就是帮你省去这步骤，你安装玩缺失的module，webpack会自动重启。

eslintFormatter

emmmm....eslint

ModuleScopePlugin

这个插件是防止你在当前项目中引入非本项目的资源（即src和node_modules文件夹之外的），因为只有src文件夹下的代码才会被babel转译。

webpack.NamedModulesPlugin

这个插件的作用是在热加载时直接返回更新文件名，而不是文件的id，方便开发人员定位。具体

webpack.DefinePlugin

DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。比如我们区分测试环境和正式环境的域名

  new webpack.DefinePlugin({
    PRODUCTION: process.env.NODE_ENV === "production",
    DEVELOPMENT: process.env.NODE_ENV === "development"
  })

然后在js代码中，如果代码中使用了eslint，还需要在package.json中将这个变量声明一下

  "eslintConfig": {
    "extends": "react-app",  // 继承已启用的规则配置
    "globals": {
      "PRODUCTION": false  // false不允许PRODUCTION变量重写，只读属性
      "DEVELOPMENT": true  // true允许DEVELOPMENT变量重写
    }
  }

  if(PRODUCTION){
    domain = www.production.com
  }else{
    domain = www.development.com
  }

webpack.HotModuleReplacementPlugin

模块热替换插件，cereate-react-app中只有css变换才有热替换，js变更会刷新页面。

IgnorePlugin

webpack打包时忽略打包的资源。

深入了解 Service Worker

前端配置工程师