我正在研究一个udemy课程项目，并将我的软件包和模块升级到最新版本，包括webpack4。但是，在运行npm run-build时，我的终端出现以下错误。
我设法使我的开发环境运行良好。但是，当我尝试运行NPM run build时，出现以下错误。
Error: webpack.optimize.UglifyJsPlugin has been removed,please use config.optimization.minimize instead.
我尝试在我的webpack.config.prod.js文件的Module Exports中添加最小化器，并按照许多论坛的建议安装'uglifyjs-webpack-plugin'，但我仍然遇到相同的错误。
Package.json
"name": "Burger-Builder-App","version": "0.1.0","private": true,"dependencies": {
"autoprefixer": "9.7.1","axios": "^0.19.0","babel-core": "6.26.3","babel-eslint": "10.0.3","babel-jest": "24.9.0","babel-loader": "8.0.6","babel-preset-react-app": "^9.0.2","babel-runtime": "6.26.0","case-sensitive-paths-webpack-plugin": "2.2.0","chalk": "2.4.2","css-loader": "^2.1.1","dotenv": "8.2.0","enzyme": "^3.10.0","enzyme-adapter-react-16": "^1.15.1","eslint": "6.6.0","eslint-config-react-app": "^5.0.2","eslint-loader": "3.0.2","eslint-plugin-flowtype": "4.3.0","eslint-plugin-import": "2.18.2","eslint-plugin-jsx-a11y": "6.2.3","eslint-plugin-react": "7.16.0","eslint-plugin-react-hooks": "^2.2.0","extract-text-webpack-plugin": "3.0.2","file-loader": "4.2.0","fs-extra": "8.1.0","html-webpack-plugin": "^4.0.0-beta.8","jest": "24.9.0","object-assign": "4.1.1","postcss-flexbugs-fixes": "4.1.0","postcss-loader": "3.0.0","promise": "8.0.3","prop-types": "^15.7.2","react": "^16.11.0","react-dev-utils": "^9.1.0","react-dom": "^16.11.0","react-redux": "^7.1.3","react-router-dom": "^5.1.2","react-test-render": "^1.1.2","redux": "^4.0.4","redux-thunk": "^2.3.0","style-loader": "1.0.0","sw-precache-webpack-plugin": "0.11.5","uglifyjs-webpack-plugin": "^2.2.0","url-loader": "2.2.0","webpack": "4.41.2","webpack-dev-server": "3.9.0","webpack-manifest-plugin": "2.2.0","whatwg-fetch": "3.0.0"
},"scripts": {
"start": "node scripts/start.js","build": "node scripts/build.js","test": "node scripts/test.js --env=jsdom"
},"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],"setupFiles": [
"<rootDir>/config/polyfills.js"
],"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)","<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],"testEnvironment": "node","testURL": "http://localhost","transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest","^.+\\.css$": "<rootDir>/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],"moduleNameMapper": {
"^react-native$": "react-native-web"
},"moduleFileExtensions": [
"web.js","js","json","web.jsx","jsx","node"
]
},"babel": {
"presets": [
"react-app"
]
},"eslintConfig": {
"extends": "react-app"
}
}
Webpackdevserver.config.js
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const config = require('./webpack.config.dev');
const paths = require('./paths');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';
module.exports = function(proxy,allowedHost) {
return {
// Webpackdevserver 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
// https://github.com/webpack/webpack-dev-server/issues/887
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
// However,it made several existing use cases such as development in cloud
// environment or subdomains in development significantly more complicated:
// https://github.com/facebookincubator/create-react-app/issues/2271
// https://github.com/facebookincubator/create-react-app/issues/2233
// While we're investigating better solutions,for now we will take a
// compromise. Since our WDS configuration only serves files in the `public`
// folder we won't consider accessing them a vulnerability. However,if you
// use the `proxy` feature,it gets more dangerous because it can expose
// remote code execution vulnerabilities in backends like Django and Rails.
// So we will disable the host check normally,but enable it if you have
// specified the `proxy` setting. Finally,we let you override it if you
// really know what you're doing with a special environment variable.
disableHostCheck:
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',// Enable gzip compression of generated files.
compress: true,// Silence Webpackdevserver's own logs since they're generally not useful.
// It will still show compile warnings and errors with this setting.
clientLogLevel: 'none',// By default Webpackdevserver serves physical files from current directory
// in addition to all the virtual build products that it serves from memory.
// This is confusing because those files won’t automatically be available in
// production build folder unless we copy them. However,copying the whole
// project directory is dangerous because we may expose sensitive files.
// Instead,we establish a convention that only files in `public` directory
// get served. Our build script will copy `public` into the `build` folder.
// In `index.html`,you can get URL of `public` folder with %PUBLIC_URL%:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In JavaScript code,you can access it with `process.env.PUBLIC_URL`.
// Note that we only recommend to use `public` folder as an escape hatch
// for files like `favicon.ico`,`manifest.json`,and libraries that are
// for some reason broken when imported through Webpack. If you just want to
// use an image,put it in `src` and `import` it from JavaScript instead.
contentBase: paths.appPublic,// By default files from `contentBase` will not trigger a page reload.
watchContentBase: true,// Enable hot reloading server. It will provide /sockjs-node/ endpoint
// for the Webpackdevserver client so it can learn when the files were
// updated. The Webpackdevserver client is included as an entry point
// in the Webpack development configuration. Note that only changes
// to CSS are currently hot reloaded. JS changes will refresh the browser.
hot: true,// It is important to tell Webpackdevserver to use the same "root" path
// as we specified in the config. In development,we always serve from /.
publicPath: config.output.publicPath,// Webpackdevserver is noisy by default so we emit custom message instead
// by listening to the compiler events with `compiler.plugin` calls above.
quiet: true,// Reportedly,this avoids CPU overload on some systems.
// https://github.com/facebookincubator/create-react-app/issues/293
watchOptions: {
ignored: /node_modules/,},// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === 'https',host: host,overlay: false,historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebookincubator/create-react-app/issues/387.
disableDotRule: true,public: allowedHost,proxy,setup(app) {
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
app.use(noopServiceWorkerMiddleware());
},};
};
webpack.config.prod.js
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-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 paths = require('./paths');
const getclientEnvironment = require('./env');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash,or the file assets will get an incorrect path.
const publicPath = paths.servedPath;
// Some apps do not use client-side routing with pushState.
// For these,"homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// `publicUrl` is just like `publicPath`,but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = publicPath.slice(0,-1);
// Get environment variables to inject into our app.
const env = getclientEnvironment(publicUrl);
// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
throw new Error('Production builds must have NODE_ENV=production.');
}
// Note: defined here because it will be used more than once.
const cssFilename = 'static/css/[name].[contenthash:8].css';
// ExtractTextPlugin expects the build output to be flat.
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
// However,our output is structured with css,js and media folders.
// To have this structure working with relative paths,we have to use custom options.
const extractTextPluginOptions = shouldUseRelativeAssetPaths
? // Making sure that the publicPath goes back to to build folder.
{ publicPath: Array(cssFilename.split('/').length).join('../') }
: {};
// This is the production configuration.
// 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',optimization: {
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,parallel: true,uglifyOptions: {
compress: false,ecma: 6,mangle: true
},sourceMap: true
})
]
},// Don't attempt to continue if there are any errors.
bail: true,// We generate sourcemaps in production. This is slow but gives good results.
// You can exclude the *.map files from the build during deployment.
devtool: shouldUseSourceMap ? 'source-map' : false,// In production,we only want to load the polyfills and the app code.
entry: [require.resolve('./polyfills'),paths.appIndexJs],output: {
// The build folder.
path: paths.appBuild,// Generated JS file names (with nested folders).
// There will be one main bundle,and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: 'static/js/[name].[chunkhash:8].js',chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath,// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path
.relative(paths.appSrc,info.absoluteResourcePath)
.replace(/\\/g,'/'),resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
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)
),// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools,although we do not recommend using it,see:
// https://github.com/facebookincubator/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: ['.web.js','.js','.json','.web.jsx','.jsx'],alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this,we prevent you from importing files out of src/ -- if you'd like to,// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled,as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc,[paths.appPackageJson]),],module: {
strictExportPresence: true,rules: [
// TODO: Disable require.ensure as it's not a standard language feature.
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
// { parser: { requireEnsure: false } },// First,run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx)$/,enforce: 'pre',use: [
{
options: {
formatter: eslintFormatter,eslintPath: require.resolve('eslint'),loader: require.resolve('eslint-loader'),include: paths.appSrc,{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
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)$/,loader: require.resolve('babel-loader'),options: {
compact: true,// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader normally turns CSS into JS modules injecting <style>,// but unlike in development configuration,we do something different.
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
// (second argument),then grabs the result CSS and puts it into a
// separate file in our build process. This way we actually ship
// a single CSS file in production instead of JS code injecting <style>
// tags. If you use code splitting,however,any async bundles will still
// use the "style" loader inside the async code so CSS from them won't be
// 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,modules: true,localIdentName: '[name]__[local]__[hash:base64:5]'
},{
loader: require.resolve('postcss-loader'),options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
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',}),extractTextPluginOptions
)
),// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},// "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset,you get its filename.
// This loader don't uses a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/,/\.html$/,/\.json$/],options: {
name: 'static/media/[name].[hash:8].[ext]',// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html,e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production,it will be an empty string unless you specify "homepage"
// in `package.json`,in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(HtmlWebpackPlugin,env.raw),// Generates an `index.html` file with the <script> injected.
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,// Makes some environment variables available to the JS code,for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),// Minify the code.
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
new ExtractTextPlugin({
filename: cssFilename,// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',// Generate a service worker script that will precache,and keep up to date,// the HTML & assets that are part of the Webpack build.
new SWPrecacheWebpackPlugin({
// By default,a cache-busting query parameter is appended to requests
// used to populate the caches,to ensure the responses are fresh.
// If a URL is already hashed by Webpack,then there is no concern
// about it being stale,and the cache-busting can be skipped.
dontCacheBustUrlsMatching: /\.\w{8}\./,filename: 'service-worker.js',logger(message) {
if (message.indexOf('Total precache size is') === 0) {
// This message occurs for every build and is a bit too noisy.
return;
}
if (message.indexOf('Skipping static resource') === 0) {
// This message obscures real errors so we ignore it.
// https://github.com/facebookincubator/create-react-app/issues/2612
return;
}
console.log(message);
},minify: true,// For unknown URLs,fallback to the index page
navigateFallback: publicUrl + '/index.html',// Ignores URLs starting from /__ (useful for Firebase):
// https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
navigateFallbackWhitelist: [/^(?!\/__).*/],// Don't precache sourcemaps (they're large) and build asset manifest:
staticfileGlobsIgnorePatterns: [/\.map$/,/asset-manifest\.json$/],// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
dgram: 'empty',fs: 'empty',net: 'empty',tls: 'empty',child_process: 'empty',};
不太确定如何解决webpack的新问题。任何建议将不胜感激。