I am trying to Build the React application using webpack(3.5.5). But the build is getting failed. tried building with adding UglifyJSPlugin by installing the npm package, But of no use. Constantly getting the following errors.
Unexpected token: name (p) [16.d5eb16ccc8c5201b1051.chunk.js:45,2216019]
ERROR in 24.5eae72236fb47c9d684c.chunk.js from UglifyJs
Name expected [24.5eae72236fb47c9d684c.chunk.js:203,79243]
ERROR in 25.073414cb2e702698d047.chunk.js from UglifyJs
Unexpected token: operator (>) [25.073414cb2e702698d047.chunk.js:11,739624]
ERROR in 29.789e2b12c49f601335f9.chunk.js from UglifyJs
Name expected [29.789e2b12c49f601335f9.chunk.js:35,9332]
ERROR in 90.79975be9deb9e4227618.chunk.js from UglifyJs
Invalid assignment [90.79975be9deb9e4227618.chunk.js:22,98334]
here are my webpack config files
webpack.prod.babel.js
// Important modules this config uses
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OfflinePlugin = require('offline-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = require('./webpack.base.babel')({
// In production, we skip all hot-reloading stuff
entry: [
path.join(process.cwd(), 'app/app.js'),
],
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].chunk.js',
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true,
}),
new UglifyJSPlugin(), //minify everything
new webpack.EnvironmentPlugin(['REACT_APP_ENVIRONMENT','REACT_APP_SUB_DOMAIN']),
// Minify and optimize the index.html
new HtmlWebpackPlugin({
template: 'app/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
inject: true,
})
],
performance: {
assetFilter: (assetFilename) => !(/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename)),
},
});
webpack.base.babel.js
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
process.noDeprecation = true;
module.exports = (options) => ({
// mode: options.mode,
entry: options.entry,
output: Object.assign({ // Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
}, options.output), // Merge with env dependent settings
module: {
rules: [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
noquotes: true,
},
},
],
},
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
enabled: false,
// NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// Try enabling it in your environment by switching the config to:
// enabled: true,
// progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
plugins: options.plugins.concat([
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch',
}),
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
// new webpack.NamedModulesPlugin(),
]),
// stats: 'verbose',
resolve: {
modules: ['app', 'node_modules'],
extensions: [
'.js',
'.jsx',
'.react.js',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
node: {
fs: 'empty'
},
performance: options.performance || {},
});
babel config:
"babel": {
"plugins": [
"styled-components"
],
"presets": [
[
"env",
{
"modules": false
}
],
"react",
"stage-0",
"es2015"
],
"env": {
"production": {
"only": [
"app"
],
"plugins": [
"transform-react-remove-prop-types",
"transform-react-constant-elements",
"transform-react-inline-elements",
"transform-class-properties"
],
"presets": [
"babili"
]
},
"test": {
"plugins": [
"transform-es2015-modules-commonjs",
"dynamic-import-node"
]
}
}
},
package.json
webpack: "3.5.5", webpack-dev-middleware: "1.11.0", webpack-hot-middleware: "2.18.0", "babili": "^0.1.4", "uglifyjs-webpack-plugin": "1.3.0", "babel-cli": "6.18.0", "babel-core": "6.21.0", "babel-eslint": "7.1.1", "babel-loader": "6.2.10", "babel-plugin-dynamic-import-node": "1.0.0", "babel-plugin-react-intl": "2.2.0", "babel-plugin-react-transform": "2.0.2", "babel-plugin-transform-class-properties": "6.23.0", "babel-plugin-transform-es2015-modules-commonjs": "6.18.0", "babel-plugin-transform-react-constant-elements": "6.9.1", "babel-plugin-transform-react-inline-elements": "6.8.0", "babel-plugin-transform-react-remove-prop-types": "0.2.11"
Thanks in advance.