roadhog迁移成webpack4问题整理

[webpack-cli] Error: Cannot find module 'object.getownpropertydescriptors'

可能是webpack-cli版本的问题，我的项目是从3.1.1升级到4.9.1好了。

0 info it worked if it ends with ok1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.14.15
3 info using node@v12.22.7
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle boogoohr@3.0.0~prestart: boogoohr@3.0.0
6 info lifecycle boogoohr@3.0.0~start: boogoohr@3.0.0
7 verbose lifecycle boogoohr@3.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle boogoohr@3.0.0~start: PATH: C:\Users\yangsmc\AppData\Roaming\nvm\v12.22.0\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\yt-program\自助webpack4\node_modules\.bin;C:\Users\liuzhana\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\liuzhana\bin;C:\Program Files (x86)\NetSarang\Xftp 6;C:\Program Files (x86)\NetSarang\Xshell 6;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files\Citrix\System32;C:\Program Files\Citrix\ICAService;C:\Program Files\TortoiseSVN\bin;C:\Users\yangsmc\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin;C:\Users\liuzhana\AppData\Roaming\npm;C:\Users\liuzhana\AppData\Local\Yarn\bin;C:\Program Files\nodejs;C:\Users\liuzhana\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\liuzhana\AppData\Local\Yarn\bin;C:\Users\yangsmc\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Users\liuzhana\AppData\Roaming\npm;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
9 verbose lifecycle boogoohr@3.0.0~start: CWD: C:\yt-program\自助webpack4
10 silly lifecycle boogoohr@3.0.0~start: Args: [
10 silly lifecycle   '/d /s /c',
10 silly lifecycle   'webpack-dev-server --config=webpack.config.development.js --mode development'
10 silly lifecycle ]
11 silly lifecycle boogoohr@3.0.0~start: Returned: code: 2  signal: null
12 info lifecycle boogoohr@3.0.0~start: Failed to exec start script
13 verbose stack Error: boogoohr@3.0.0 start: `webpack-dev-server --config=webpack.config.development.js --mode development`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\yangsmc\AppData\Roaming\nvm\v12.22.0\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\yangsmc\AppData\Roaming\nvm\v12.22.0\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1022:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
14 verbose pkgid boogoohr@3.0.0
15 verbose cwd C:\yt-program\自助webpack4
16 verbose Windows_NT 6.1.7601
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v12.22.7
19 verbose npm  v6.14.15
20 error code ELIFECYCLE
21 error errno 2
22 error boogoohr@3.0.0 start: `webpack-dev-server --config=webpack.config.development.js --mode development`
22 error Exit status 2
23 error Failed at the boogoohr@3.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

忘记解决方式了

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.- options has an unknown property 'contentBase'. These properties are valid:object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

webpack-cli这个版本devServer中没有这个contentBase属性。

devServer: {
// contentBase: resolve(__dirname, "build"),
static:resolve(__dirname, "build"),
}

