技本功丨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

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

需要升级的有：

html-webpack-plugin

react-dev-utils

修改代码完整篇 webpack.config.dev.js：
const autoprefixer = require('autoprefixer');
const path = require('path'); const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env'); const paths = require('./paths');
function resolve (dir) {  return path.join(__dirname, '..', dir) } const publicPath = '/';
const publicUrl = '';
const env = getClientEnvironment(publicUrl);
module.exports = {  
mode: 'development',  
devtool: 'cheap-module-source-map',  
entry: [    require.resolve('./polyfills'),    
require.resolve('react-dev-utils/webpackHotDevClient'),    
paths.appIndexJs,  ],  
output: {    
pathinfo: true,    
filename: 'static/js/bundle.js',    
chunkFilename: 'static/js/[name].chunk.js',    
publicPath: publicPath,    
devtoolModuleFilenameTemplate: info =>      
path.resolve(info.absoluteResourcePath).replace(/\/g, '/'),  },  
resolve: {    modules: ['node_modules', paths.appNodeModules].concat(      
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)    ),    
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx','.less','.scss'],    
alias: {      
'@': resolve('src'),      
'public': resolve('src/public'),      
'components': resolve('src/components'),      
'pages': resolve('src/pages'),      
'api': resolve('src/api'),      
'mock': resolve('src/public/mock'),    },    
plugins: [      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),    
],  
},  
module: {    
strictExportPresence: true,    
rules: [      
{        
test: /.(js|jsx|mjs)$/,        
enforce: 'pre',        
use: [          
{            
options: {              
formatter: eslintFormatter,              
eslintPath: require.resolve('eslint'),                          
},            
loader: require.resolve('eslint-loader'),          
},      
],        
include: paths.appSrc,      
},      
{        
oneOf: [          
{            
test: [/.bmp$/, /\.gif$/, /.jpe?g$/, /\.png$/],            
loader: require.resolve('url-loader'),            
options: {              
limit: 10000,              
name: 'static/media/[name].[hash:8].[ext]',            
},          
},          
{            
test: /.(js|jsx|mjs)$/,            
include: paths.appSrc,            
loader: require.resolve('babel-loader'),            
options: {            
cacheDirectory: true,          
}          
},          
{            
test: /.(css|less)$/,            
use: [              
require.resolve('style-loader'),              
{                
loader: require.resolve('css-loader'),                
options: {                  
importLoaders: 1,                
},              
},              
{                
loader: require.resolve('postcss-loader'),                
options: {                  
ident: 'postcss',                  
plugins: () => [                    
require('postcss-flexbugs-fixes'),                    
autoprefixer({                      
browsers: [                        
'>1%',                        
'last 4 versions',                        
'Firefox ESR',                        
'not ie < 9', // React doesn't support IE8 anyway                      
],                      
flexbox: 'no-2009',                    
}),                  
],                
},              
},              
{                
loader: require.resolve('less-loader') // compiles Less to CSS              
},            
],          
},          
{            
test: /.(css|scss)$/,            
use: [              
require.resolve('style-loader'),              
{                
loader: require.resolve('css-loader'),                
options: {                  
importLoaders: 1,                
},              
},              
{                
loader: require.resolve('postcss-loader'),                
options: {                  
ident: 'postcss',                  
plugins: () => [                    
require('postcss-flexbugs-fixes'),                    
autoprefixer({                      
browsers: [                        
'>1%',                        
'last 4 versions',                        
'Firefox ESR',                        
'not ie < 9', // React doesn't support IE8 anyway                      
],                      
flexbox: 'no-2009',                    
}),                  
],                
},            
},              
{                
loader: require.resolve('sass-loader') // compiles Less to CSS              
},            
],          
},          
{            
exclude: [/.(js|jsx|mjs)$/,/\.(css|less)$/, /.html$/, /\.json$/],            
loader: require.resolve('file-loader'),            
options: {              
name: 'static/media/[name].[hash:8].[ext]',            
},          
},        
],      
},    
],  
},  
plugins: [    
new HtmlWebpackPlugin({      
inject: true,      
template: paths.appHtml,      
chunksSortMode: 'none',    
}),    
new InterpolateHtmlPlugin(env.raw),    
new webpack.DefinePlugin(env.stringified),    
new webpack.HotModuleReplacementPlugin(),    
new CaseSensitivePathsPlugin(),    
new WatchMissingNodeModulesPlugin(paths.appNodeModules),    
new webpack.IgnorePlugin(/^./locale$/, /moment$/),  
],  
node: {    dgram: 'empty',    
fs: 'empty',    
net: 'empty',    
tls: 'empty',    
child_process: 'empty',  
},  
performance: {    
hints: false,  
},  
optimization: {    
namedModules: true,    
nodeEnv: 'development',  
},
};
还需注意的是webpack4对ExtractTextWebpackPlugin做了调整，建议选用新的CSS文件提取插件mini-css-extract-plugin。生产环境下我们需要做一下配置调整：

