Fix security vulnerability: Remove uglifyjs, use terser plugin (#327)

* Remove uglifyjs, use terser plugin

* fix css-loader config
This commit is contained in:
Mikhail Mikheev 2019-12-09 16:19:30 +04:00 committed by GitHub
parent 70fadd51ee
commit 8382907b80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 1767 additions and 1729 deletions

View File

@ -134,6 +134,7 @@ module.exports = {
loader: 'file-loader',
options: {
name: 'img/[hash].[ext]',
esModule: false
},
},
],

View File

@ -1,43 +1,44 @@
/*eslint-disable*/
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const autoprefixer = require('autoprefixer')
const cssmixins = require('postcss-mixins')
const cssvars = require('postcss-simple-vars')
const webpack = require('webpack')
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin
const autoprefixer = require("autoprefixer")
const cssmixins = require("postcss-mixins")
const cssvars = require("postcss-simple-vars")
const webpack = require("webpack")
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require("terser-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const ManifestPlugin = require("webpack-manifest-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const url = require('url')
const paths = require('./paths')
const getClientEnvironment = require('./env')
const url = require("url")
const paths = require("./paths")
const getClientEnvironment = require("./env")
const cssvariables = require(`${paths.appSrc}/theme/variables`)
const postcssPlugins = [
autoprefixer({
overrideBrowserslist: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9" // React doesn't support IE8 anyway
]
}),
cssmixins,
cssvars({
variables() {
return Object.assign({}, cssvariables)
},
silent: true,
}),
silent: true
})
]
function ensureSlash(path, needsSlash) {
const hasSlash = path.endsWith('/')
const hasSlash = path.endsWith("/")
if (hasSlash && !needsSlash) {
return path.substr(path, path.length - 1)
} else if (!hasSlash && needsSlash) {
@ -53,7 +54,7 @@ function ensureSlash(path, needsSlash) {
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
const homepagePath = require(paths.appPackageJson).homepage
// var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
const homepagePathname = '/'
const homepagePathname = "/"
// 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 = ensureSlash(homepagePathname, true)
@ -66,20 +67,20 @@ const env = getClientEnvironment(publicUrl)
// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
if (env['process.env'].NODE_ENV !== '"production"') {
throw new Error('Production builds must have NODE_ENV=production.')
if (env["process.env"].NODE_ENV !== '"production"') {
throw new Error("Production builds must have NODE_ENV=production.")
}
// 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',
mode: "production",
// Don't attempt to continue if there are any errors.
bail: true,
optimization: {
splitChunks: {
chunks: 'all',
chunks: "all"
/* https://stackoverflow.com/questions/48985780/webpack-4-create-vendor-chunk
cacheGroups: {
vendor: {
@ -92,31 +93,55 @@ module.exports = {
},
*/
},
minimizer: [new OptimizeCSSAssetsPlugin({})],
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
parse: {
ecma: 8
},
compress: {
ecma: 5,
warnings: false,
comparisons: false,
inline: 2,
},
mangle: {
safari10: true
},
output: {
ecma: 5,
comments: false,
ascii_only: true
}
}
}),
new OptimizeCSSAssetsPlugin({})
]
},
entry: [require.resolve('./polyfills'), paths.appIndexJs],
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',
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
},
resolve: {
modules: [paths.appSrc, 'node_modules', paths.appContracts],
modules: [paths.appSrc, "node_modules", paths.appContracts],
// 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
extensions: ['.js', '.json', '.jsx'],
extensions: [".js", ".json", ".jsx"],
alias: {
'~': paths.appSrc,
'#': paths.appContracts,
},
"~": paths.appSrc,
"#": paths.appContracts
}
},
module: {
@ -125,43 +150,44 @@ module.exports = {
test: /\.(js|jsx)$/,
include: paths.appSrc,
use: {
loader: 'babel-loader',
},
loader: "babel-loader"
}
},
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
},
modules: true
}
},
{
loader: 'postcss-loader',
loader: "postcss-loader",
options: {
sourceMap: true,
plugins: postcssPlugins,
},
},
],
plugins: postcssPlugins
}
}
]
},
{ test: /\.(woff|woff2)$/, loader: 'url-loader?limit=100000' },
{ test: /\.(woff|woff2)$/, loader: "url-loader?limit=100000" },
{
test: /\.(jpe?g|png|svg)$/i,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
loader: "file-loader",
options: {
name: 'img/[hash].[ext]',
},
},
],
},
],
name: "img/[hash].[ext]",
esModule: false
}
}
]
}
]
},
plugins: [
// Generates an `index.html` file with the <script> injected.
@ -178,8 +204,8 @@ module.exports = {
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
minifyURLs: true
}
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
@ -187,22 +213,22 @@ module.exports = {
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env),
new MiniCssExtractPlugin({
filename: 'static/css/[name].[hash:8].css',
allChunks: 'static/css/[id].[hash:8].css',
filename: "static/css/[name].[hash:8].css",
allChunks: "static/css/[id].[hash:8].css"
}),
// 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',
}),
fileName: "asset-manifest.json"
})
// new BundleAnalyzerPlugin()
],
// 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: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
fs: "empty",
net: "empty",
tls: "empty"
}
}