./src/index.js
Module build failed (from ./node_modules/_babel-loader@8.2.5@babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

babel-loader版本高8.2.5降为8.0.0，.babelrc.js文件presets中加入@babel/preset-env

/src/routes/Contract/ContractFile/file.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

忘记配置pdf文件规则，{ test: /\.pdf$/i, use: 'file-loader', },

./src/routes/Attendance/vacationDetail/index.less
Module build failed (from ./node_modules/_mini-css-extract-plugin@0.4.5@mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './@/assets/font/UnidreamLED.ttf' in 'C:\yt-program\自助webpack4\src\routes\Attendance\vacationDetail'

mini-css-extract-plugin版本低

chunk styles [mini-css-extract-plugin]
Conflicting order between:* css ./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js??ref--7-1!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--7-2!./src/components/MultipleLov/index.less* css ./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js??ref--7-1!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--7-

项目中引入相同css样式的组件，引入顺序不一致。需要在mini-css-extract-plugin加入ignoreOrder:true。具体含义参考mini-css-extract-plugin - npm

[webpack-cli] TypeError: Invalid value used in weak setat WeakSet.add (<anonymous>)at MiniCssExtractPlugin.apply (C:\yt-program\自助webpack4\node_modules\_mini-css-extract-plugin@2.6.0@mini-css-extract-plugin\dist\index.js:640:18)at WebpackCLI.webpack (C:\yt-program\自助webpack4\node_modules\_webpack@4.46.0@webpack\lib\webpack.js:51:13)at WebpackCLI.createCompiler (C:\yt-program\自助webpack4\node_modules\_webpack-cli@4.9.2@webpack-cli\lib\webpack-cli.js:2193:23)at async Command.<anonymous> (C:\yt-program\自助webpack4\node_modules\_@webpack-cli_serve@1.6.1@@webpack-cli\serve\lib\index.js:106:30)at async Promise.all (index 1)at async Command.<anonymous> (C:\yt-program\自助webpack4\node_modules\_webpack-cli@4.9.2@webpack-cli\lib\webpack-cli.js:1674:7)

mini-css-extract-plugin依赖版本有问题我最终用的时0.9.0

Module build failed (from ./node_modules/_mini-css-extract-plugin@1.3.6@mini-css-extract-plugin/dist/loader.js):
ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.- options has an unknown property 'modifyVars'. These properties are valid:object { publicPath?, esModule?, modules? }at validate (C:\yt-program\自助webpack4\node_modules\_schema-utils@3.1.1@schema-utils\dist\validate.js:105:11)at Object.pitch (C:\yt-program\自助webpack4\node_modules\_mini-css-extract-plugin@1.3.6@mini-css-extract-plugin\dist\loader.js:53:29)

mini-css-extract-plugin依赖这个版本没有modifyVars这个属性，看过版本说明之后才知道高版本移除这个属性了，1.3.6降为0.9.0，成功解决。

pre-commit:
pre-commit: We've failed to pass the specified git pre-commit hooks as the `precommit`
pre-commit: hook returned an exit code (1). If you're feeling adventurous you can
pre-commit: skip the git pre-commit hooks by adding the following flags to your commit:
pre-commit:
pre-commit:   git commit -n (or --no-verify)
pre-commit:
pre-commit: This is ill-advised since the commit is broken.

代码规范检测不过，删除根目录下.git/hooks的pre-commit文件。

ERROR in ./node_modules/_slick-carousel@1.8.1@slick-carousel/slick/slick-theme.css
Module build failed (from ./node_modules/_mini-css-extract-plugin@0.9.0@mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)at handleParseError (C:\yt-program\自助webpack4\node_modules\_webpack@4.46.0@webpack\lib\NormalModule.js:469:19)at C:\yt-program\自助webpack4\node_modules\_webpack@4.46.0@webpack\lib\NormalModule.js:503:5at C:\yt-program\自助webpack4\node_modules\_webpack@4.46.0@webpack\lib\NormalModule.js:358:12at C:\yt-program\自助webpack4\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:373:3at iterateNormalLoaders (C:\yt-program\自助webpack4\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:214:10)at Array.<anonymous> (C:\yt-program\自助webpack4\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:205:4)at Storage.finished (C:\yt-program\自助webpack4\node_modules\_enhanced-resolve@4.5.0@enhanced-resolve\lib\CachedInputFileSystem.js:55:16)at C:\yt-program\自助webpack4\node_modules\_enhanced-resolve@4.5.0@enhanced-resolve\lib\CachedInputFileSystem.js:91:9at C:\yt-program\自助webpack4\node_modules\_graceful-fs@4.2.10@graceful-fs\graceful-fs.js:123:16at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)@ ./src/routes/Vacation/VacationCharts.js 50:0-46@ ./src/routes/Vacation/MyVacation.js@ ./src/common/router.js@ ./src/router.js@ ./src/index.jswebpack.config.production.js中rules的css配置不对，改为{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1, }, }, 'postcss-loader', ], },

Unhandled promise rejection Error: Loading chunk 144 failed.页面白屏