webpack.config.prod.js

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const paths = require('./paths');
const getClientEnvironment = require('./env');
const theme = require('../antd-theme.js');
function resolve (dir) {
 return path.join(__dirname, '..', dir)
}
const publicPath = paths.servedPath;
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const publicUrl = publicPath.slice(0, -1);
const env = getClientEnvironment(publicUrl);

if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 throw new Error('Production builds must have NODE_ENV=production.');
}

module.exports = {
 mode: "production",
 bail: true,
 devtool: shouldUseSourceMap ? 'source-map' : false,
 entry: [require.resolve('./polyfills'), paths.appIndexJs],
 output: {
   path: paths.appBuild,
   filename: 'static/js/[name].[chunkhash:8].js',
   chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
   publicPath: publicPath,
   devtoolModuleFilenameTemplate: info =>
     path
       .relative(paths.appSrc, info.absoluteResourcePath)
       .replace(/\/g, '/'),
 },
 resolve: {
   modules: ['node_modules', paths.appNodeModules].concat(
     // It is guaranteed to exist because we tweak it in env.js
     process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
   ),
   extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx','.less'],
   alias: {
     '@': resolve('src'),
     'public': resolve('src/public'),
     'components': resolve('src/components'),
     'pages': resolve('src/pages'),
     'mock': resolve('src/public/mock'),
     'api': resolve('src/api'),
     'react-native': 'react-native-web',
   },
   plugins: [
     new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
   ],
 },
 module: {
   strictExportPresence: true,
   rules: [
     {
       test: /.(js|jsx|mjs)$/,
       enforce: 'pre',
       use: [
         {
           options: {
             formatter: eslintFormatter,
             eslintPath: require.resolve('eslint'),
             
           },
           loader: require.resolve('eslint-loader'),
         },
       ],
       include: paths.appSrc,
     },
     {
       oneOf: [
         {
           test: [/.bmp$/, /\.gif$/, /.jpe?g$/, /\.png$/],
           loader: require.resolve('url-loader'),
           options: {
             limit: 10000,
             name: 'static/media/[name].[hash:8].[ext]',
           },
         },
         // Process JS with Babel.
         {
           test: /.(js|jsx|mjs)$/,
           include: paths.appSrc,
           loader: require.resolve('babel-loader'),
           options: {
             plugins: [
                 ['import', [{ libraryName: 'antd', style: true }]],  // import less
             ],
             compact: true,
           },
         },
         {
           test: /.(less|css)$/,
           use: [
             MiniCssExtractPlugin.loader,
             "css-loader",
             "less-loader?{modifyVars:" + JSON.stringify(theme) + "}"
           ],
         },
         {
           test: /.(scss|sass)$/,
           use: [
             MiniCssExtractPlugin.loader,
             "css-loader",
             "sass-loader"
           ]
         },
         {
           loader: require.resolve('file-loader'),
           exclude: [/.(js|jsx|mjs)$/,/\.(css|less)$/, /.html$/, /\.json$/],
           options: {
             name: 'static/media/[name].[hash:8].[ext]',
           },
         },
       ],
     },
   ],
 },
 optimization: {
   runtimeChunk: {
     name: 'manifest'
   },
   minimize: true,
   noEmitOnErrors: true,
   minimizer: [
     new UglifyJsPlugin({
       cache: true,
       parallel: true,
       sourceMap: false
     }),
     new OptimizeCSSAssetsPlugin({})
   ],
   splitChunks: {
     minSize: 30000,
     maxSize: 3000000,
     minChunks: 1,
     maxAsyncRequests: 5,
     maxInitialRequests: 3,
     name: true,
     cacheGroups: {
       vendor: {
         chunks: 'initial',
         name: 'vendor',
         test: 'vendor'
       },
       echarts: {
         chunks: 'all',
         name: 'echarts',
         test: /[\/]echarts[\/]/,
       }
     }
   }
 },
 plugins: [
   new HtmlWebpackPlugin({
     inject: true,
     template: paths.appHtml,
     minify: {
       removeComments: true,
       collapseWhitespace: true,
       removeRedundantAttributes: true,
       useShortDoctype: true,
       removeEmptyAttributes: true,
       removeStyleLinkTypeAttributes: true,
       keepClosingSlash: true,
       minifyJS: true,
       minifyCSS: true,
       minifyURLs: true,
     },
   }),
   new InterpolateHtmlPlugin(env.raw),
   new webpack.DefinePlugin(env.stringified),
   new webpack.NamedModulesPlugin(),
   new webpack.optimize.OccurrenceOrderPlugin(true),
   new MiniCssExtractPlugin({
     filename: "css/[name].[hash].css",
     chunkFilename: "css/[name].[hash].css"
   }),
   new ManifestPlugin({
     fileName: 'asset-manifest.json',
   }),
   new SWPrecacheWebpackPlugin({
     dontCacheBustUrlsMatching: /.w{8}./,
     filename: 'service-worker.js',
     logger(message) {
       if (message.indexOf('Total precache size is') === 0) {
         return;
       }
       if (message.indexOf('Skipping static resource') === 0) {
         return;
       }
       console.log(message);
     },
     minify: true,
     navigateFallback: publicUrl + '/index.html',
     navigateFallbackWhitelist: [/^(?!/__).*/],
     staticFileGlobsIgnorePatterns: [/.map$/, /asset-manifest\.json$/],
   }),
   new webpack.IgnorePlugin(/^./locale$/, /moment$/),
 ],
 node: {
   dgram: 'empty',
   fs: 'empty',
   net: 'empty',
   tls: 'empty',
   child_process: 'empty',
 },
};

