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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

袋鼠云 2019-01-10 15:13:32 浏览2605

5d1e600af26a093557590e46306d5753b3559799


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


78646218ee6c9e0c70019f6178e1b5401450cfca


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

So,在此分享一下升级攻略,收好不谢!


e0abb14141668fcd438d53ff333298bf9ec9b3d3

bf8016d2f9a578bdb86c91ba1178df29f02d4f44


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、目标结构

44caa17684e216b9db58e1906fe16dc30303b600

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

01a124d4872483dd723bd076335ef7669dcc0084

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

f704807570cd86f93faa952269b458ba4eb65db4


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


fe51d528a0b1ae2b47fe244a381f28a00a478124


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


此时,目录改造全部完毕

渐入佳境,赶紧进入正题

39fbd6bcbab297470e376bbb12b9be132b07e64a

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为实时监控文件变化包

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

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

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

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

47f18fa7f460c31125e0b2bdde775103af7e4b84


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",

运行一波,亲测完美~

9950fe05df16ed9647bac9f8ede6330c0718fdac


最后附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前端技术沙龙~

恍惚中,感觉这一波操作

好像还能再优化~优化~