webpack.config.production.js中的output.publicPath:'./'改为’/‘，就好了。

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\yt-
program\自助webpack4\node_modules\_chalk@5.0.1@chalk\source\index.js
require() of ES modules is not supported.
require() of C:\yt-program\自助webpack4\node_modules\_chalk@5.0.1@chalk\source\i
ndex.js from C:\yt-program\自助webpack4\webpack.config.production.js is an ES mo
dule file as it is a .js file whose nearest parent package.json contains "type":"module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(
), or remove "type": "module" from C:\yt-program\自助webpack4\node_modules\_chal
k@5.0.1@chalk\package.json.

chalk依赖版本过高，造成es6无法解析， 5.0.1降到4.0.0，成功修复问题。

发到服务器，点开部分页面，控制台报React is not defined

因为部分组件缺少了react依赖，可以在webpack.config.js的plugins配置插件

new webpack.ProvidePlugin({ // 根据上下文，在需要依赖React处，自动引入"React": "react",
})

@connect装饰器报错

HOC 的装饰器写法，需要配置 babel 支持。现在 webpack 一般都不直接在自身配置文件里面设置 babel 了，而是将 babel 的配置信息抽出来放到.babelrc内以 JSON 格式维护，在plugins内加入下面这段即可：

["@babel/plugin-proposal-decorators", { "legacy": true }],

最后的配置文件

package.json

