Browse Source

Update webpack to v4 (#211)

* Update webpack and related

* Update make build command

* Set performance hints to warning

* Increase entrypoint size limit

* Increase maxAssetSize
main
Marian Steinbach 1 year ago committed by GitHub
parent
commit
64e49e636e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 13
      config/webpack.config.dev.js
  2. 93
      config/webpack.config.prod.js
  3. 2
      config/webpackDevServer.config.js
  4. 8
      package.json
  5. 2
      scripts/start.js
  6. 2079
      yarn.lock

13
config/webpack.config.dev.js

@ -1,4 +1,4 @@
const autoprefixer = require('autoprefixer');
//const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
@ -50,6 +50,7 @@ module.exports = {
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
],
mode: 'development',
output: {
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
@ -195,16 +196,16 @@ module.exports = {
],
},
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 development, this will be an empty string.
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
// 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 development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),
// Makes some environment variables available to the JS code, for example:

93
config/webpack.config.prod.js

@ -1,10 +1,10 @@
'use strict';
const autoprefixer = require('autoprefixer');
//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 MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
@ -36,15 +36,6 @@ if (env.stringified['process.env'].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.
@ -56,6 +47,10 @@ module.exports = {
devtool: shouldUseSourceMap ? 'source-map' : false,
// In production, we only want to load the polyfills and the app code.
entry: [require.resolve('./polyfills'), paths.appIndexJs],
mode: 'production',
optimization: {
minimize: true,
},
output: {
// The build folder.
path: paths.appBuild,
@ -72,6 +67,11 @@ module.exports = {
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/'),
},
performance: {
hints: 'warning',
maxEntrypointSize: 1000000,
maxAssetSize: 1000000,
},
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"
@ -106,10 +106,6 @@ module.exports = {
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.
{
@ -166,36 +162,7 @@ module.exports = {
// in the main CSS file.
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
options: {}
}
},
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
use: [{loader: MiniCssExtractPlugin.loader},'css-loader'],
},
// "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
@ -219,12 +186,6 @@ module.exports = {
],
},
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(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
@ -242,34 +203,18 @@ module.exports = {
minifyURLs: true,
},
}),
// 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),
// 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.
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebookincubator/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
},
mangle: {
safari10: true,
},
output: {
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
},
sourceMap: shouldUseSourceMap,
}),
// 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

2
config/webpackDevServer.config.js

@ -89,7 +89,7 @@ module.exports = function(proxy, allowedHost) {
// 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());
app.use(noopServiceWorkerMiddleware('/'));
},
};
};

8
package.json

@ -22,7 +22,7 @@
"punycode": "^2.1.1",
"raf": "^3.4.1",
"react": "^16.8.5",
"react-dev-utils": "^5.0.3",
"react-dev-utils": "11.0.4",
"react-dom": "^16.8.5",
"react-infinite-scroller": "^1.2.4",
"react-router-dom": "^5.1.2",
@ -49,13 +49,13 @@
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "^7.19.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "2.0.0",
"html-webpack-plugin": "3.2.0",
"html-webpack-plugin": "4.5.2",
"js-yaml": "^3.13.1",
"mini-css-extract-plugin": "1.4.0",
"postcss-loader": "3.0.0",
"url-loader": "1.1.2",
"webpack": "3.8.1",
"webpack": "4.46.0",
"webpack-dev-server": "3.10.3",
"webpack-manifest-plugin": "2.2.0"
},

2
scripts/start.js

@ -70,7 +70,7 @@ choosePort(HOST, DEFAULT_PORT)
const appName = require(paths.appPackageJson).name;
const urls = prepareUrls(protocol, HOST, port);
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
const compiler = createCompiler({webpack, config, appName, urls, useYarn});
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);

2079
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save