技本功丨create-react-app升级webpack4填坑

都说create-react-app是业界最优秀的 React 应用开发工具之一。But，webpack4都更新到v4.20.2 它居然~还没升级，简直~不能忍

看到webpack这更新速度，本人慌得一批，刚好抽空搭建react-andt-mobx脚手架准备升级~

So，在此分享一下升级攻略，收好不谢！

 

01 安装

npm install -g create-react-app

 

02 创建应用

//create-react-app是全局命令来创建react项目
create-react-app react-demo

 

03 自定义webpack配置

npm run eject  //自定义模式，暴露出webpack配置，不可逆

 

04 着手自定义webpack配置

1、目标结构

当然webpack升级准备，调整create-react-app的目录结构已符合我们项目开发的规范是必不可少的。这里重点需关注的为build目录下的一下文件：

paths文件更改打包路经更改:

 

在项目开发的过程中host配置以及proxy代理是常见的配置，在create-react-app中配置在package.json配置下，灵活性相对不太好，提取webpack中server.js配置：

别忘了修改webpackDevServer.config.js下引用host及proxy下的引用哦。

此时，目录改造全部完毕

渐入佳境，赶紧进入正题

2、webpack3升级webpack4

webpack4新出了一个mode模式，有三种选择，none,development,production.最直观的感受就是你可以少些很多配置，因为一旦你开启了mode模式，webpack4就会给你设置很多基本的东西。

development模式下，将侧重于功能调试和优化开发体验，包含如下内容：

• 浏览器调试工具

• 开发阶段的详细错误日志和提示

• 快速和优化的增量构建机制

production模式下，将侧重于模块体积优化和线上部署，包含如下内容：

• 开启所有的优化代码

• 更小的bundle大小

• 去除掉只在开发阶段运行的代码

• Scope hoisting和Tree-shaking

• 自动启用uglifyjs对代码进行压缩

话不多说，下安装：
yarn add webpack webpack-cli webpack-dev-server

• 这3个包是webpack4的基础功能

• webpack 在 webpack 4 里将命令行相关的都迁移至 webpack-cli 包

• webpack-dev-server为实时监控文件变化包

安装完成之后，请保持淡定，

得先运行一下，万一直接能打包呢

或许它偷偷做了兼容处理呢，

梦想还是要有呢，虽然...

Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found. BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.

果然还是熟悉的味道

上面这个问题是HtmlWebpackPlugin 和 react-dev-utils/InterpolateHtmlPlugin 先后顺序问题，调整下他们的顺序

 new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      chunksSortMode: 'none',
    }),
    new InterpolateHtmlPlugin(env.raw),

嗯，不出意外的话，搞定

再跑一下代码,这个时候可能就出现了一些百度不到问题，你需要升级各种loader了，

less-loader，sass-loader style-loader url-loader

具体命令：

yarn add less-loader@next 

和上面的命令相同，依次升级，运行代码，查看报错，缺啥补啥，成功的选择，值得拥有....

需要升级的有：

• <