{"name": "boogoohr","version": "3.0.0","description": "An out-of-box UI solution for enterprise applications","private": true,"scripts": {"start": "webpack-dev-server --config=webpack.config.development.js --mode development","build": "cross-env NODE_ENV=production webpack --config=webpack.config.production.js --mode production","webpack": "webpack --version"},"dependencies": {"@antv/data-set": "^0.8.0","@babel/polyfill": "^7.0.0-beta.36","@babel/runtime-corejs2": "^7.0.0","@balkangraph/orgchart.js": "^7.1.2","antd": "^3.14.0","axios": "^0.18.0","bizcharts": "^3.1.10","bizcharts-plugin-slider": "^2.0.1","classnames": "^2.2.5","dragm": "0.0.5","dva": "^2.2.3","dva-loading": "^2.0.3","echarts": "^4.2.0-rc.2","enquire-js": "^0.2.1","event-emitter": "^0.3.5","history": "^4.10.1","jsencrypt": "^3.0.0-rc.1","lodash": "^4.17.10","lodash-decorators": "^6.0.0","moment": "^2.19.3","number-precision": "^1.5.2","numeral": "^2.0.6","omit.js": "^1.0.0","path-to-regexp": "^2.1.0","postcss-loader": "^4.0.0","prop-types": "^15.5.10","qrcode.react": "^1.0.0","qs": "^6.5.0","querystring": "^0.2.0","rc-calendar": "^9.7.4","rc-drawer": "^1.2.0","react": "16.14.0","react-addons-pure-render-mixin": "^15.6.2","react-color": "^2.14.1","react-container-query": "^0.11.0","react-countup": "^4.3.3","react-cropper": "^1.0.1","react-document-title": "^2.0.3","react-dom": "^16.4.1","react-draggable-tags": "^1.0.6","react-fittext": "^1.0.0","react-intl": "^2.4.0","react-intl-universal": "^1.12.1","react-pdf": "^3.0.5","react-router-piwik": "^0.0.4","react-slick": "^0.23.2","react-watermark-module": "^1.2.0","react.eval": "^1.4.14","rollbar": "^2.3.4","screenfull": "^3.3.2","setprototypeof": "^1.1.0","slick-carousel": "^1.8.1","sockjs-client": "^1.6.1","thread-loader": "^3.0.4","url-polyfill": "^1.0.10","uuid": "^8.1.0"},"devDependencies": {"@babel/core": "^7.0.0","@babel/plugin-proposal-class-properties": "^7.0.0","@babel/plugin-proposal-decorators": "^7.0.0","@babel/plugin-proposal-do-expressions": "^7.0.0","@babel/plugin-proposal-export-default-from": "^7.0.0","@babel/plugin-proposal-export-namespace-from": "^7.0.0","@babel/plugin-proposal-function-bind": "^7.0.0","@babel/plugin-proposal-function-sent": "^7.0.0","@babel/plugin-proposal-json-strings": "^7.0.0","@babel/plugin-proposal-logical-assignment-operators": "^7.0.0","@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0","@babel/plugin-proposal-numeric-separator": "^7.0.0","@babel/plugin-proposal-optional-chaining": "^7.0.0","@babel/plugin-proposal-pipeline-operator": "^7.0.0","@babel/plugin-proposal-throw-expressions": "^7.0.0","@babel/plugin-syntax-dynamic-import": "^7.0.0","@babel/plugin-syntax-import-meta": "^7.0.0","@babel/plugin-transform-runtime": "^7.0.0","@babel/preset-env": "^7.0.0","@babel/preset-react": "^7.0.0","@nodelib/fs.scandir": "^2.1.5","@nodelib/fs.walk": "^1.2.8","@webassemblyjs/ast": "^1.3.1","@webassemblyjs/wasm-edit": "^1.3.1","acorn": "^6.1.1","add-asset-html-webpack-plugin": "^3.1.3","address": "^1.0.3","antd-theme-generator": "^1.2.11","antd-theme-webpack-plugin": "1.1.5","atool-build": "^0.9.3","atool-test-mocha": "^0.1.4","babel-eslint": "^8.2.3","babel-loader": "^8.0.0","babel-plugin-dva-hmr": "^0.4.1","babel-plugin-import": "^1.7.0","babel-plugin-module-resolver": "^3.1.1","babel-plugin-transform-decorators-legacy": "^1.3.4","babel-plugin-transform-remove-console": "^6.9.2","babel-plugin-transform-runtime": "^6.8.0","babel-runtime": "^6.9.2","body-parser": "^1.18.3","chalk": "^4.0.0","clean-webpack-plugin": "^0.1.19","copy-webpack-plugin": "^4.5.1","cross-env": "^5.1.1","cross-port-killer": "^1.0.1","css-loader": "^2.1.1","cssnano": "^4.1.10","dora": "0.4.x","dora-plugin-webpack": "^0.8.1","enzyme": "^3.1.0","es5-imcompatible-versions": "^0.1.34","eslint": "^5.16.0","eslint-config-airbnb": "^17.1.0","eslint-config-prettier": "^2.9.0","eslint-plugin-babel": "^5.1.0","eslint-plugin-compat": "^2.2.0","eslint-plugin-import": "^2.17.3","eslint-plugin-jsx-a11y": "^6.0.3","eslint-plugin-markdown": "^1.0.0-beta.6","eslint-plugin-react": "^7.7.0","estraverse": "^4.2.0","expect": "^1.20.2","fastq": "^1.13.0","file-loader": "^1.1.11","filemanager-webpack-plugin": "^7.0.0","friendly-errors-webpack-plugin": "^1.7.0","gh-pages": "^1.0.0","happypack": "^5.0.0-beta.4","html-webpack-plugin": "^4.5.0","husky": "^8.0.1","keymaster": "^1.6.2","less": "^3.0.4","less-loader": "^4.1.0","lint-staged": "^7.2.0","mini-css-extract-plugin": "^0.9.0","mockjs": "^1.0.1-beta3","open-browser-webpack-plugin": "0.0.5","optimize-css-assets-webpack-plugin": "^5.0.1","pre-commit": "^1.2.2","prettier": "1.13.5","pro-download": "^1.0.1","progress-bar-webpack-plugin": "^1.12.1","react-loadable": "^5.4.0","react-pdf-js": "^4.0.0-alpha.6","redbox-react": "^1.5.0","redux-devtools": "^3.4.1","redux-devtools-dock-monitor": "^1.1.3","redux-devtools-log-monitor": "^1.4.0","regenerator-runtime": "^0.12.0","sass-loader": "^7.0.1","serve-index": "^1.9.1","speed-measure-webpack-plugin": "^1.5.0","string-replace-loader": "^2.1.1","style-loader": "^2.0.0","stylelint": "^9.2.1","stylelint-config-prettier": "^3.0.4","stylelint-config-standard": "^18.0.0","type-is": "^1.6.15","uglifyjs-webpack-plugin": "^1.2.5","url-loader": "^1.0.1","webpack": "^4.33.0","webpack-bundle-analyzer": "^4.5.0","webpack-cli": "^4.9.1","webpack-dev-server": "^4.9.2","webpack-manifest-plugin": "^2.0.4"},"optionalDependencies": {"puppeteer": "^1.4.0"},"pre-commit": ["precommit"],"lint-staged": {"**/*.{js,jsx,less}": ["prettier --write","git add"],"**/*.{js,jsx}": "npm run lint-staged:js","**/*.less": "stylelint --syntax less"},"engines": {"node": ">=8.0.0"},"jest": {"verbose": true,"testURL": "http://localhost"},"browserslist": ["> 1%","last 2 versions","not ie <= 10"],"entry": {"index": "src/index.ejs"}
}