View File

@ -33,11 +33,11 @@
"dependencies": {
"@gnosis.pm/safe-contracts": "1.0.0",
"@gnosis.pm/util-contracts": "2.0.4",
"@material-ui/core": "4.7.0",
"@material-ui/core": "4.7.2",
"@material-ui/icons": "4.5.1",
"@portis/web3": "^2.0.0-beta.45",
"@testing-library/jest-dom": "4.2.4",
"@toruslabs/torus-embed": "0.2.6",
"@toruslabs/torus-embed": "0.2.9",
"@walletconnect/web3-provider": "^1.0.0-beta.37",
"@welldone-software/why-did-you-render": "3.3.9",
"axios": "0.19.0",
@ -59,6 +59,7 @@
"react-dom": "16.12.0",
"react-final-form": "6.3.3",
"react-final-form-listeners": "^1.0.2",
"react-ga": "^2.7.0",
"react-hot-loader": "4.12.18",
"react-qr-reader": "^2.2.1",
"react-redux": "7.1.3",
@ -71,12 +72,11 @@
"reselect": "^4.0.0",
"squarelink": "^1.1.3",
"web3": "1.2.4",
"web3connect": "^1.0.0-beta.23",
"react-ga": "^2.7.0"
"web3connect": "^1.0.0-beta.23"
},
"devDependencies": {
"@babel/cli": "7.7.4",
"@babel/core": "7.7.4",
"@babel/cli": "7.7.5",
"@babel/core": "7.7.5",
"@babel/plugin-proposal-class-properties": "7.7.4",
"@babel/plugin-proposal-decorators": "7.7.4",
"@babel/plugin-proposal-do-expressions": "7.7.4",
@ -88,7 +88,7 @@
"@babel/plugin-proposal-logical-assignment-operators": "7.7.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4",
"@babel/plugin-proposal-numeric-separator": "7.7.4",
"@babel/plugin-proposal-optional-chaining": "7.7.4",
"@babel/plugin-proposal-optional-chaining": "7.7.5",
"@babel/plugin-proposal-pipeline-operator": "7.7.4",
"@babel/plugin-proposal-throw-expressions": "7.7.4",
"@babel/plugin-syntax-dynamic-import": "7.7.4",
@ -96,16 +96,16 @@
"@babel/plugin-transform-member-expression-literals": "7.7.4",
"@babel/plugin-transform-property-literals": "7.7.4",
"@babel/polyfill": "7.7.0",
"@babel/preset-env": "7.7.4",
"@babel/preset-env": "7.7.6",
"@babel/preset-flow": "7.7.4",
"@babel/preset-react": "7.7.4",
"@sambego/storybook-state": "^1.3.6",
"@storybook/addon-actions": "5.2.6",
"@storybook/addon-knobs": "5.2.6",
"@storybook/addon-links": "5.2.6",
"@storybook/react": "5.2.6",
"@storybook/addon-actions": "5.2.8",
"@storybook/addon-knobs": "5.2.8",
"@storybook/addon-links": "5.2.8",
"@storybook/react": "5.2.8",
"@testing-library/react": "9.3.2",
"autoprefixer": "9.7.2",
"autoprefixer": "9.7.3",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "10.0.3",
"babel-jest": "24.9.0",
@ -115,19 +115,19 @@
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"css-loader": "3.2.0",
"css-loader": "3.2.1",
"detect-port": "^1.3.0",
"eslint": "5.16.0",
"eslint-config-airbnb": "18.0.1",
"eslint-plugin-flowtype": "4.5.2",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jest": "23.0.4",
"eslint-plugin-import": "2.19.1",
"eslint-plugin-jest": "23.1.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.16.0",
"eslint-plugin-react": "7.17.0",
"ethereumjs-abi": "0.6.8",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "4.3.0",
"flow-bin": "0.112.0",
"file-loader": "5.0.2",
"flow-bin": "0.113.0",
"fs-extra": "8.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
@ -143,12 +143,12 @@
"run-with-testrpc": "0.3.1",
"storybook-host": "5.1.0",
"storybook-router": "^0.3.4",
"style-loader": "1.0.0",
"truffle": "5.1.1",
"style-loader": "1.0.1",
"terser-webpack-plugin": "^2.2.2",
"truffle": "5.1.3",
"truffle-contract": "4.0.31",
"truffle-solidity-loader": "0.1.32",
"uglifyjs-webpack-plugin": "2.2.0",
"url-loader": "2.3.0",
"url-loader": "3.0.0",
"webpack": "4.41.2",
"webpack-bundle-analyzer": "3.6.0",
"webpack-cli": "3.3.10",

3293
yarn.lock

File diff suppressed because it is too large Load Diff