此时基本完成了webpack4升级的改造

但是运行下，还有个隐形的坑待处理……

因为引入了andt组件库，

高版本对less编译会出错。。

噗~升级了一路，碰到个需要降级处理的，

好，降低less版本 "less": "2.7.3"，

运行一波，亲测完美~

最后附package.json

{
 "dependencies": {
   "antd": "^3.9.0-beta.6",
   "autoprefixer": "7.1.6",
   "axios": "^0.18.0",
   "babel-core": "6.26.0",
   "babel-eslint": "7.2.3",
   "babel-jest": "20.0.3",
   "babel-loader": "7.1.2",
   "babel-plugin-import": "^1.8.0",
   "babel-polyfill": "^6.26.0",
   "babel-preset-react-app": "^3.1.1",
   "babel-runtime": "^6.26.0",
   "case-sensitive-paths-webpack-plugin": "2.1.1",
   "chalk": "1.1.3",
   "classnames": "^2.2.6",
   "core-decorators": "^0.20.0",
   "create-keyframe-animation": "^0.1.0",
   "css-loader": "0.28.7",
   "dotenv": "4.0.0",
   "dotenv-expand": "4.2.0",
   "eslint": "4.10.0",
   "eslint-config-react-app": "^2.1.0",
   "eslint-loader": "^2.1.1",
   "eslint-plugin-flowtype": "2.39.1",
   "eslint-plugin-import": "2.8.0",
   "eslint-plugin-jsx-a11y": "5.1.1",
   "eslint-plugin-react": "7.4.0",
   "express": "^4.16.3",
   "fastclick": "^1.0.6",
   "file-loader": "2.0.0",
   "fs-extra": "3.0.1",
   "good-storage": "^1.0.1",
   "history": "^4.7.2",
   "html-webpack-plugin": "^3.2.0",
   "immutable": "^3.8.2",
   "jest": "20.0.4",
   "js-base64": "^2.4.3",
   "jsonp": "^0.2.1",
   "less": "2.7.3",
   "less-loader": "^4.0.1",
   "lyric-parser": "^1.0.1",
   "mini-css-extract-plugin": "^0.4.3",
   "mobx": "^4.1.1",
   "mobx-react": "^5.0.0",
   "mobx-react-devtools": "^5.0.1",
   "node-sass": "^4.9.3",
   "object-assign": "4.1.1",
   "optimize-css-assets-webpack-plugin": "^5.0.1",
   "postcss-flexbugs-fixes": "3.2.0",
   "postcss-loader": "2.0.8",
   "promise": "8.0.1",
   "prop-types": "^15.6.1",
   "raf": "3.4.0",
   "react": "^16.3.0",
   "react-addons-css-transition-group": "^15.6.2",
   "react-dev-utils": "^6.0.0-next.a671462c",
   "react-dom": "^16.3.0",
   "react-hot-loader": "^4.3.4",
   "react-lazyload": "^2.3.0",
   "react-loadable": "^5.5.0",
   "react-router-dom": "^4.2.2",
   "react-transition-group": "^2.3.1",
   "sass-loader": "^7.1.0",
   "style-loader": "0.19.0",
   "sw-precache-webpack-plugin": "^0.11.5",
   "uglifyjs-webpack-plugin": "^2.0.1",
   "url-loader": "0.6.2",
   "webpack": "^4.19.0",
   "webpack-cli": "^3.1.0",
   "webpack-dev-server": "^3.1.8",
   "webpack-manifest-plugin": "^2.0.4",
   "whatwg-fetch": "2.0.3"
 },
 "scripts": {
   "start": "node scripts/start.js",
   "build": "node scripts/build.js"
 },
 "babel": {
   "presets": [
     "react-app"
   ],
   "plugins": [
     "transform-decorators-legacy"
   ]
 },
 "eslintConfig": {
   "extends": "react-app"
 },
 "devDependencies": {
   "babel-plugin-transform-decorators-legacy": "^1.3.4",
   "better-scroll": "^1.9.1"
 },
}

结 语

前端的框架更新速度，悄无声息又超乎想象，需要不断保持着对前端的热情和主动，研究一波前沿的技术架构和设计理念....

比如参加D2前端技术沙龙~

恍惚中，感觉这一波操作

好像还能再优化~优化~