webpack.config.development.js

/* eslint-disable */
const webpack = require("webpack");
const path = require("path");
const chalk = require("chalk");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var ManifestPlugin = require("webpack-manifest-plugin");
const theme = require("./src/theme");
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');module.exports = {entry: path.resolve(__dirname, "src", "index.js"),devServer: {// contentBase: path.resolve(__dirname, 'dist'),host: "0.0.0.0",port: 8080,open: false,hot: true,// quiet: true,historyApiFallback: true,// overlay: {//   errors: true// },// stats: {//   children: false,//   chunks: false,//   assets: false,//   modules: false// },proxy: {},},output: {filename: "[name].js",path: path.resolve(__dirname, "dist"),publicPath: "/",chunkFilename: "[name].async.js",library: "[name]_dll"},resolve: {alias: {components: path.resolve(__dirname, 'src/components/'),assets: path.resolve(__dirname, 'src/assets/'),'@': path.resolve(__dirname, 'src'),'uuid/v4': path.resolve(__dirname, 'src/utils/uuid_v4.js'),'@services': path.resolve(__dirname, 'src/services'),}},module: {rules: [{test: /\.pdf$/i,use: 'file-loader',},{test: /\.js$/,include: [path.resolve(__dirname, "src")],exclude: [],loader: "babel-loader?cacheDirectory",},{test: /\.css$/,use: [MiniCssExtractPlugin.loader,{loader: "css-loader",options: {importLoaders: 1}}]},{test: /\.less$/,use: [{loader: MiniCssExtractPlugin.loader,options: {hmr: true,// if hmr does not work, this is a forceful method.reloadAll: true,modifyVars: theme},},{loader: "css-loader",options: {sourceMap: true,importLoaders: 1,modules: true,localIdentName: "[name]_[local]-[hash:base64:5]"}},{loader: "less-loader",options: {sourceMap: true,javascriptEnabled: true,modifyVars: theme}}],exclude: /node_modules/},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,// { //css热更新失败//   loader: MiniCssExtractPlugin.loader,//   options: {//     hmr: process.env.NODE_ENV === 'development',//     roloadAll: true//   }// },{loader: "css-loader",options: {sourceMap: true,importLoaders: 1}},{loader: "less-loader",options: {sourceMap: true,javascriptEnabled: true,modifyVars: theme}}],exclude: /src/},{test: /\.(ttf|eot|svg|woff|woff2|png|svg|jpg|gif)$/,use: [{loader: "url-loader",options: {limit: 8192}}]}]},externals: {jquery: "jQuery"},node: {fs: "empty",module: "empty"},devtool: "source-map",optimization: {splitChunks: {cacheGroups: {styles: {name: "styles",test: /\.(css|less)/,chunks: "all",enforce: true}}}},plugins: [new OpenBrowserPlugin({url: 'http://localhost:8080/'}),new ProgressBarPlugin({width: 50, // 默认20，进度格⼦数量即每个代表进度数，如果是20，那么⼀格就是5。format: `${chalk.blue.bold("build") + chalk.yellow('[:bar] ') + chalk.green.bold(':percent') } (:elapsed秒)`,stream: process.stderr, // 默认stderr，输出流complete: "#", // 默认“=”，完成字符clear: false, // 默认true，完成时清除栏的选项renderThrottle: "", // 默认16，更新之间的最短时间（以毫秒为单位）callback() { // 进度条完成时调⽤的可选函数console.log(chalk.red.bold("完成"));},}),new FriendlyErrorsWebpackPlugin(),new MiniCssExtractPlugin({filename: "[name].css",ignoreOrder: true,}),new HtmlWebpackPlugin({template: path.resolve(__dirname, "src", "index.ejs"),filename: "index.html",hash: true}),new CleanWebpackPlugin(),new CopyWebpackPlugin([{from: path.resolve(__dirname, "public")}]),new webpack.HotModuleReplacementPlugin(),new ManifestPlugin(),new webpack.ProvidePlugin({ // React is not defined, 在需要的地方自动引入'React': 'react',}),]
};

