【前端工程化】webpack升级/npm依赖
思路:
1. 应该是在CRA的标准config文件上进行修改，而不是在自己的文件上增加CRA标准config文件的配置
2. 不用的内容就注释，而不是删除
3. 注意注释的内容是否正确
4. 如果有自定义的环境，但它本质上是production的话，可以 const isEnvProduction = webpackEnv === 'production' || selfEnv， 这样可以省不少判断代码
比如我需要升级webpack到4.46.0，同时更新相关依赖
- 先 npm i webpack@4.46 -D
- 打开CRA的标准config文件，增加多出的插件，并升级所有loader
- 找到需要升级包 webpack-cli、webpack-manifest-plugin、html-webpack-plugin 的github库，然后对比不同Tag的peerDependencies 依赖的版本，找到适合webpack@4.46的就行
一般有 eslint-loader(废弃)、 mini-css-extract-plugin、 webpack-cli、 react-dev-utils、 html-webpack-plugin、 file-loader、css-loader、style-loader、postcss-loader
其他例如 mini-css-extract-plugin(+)、extract-text-webpack-plugin(-) 只有在运行时报错进行修改
4.npm list 查看peer dep 关系是否正确
遇到的报错:
npm run build正常
npm run start 失败
发现是webpack.config.js文件出的问题
解决方法: 把报错的配置注释掉，替换成webpack4的配置
拓展:
通过npm-check检查过时、不正确和未使用的依赖项。
通过npm-check-updates升级依赖
使用
ncu
检查当前可升级依赖
再使用
ncu -u
更新package.json文件
然后正常安装依赖npm install就可以了
前后对比
package.json
diff --git a/app/react-apps/package.json b/app/react-apps/package.json index bc085a2ee85..12cd618e526 100644 --- a/app/react-apps/package.json +++ b/app/react-apps/package.json @@ -22,7 +22,7 @@ "eslint": "^4.16.0", "eslint-config-prettier": "~2.9.0", "eslint-config-react-app": "^2.1.0", - "eslint-loader": "^1.9.0", + "eslint-loader": "^4.0.2", "eslint-plugin-flowtype": "^2.50.3", "eslint-plugin-import": "^2.8.0", "eslint-plugin-jest": "^20.0.3", @@ -30,18 +30,19 @@ "eslint-plugin-prettier": "~2.5.0", "eslint-plugin-react": "^7.5.1", "eslint-plugin-react-hooks": "^1.4.0", - "extract-text-webpack-plugin": "^3.0.0", - "file-loader": "^0.11.2", + "file-loader": "^6.2.0", "fs-extra": "^3.0.1", - "html-webpack-plugin": "^2.29.0", + "html-webpack-plugin": "^4.5.2", "jest": "^21.2.1", "lerna": "^2.11.0", + "mini-css-extract-plugin": "^1.6.2", "postcss-flexbugs-fixes": "^3.2.0", "postcss-increase-specificity": "^0.6.0", "postcss-loader": "^2.0.6", "postcss-nested": "^2.1.2", "postcss-prefix-selector": "^1.9.0", "prettier": "~1.10.2", + "react-dev-utils": "^7.0.5", "react-test-renderer": "^15.6.1", "redux-devtools-extension": "^2.13.8", "sass": "^1.32.8", @@ -54,9 +55,11 @@ "sw-precache-webpack-plugin": "^0.11.4", "uglifyjs-webpack-plugin": "^1.3.0", "url-loader": "^0.5.9", - "webpack": "^3.12.0", + "webpack": "^4.46.0", + "webpack-bundle-analyzer": "^4.5.0", + "webpack-cli": "^4.9.1", "webpack-dev-server": "^2.7.1", - "webpack-manifest-plugin": "^1.3.2", + "webpack-manifest-plugin": "^2.2.0", "webpack-merge": "^4.1.5", "whatwg-fetch": "^2.0.3", "yargs": "^15.3.1" @@ -86,7 +89,6 @@ "object.values": "^1.0.4", "promise": "8.0.1", "react": "^16.8.1", - "react-dev-utils": "^3.1.0", "react-dnd": "^10.0.2", "react-dnd-html5-backend": "^10.0.2", "react-dom": "^16.8.1", @@ -174,5 +176,5 @@ "eslintConfig": { "extends": "react-app" }, - "proxy": "http://localhost:8080" -} \ No newline at end of file + "proxy": "https://fbappschina03.test.backstopsolutions.com/" +} (END)
webpack.config.prod.js
diff --git a/app/react-apps/config/webpack.config.prod.js b/app/react-apps/config/webpack.config.prod.js index 6916b5b2a5d..1c5cda8c3d8 100644 --- a/app/react-apps/config/webpack.config.prod.js +++ b/app/react-apps/config/webpack.config.prod.js @@ -12,7 +12,7 @@ console.log( const autoprefixer = require('autoprefixer'); const path = require('path'); const webpack = require('webpack'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ManifestPlugin = require('webpack-manifest-plugin'); const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); const eslintFormatter = require('react-dev-utils/eslintFormatter'); @@ -165,6 +165,7 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths // It compiles slowly and is focused on producing a fast and minimal bundle. // The development configuration is different and lives in a separate file. module.exports = { + mode: 'production', // Don't attempt to continue if there are any errors. bail: true, // We generate sourcemaps in production. This is slow but gives good results. @@ -282,74 +283,122 @@ module.exports = { // in the main CSS file. { test: /\.css$/, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: require.resolve('style-loader'), - use: [ - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - minimize: true, - sourceMap: shouldUseSourceMap, - }, - }, - postCSSLoader, - ], + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: extractTextPluginOptions, + }, + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, }, - extractTextPluginOptions - ) - ), + }, + postCSSLoader, + ], + // loader: ExtractTextPlugin.extract( + // Object.assign( + // { + // fallback: require.resolve('style-loader'), + // use: [ + // { + // loader: require.resolve('css-loader'), + // options: { + // importLoaders: 1, + // minimize: true, + // sourceMap: shouldUseSourceMap, + // }, + // }, + // postCSSLoader, + // ], + // }, + // extractTextPluginOptions + // ) + // ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, { test: /\.s[ac]ss$/, exclude: /\.module\.s[ac]ss$/, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: require.resolve('style-loader'), - use: [ - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 2, - minimize: true, - sourceMap: shouldUseSourceMap, - }, - }, - postCSSLoaderWithoutPrefixSelector(false), - sassLoader, - ], + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: extractTextPluginOptions, + }, + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 2, + minimize: true, + sourceMap: shouldUseSourceMap, }, - extractTextPluginOptions - ) - ), + }, + postCSSLoaderWithoutPrefixSelector(false), + sassLoader, + ], + // loader: ExtractTextPlugin.extract( + // Object.assign( + // { + // fallback: require.resolve('style-loader'), + // use: [ + // { + // loader: require.resolve('css-loader'), + // options: { + // importLoaders: 2, + // minimize: true, + // sourceMap: shouldUseSourceMap, + // }, + // }, + // postCSSLoaderWithoutPrefixSelector(false), + // sassLoader, + // ], + // }, + // extractTextPluginOptions + // ) + // ), }, { test: /\.module\.s[ac]ss$/, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: require.resolve('style-loader'), - use: [ - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 2, - minimize: true, - modules: true, - sourceMap: shouldUseSourceMap, - }, - }, - postCSSLoaderWithoutPrefixSelector(true), - sassLoader, - ], + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: extractTextPluginOptions, + }, + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 2, + minimize: true, + modules: true, + sourceMap: shouldUseSourceMap, }, - extractTextPluginOptions - ) - ), + }, + postCSSLoaderWithoutPrefixSelector(true), + sassLoader, + ], + // loader: ExtractTextPlugin.extract( + // Object.assign( + // { + // fallback: require.resolve('style-loader'), + // use: [ + // { + // loader: require.resolve('css-loader'), + // options: { + // importLoaders: 2, + // minimize: true, + // modules: true, + // sourceMap: shouldUseSourceMap, + // }, + // }, + // postCSSLoaderWithoutPrefixSelector(true), + // sassLoader, + // ], + // }, + // extractTextPluginOptions + // ) + // ), }, { test: /\.(eot|svg|ttf|woff|woff2)(\?.*$|$)/, @@ -404,7 +453,7 @@ module.exports = { }, }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. - new ExtractTextPlugin({ + new MiniCssExtractPlugin({ filename: cssFilename, }), // Generate a manifest file which contains a mapping of all asset filenames (END)