webpack.config.production.js

const webpack = require('webpack');
const path = require('path');
const chalk = require("chalk");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HappyPack = require('happypack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const os = require('os');const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });const theme = require('./src/theme');module.exports = {mode: 'production',entry: './src/index.js',output: {filename: '[name].[chunkhash:8].js',path: path.resolve(__dirname, 'dist/dist'),publicPath: '/',chunkFilename: '[name].[chunkhash:8].async.js',},resolve: {alias: {components: path.resolve(__dirname, 'src/components/'),assets: path.resolve(__dirname, 'src/assets/'),'@': path.resolve(__dirname, 'src/'),'uuid/v4': path.resolve(__dirname, 'src/utils/uuid_v4.js'),'@services': path.resolve(__dirname, 'src/services'),},},module: {rules: [{test: /\.pdf$/i,use: 'file-loader',},{test: /\.js$/,include: [path.resolve(__dirname, 'src')],use: ['happypack/loader?id=babel'],},{test: /\.css$/,use: [MiniCssExtractPlugin.loader,{loader: 'css-loader',options: {importLoaders: 1,},},'postcss-loader',],},{test: /\.(less)$/,use: [MiniCssExtractPlugin.loader,{loader: 'css-loader',options: {importLoaders: 1,modules: true,localIdentName: '[name]_[local]-[hash:base64:5]',},},'postcss-loader',{loader: 'less-loader',options: {javascriptEnabled: true,modifyVars: theme,},},],exclude: /node_modules/,},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,{loader: 'css-loader',options: {importLoaders: 1,},},'postcss-loader',{loader: 'less-loader',options: {javascriptEnabled: true,modifyVars: theme,},},],exclude: /src/,},{test: /\.(ttf|eot|svg|woff|woff2|png|svg|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192,outputPath: './assets/',},},],},],},stats: {children: false,warningsFilter: warn => warn.indexOf('Conflicting order between:') > -1,},node: {fs: 'empty',module: 'empty',},optimization: {splitChunks: {cacheGroups: {styles: {name: 'styles',test: /\.(css|less)/,chunks: 'all',enforce: true,},commons: {name: 'commons',chunks: 'initial',minChunks: 2,},vendors: {name: 'vendors',test: /[\\/]node_modules[\\/]/,priority: -10,},},},runtimeChunk: true,},plugins: [new MiniCssExtractPlugin({filename: '[name].css',ignoreOrder: true,}),new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src', 'index.ejs'), // 模板filename: 'index.html',hash: true,showErrors: true,minify: false,}),new ProgressBarPlugin({width: 50, // 默认20，进度格⼦数量即每个代表进度数，如果是20，那么⼀格就是5。format: `${chalk.blue.bold("build") + chalk.yellow('[:bar] ') + chalk.green.bold(':percent') } (:elapsed秒)`,stream: process.stderr, // 默认stderr，输出流complete: "#", // 默认“=”，完成字符clear: false, // 默认true，完成时清除栏的选项renderThrottle: "", // 默认16，更新之间的最短时间（以毫秒为单位）callback() { // 进度条完成时调⽤的可选函数console.log(chalk.red.bold("完成"));},}),new CleanWebpackPlugin(["dist", "dist.zip"]),new CopyWebpackPlugin([{from: path.resolve(__dirname, 'public'),ignore: ['config.js'],},]),new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano'),cssProcessorOptions: { discardComments: { removeAll: true } },canPrint: true,}),new HappyPack({id: 'babel',loaders: ['babel-loader?cacheDirectory'],threadPool: happyThreadPool,}),new webpack.HashedModuleIdsPlugin(),new webpack.ProvidePlugin({ // React is not defined, 在需要的地方自动引入'React': 'react',}),new FileManagerPlugin({events: {onEnd: {archive: [{ source: 'dist', destination: 'dist.zip'}],},},}),],
};

roadhog迁移成webpack4问题整理相关推荐

stored outlines迁移成SQL执行计划基线
stored outline迁移 stored outline是对SQL语句的一组hint.hint指示优化器对SQL语句选择一个特定的执行计划.stored outline是一种遗留技术用于提供执行 ...
趁webpack5还没出，先升级成webpack4吧
上一次将webpack1升级到3,也仅是半年前,前端工具发展变化太快了,如今webpack4已经灰常稳定,传说性能提升非常高,值得升级. 一直用着的webpack3越来越慢,一分多钟的编译时间简直不 ...
迁移学习基础知识整理
目录基本概念迁移学习的价值与传统机器学习的对比迁移学习分类迁移学习解决的方法应用基本概念迁移学习研究如何把源域的知识迁移到目标域上. 相似性是核心,度量准则是重要手段. 领域(Doma ...
Java 最常见的 10000+ 面试题及答案整理：持续更新
Java面试题以及答案整理[最新版]Java高级面试题大全(2021版),发现网上很多Java面试题都没有答案,所以花了很长时间搜集,本套Java面试题大全,汇总了大量经典的Java程序员面试题以及答 ...
oracle向达梦迁移工作量,从Oracle安全移植到国产达梦数据库的DBA实践
随着我国对信息安全和自主可控技术的日益重视,国产数据库在党政机关.军队和大型央企等行业中得到了快速应用.达梦数据库(以下简称DM)是国内数据库行业领军企业--达梦推出的一款自主可控的高性能数据库产品. ...
mysql longtext db2_从 MySQL 或 PostgreSQL 迁移到 DB2 Express-C
从 MySQL 或 PostgreSQL 迁移到 DB2 Express-C 用三个简单步骤迁移到 DB2 Vikram Khatri, Nora Sokolof, 和 Manas Dadarkar ...
Oracle 迁移至Mysql
**吴海存,**10g / 11g / 12c OCM,Oracle Exadata / Golden Gate专家,曾于Amazon和Oracle公司担任全球业务资深DBA,目前供职于中国农业银行, ...
关于 CentOS 迁移龙蜥操作系统，这里有一份详细指南，请查收！
编者按:CentOS 8 已于 2021 年年底正式停止维护,龙蜥社区已上线「CentOS 停服专区」,为受 CentOS 停服影响的用户提供迁移方案及长期稳定支持.龙蜥操作系统(Anolis OS) ...
图像也能做情感迁移？罗切斯特大学团队提出计算机视觉新任务
点击上方,选择星标或置顶,不定期资源大放送! 阅读大概需要15分钟 Follow小博主,每天更新前沿干货计算机视觉领域中有很多任务,如目标检测.图像转换.风格迁移等,但你听说过「图像情感迁移」吗? ...

roadhog迁移成webpack4问题整理

roadhog迁移成webpack4问题整理相关推荐

最新文章

热门文章