Webpack 2 randomly fails in different files until I save them - reactjs

The error I get once and once again is this:
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
The same happened in three different machines, always with different files that fail.
When I trace the file that is breaking and I open it and save it webpack re compiles and the error disappears. I can trace it because in the call stack I find this where it fails:
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_base_icon__ = __webpack_require__(567);
In this case I know that is the base_icon.jsx file. It happens randomly with different files. There is some cache or something like that in webpack 2 that is producing this weird behavior?
This same project in Webpack 1 worked perfectly. This problem has appear since we migrated to Webpack 2.
My webpack configuration is the following:
var indexFile = '/index.html'
if (PROJECT) {
indexFile = '/projects/'+PROJECT+'/'+PROJECT+'_index.html'
}
const common = {
entry: {
main: ['babel-polyfill', path.join(__dirname, 'src/main.jsx')],
themes: ['babel-polyfill', path.join(__dirname, 'src/projects/themes/themes_main.jsx')],
common: [
//'bodymovin',
path.join(__dirname, 'src/animations/bodymovin'),
'check-types',
'classnames',
'moment',
'qs',
'react',
'react-addons-css-transition-group',
'react-addons-shallow-compare',
'react-addons-transition-group',
'react-css-modules',
'react-date-picker',
'react-dom',
'react-dropzone',
'react-redux',
'react-router',
'react-router-redux',
'redux',
'redux-form',
'redux-infinite-scroll',
'redux-saga',
'reselect',
'superagent',
'superagent-defaults',
'superagent-promise-plugin',
'react-intercom'
]
},
output: {
path: path.resolve(__dirname, 'build/assets'),
publicPath: publicPath,
filename: '[name].js'
},
resolve: {
modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
extensions: ['.js', '.jsx'],
alias: {
config: 'config/'+config+'.js'
}
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]&sourceMap',
{
loader: 'postcss-loader',
options: {
plugins: function(webpack) {
return [
postcssImport,
precss,
hexrgba,
cssnext,
inlineSvg,
svgo,
math
]
}
}
}
]
})
},
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
query: {
presets: ['react', ['es2015', {modules: false}], 'stage-0'],
compact: false
}
},
exclude: /node_modules/,
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: [
'file-loader?name=media/fonts/[name].[ext]'
]
},
{
test: /\.(png|gif|jpe?g|svg)$/i,
use: [
'file-loader?hash=sha512&digest=hex&name=media/image/[name]-[hash].[ext]'
]
},
{
test: /\.(webm|mp4)$/,
use: [
'file-loader?hash=sha512&digest=hex&name=media/video/[name]-[hash].[ext]'
]
}
]
}
}
const commonPlugins = [
new webpack.optimize.CommonsChunkPlugin(
{
name: ['common']
}
),
new ExtractTextPlugin({
filename: 'main.css'
})
]
if (TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
plugins: [
...commonPlugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
devtool: 'inline-source-map',
devServer: {
historyApiFallback: {
index: indexFile
},
hot: true,
inline: true,
stats: 'errors-only',
host: '0.0.0.0',
port: 8008,
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000
},
disableHostCheck: true
},
})
}
if (TARGET === 'build') {
var exports = merge(common, {
plugins: [
...commonPlugins,
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
screw_ie8: true,
warnings: false,
comments: false,
mangle: true
}),
new CopyWebpackPlugin([
{ from: './src/assets/reset.css' }
])
]
})
fs.readFile('./src'+indexFile, function (err, data) {
if (err) throw err;
var newIndex = data.toString().replace(/\/assets\//g, publicPath)
fs.writeFile('./build/index.html', newIndex, function(err) {
if(err) {
return console.log(err);
}
})
})
console.log(util.inspect(exports, {showHidden: false, depth: null, colors: true}), '\n')
module.exports = exports
}

Related

Webpack 5, Server-Side rendering, and FOUC

I'm upgrading an existing web site from Webpack 3 to Webpack 5.
The site uses server side rendering for the first load, the client side routing for any in-site navigation. All this worked fine with Webpack 3, but after migrating to Webpack 5 it looks like some of the styles are being applied via javascript and that's creating a FOUC during the first load (after that, in-site navigation works fine and looks correct). As a test, I turned off javascript in my browser; the old site loads fine and looks correct, but the upgraded site does not. It feels like I need style-loader in the server config somewhere, but when that's added, I get a "Cannot GET /" when trying to load the site. Any help is appreciated.
Server-side config
require('dotenv').config({ silent: true });
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const includePaths = [path.resolve(__dirname, 'stylesheets')];
module.exports = {
bail: true,
entry: {
main: './src/entry-server',
},
output: {
path: path.join(__dirname, 'build', 'prerender'),
filename: '[name].js',
publicPath: '/bundle/',
libraryTarget: 'commonjs2',
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
PRERENDER: true,
ASSETS_CDN_PREFIX: JSON.stringify(process.env.ASSETS_CDN_PREFIX || ''),
},
}),
// only load moment english locale: https://github.com/moment/moment/issues/2517
new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(en)$/),
new webpack.optimize.ModuleConcatenationPlugin(),
new MiniCssExtractPlugin({
ignoreOrder: true,
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'src'),
use: 'babel-loader',
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
},
},
'postcss-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths,
data: `$assetprefix: "${process.env.ASSETS_CDN_PREFIX || ''}";`,
},
},
},
],
},
{
test: /\.svg$/,
use: `svg-inline-loader?removeTags&removingTags[]=${['defs', 'style', 'title'].join(',removingTags[]=')}`,
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.css', '.scss', '.json'],
},
target: 'node',
};
Server entry point
export default function (req, res, environmentConstants, callback) {
// ...setup
match({ routes, location: targetUrl }, (error, redirectLocation, renderProps) => {
// ...setup
fetchSomeData().then(() => renderToString(
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>,
))
.then((content) => {
callback(null, {
helmet: Helmet.renderStatic(),
content,
initialState: serialize(store.getState(), { isJSON: true }),
env: serialize(someEnvConstants),
});
})
Client-side config
require('dotenv').config({ silent: true });
const AssetsPlugin = require('assets-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const includePaths = [path.resolve(__dirname, 'stylesheets')];
// Match all routes that we want to lazy load
const lazyRouteRegex = /route\/([^/]+\/?[^/]+)Route.jsx$/;
module.exports = {
bail: true,
entry: {
main: './src/entry-client',
vendor: [
'react',
'react-dom',
'react-router',
'redux',
'react-redux',
'xmldom',
],
},
output: {
path: path.join(__dirname, 'build', 'public', '[fullhash]'),
filename: '[name].js',
chunkFilename: '[id].chunk.js',
publicPath: `${process.env.ASSETS_CDN_PREFIX || ''}/build/public/[fullhash]/`,
},
plugins: [
// only load moment english locale: https://github.com/moment/moment/issues/2517
new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(en)$/),
new MiniCssExtractPlugin({
ignoreOrder: true,
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
PRERENDER: false,
ASSETS_CDN_PREFIX: JSON.stringify(process.env.ASSETS_CDN_PREFIX || ''),
},
}),
new AssetsPlugin(),
new CleanPlugin([path.join(__dirname, 'build', 'public')]),
new CompressionPlugin(),
// new BundleAnalyzerPlugin(),
],
module: {
rules: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'src'),
exclude: lazyRouteRegex,
use: [
{
loader: 'babel-loader',
},
],
},
{
test: lazyRouteRegex,
include: path.resolve(__dirname, 'src'),
use: [
{
loader: 'bundle-loader',
options: {
lazy: true,
},
},
{
loader: 'babel-loader',
},
],
},
{
test: /swiper.*\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: false,
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
},
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths,
data: `$assetprefix: "${process.env.ASSETS_CDN_PREFIX || ''}";`,
},
},
},
],
},
{
test: /\.s?css$/,
exclude: /swiper.*\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
},
},
{
loader: 'postcss-loader',
},
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths,
data: `$assetprefix: "${process.env.ASSETS_CDN_PREFIX || ''}";`,
},
},
},
],
},
{
test: /\.svg$/,
use: `svg-inline-loader?removeTags&removingTags[]=${['defs', 'style', 'title'].join(',removingTags[]=')}`,
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.css', '.scss', '.json'],
},
target: 'web',
};

use sequential number for chunkFileName in webpack

I would like to use a sequential number such as 1.js, 2.js,... for chunkFileName in production mode of webpack v5. I set [index].js for naming but webpack gives me following error:
Error: Conflict: Multiple chunks emit assets to the same filename
[index].js (chunks 179 and 216)
Here's my config for webpack:
var config = {
devtool: 'eval-source-map',
cache: true,
entry: {
main: path.join(__dirname, "app", "App.js"),
},
output: {
path: path.join(__dirname, 'scripts', 'js'),
filename: '[name].js',
chunkFilename: '[name].js',
sourceMapFilename: '[file].map',
publicPath: '/scripts/js/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
babelrc: false,
presets: [
['es2015', { modules: false }],
'react',
],
plugins: [
'syntax-dynamic-import',
'transform-object-rest-spread',
'transform-class-properties',
'transform-object-assign',
],
}
},
},
{
// 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',
]
}
],
},
optimization: {
minimize: false,
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
},
}
},
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js)$|\.(css)$|\.(html)$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
//threshold: 10240,
//minRatio: 0
})
],
resolve: {
extensions: ['.js', '.jsx', '.css', '.ts'],
alias: {
'react-loadable': path.resolve(__dirname, 'app/app.js'),
},
},
};
if (process.env.NODE_ENV === 'production') {
const TerserPlugin = require("terser-webpack-plugin");
config.devtool = false;
config.output.chunkFilename = '[index].js';
config.optimization = {
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all",
}
},
}
},
config.plugins = [
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify('production') }
}),
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js)$|\.(css)$|\.(html)$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
//threshold: 10240,
//minRatio: 0
})
];
}
module.exports = config;
Does anyone know where is the problem? Thank you in advance!
I've found my answer! There is a config for webpack's optimization section which can be set and it gives us a sequential numbers as chunkFileName and its chunkIds which should set to natural. So:
config.optimization = {
chunkIds: "natural",
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
},
}
}

Webpack hot module replacement stuck at [HMR] Waiting for update signal from WDS

I'm using webpack hot module replacement in my react project.
configuration looks like below.
let compilerConfig = {
entry: [
'babel-polyfill',
'webpack-dev-server/client?http://0.0.0.0:9000/',
'webpack/hot/only-dev-server',
path.join(ws.srcDir, 'client', 'src', 'index.js'),
],
devtool: 'source-map',
output: {
path: path.resolve(ws.srcDir, 'public'),
filename: 'main.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.(?:p|s)?css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: { config: { path: path.join(__dirname, "postcss.config.js") } }
},
],
}),
},
{
test: /\.(png|woff|woff2|eot|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader',
},
{
test: /\.(js|jsx)?$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules', 'astro'),
],
loader: 'babel-loader',
options: {
babelrc: false,
presets: [
'react',
'es2015',
'stage-2'
]
},
},
{
test: /\.svg$/i,
use: [
{
loader: "babel-loader",
},
{
loader: "svg-react-loader",
query: {
classIdPrefix: '[name]-[hash:8]__',
propsMap: {
fillRule: 'fill-rule',
foo: 'bar'
},
xmlnsTest: /^xmlns.*$/
}
}
],
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': `"${NODE_ENV}"`,
}),
new ExtractTextPlugin('styles.css'),
new HTMLWebpackPlugin({
template: path.join(ws.srcDir, 'client', 'src', "index.html"),
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
};
const serverConfig = {
contentBase: path.resolve(ws.srcDir, 'client', 'src'),
port: process.env.PORT || '9000',
inline: true,
host: '0.0.0.0',
historyApiFallback: true,
stats: {
colors: true,
},
headers: {
'Access-Control-Allow-Origin': '*'
},
};
And i'm starting webpack dev server through gulp as below.
gulp.task('webpack-dev', function() {
WebpackDevServer.addDevServerEntrypoints(compilerConfig, serverConfig);
const webpackConf = webpack(compilerConfig);
new WebpackDevServer(webpackConf, serverConfig)
.listen('9000', '0.0.0.0', function(err) {
if (err)
throw new Error("webpack-dev-server", err);
// Server listening
console.info("[webpack-dev-server]", "http://localhost:9000");
})
})
Getting [WDS] Disconnected! error after some time. And also i'm not seeing [WDS] Hot Module Replacement enabled. log in the console.
when i do a code change webpack is recompiling, but don't see it reflecting in the browser.
Using below version.
webpack = 2.3.x
webpack-dev-server = 2.4.x
Found the problem. I was loading a script in my index.html. That got failed(404). This is causing Hot Module Replacement to fail.

Webpack 4 Error: Module parse failed sql-parser

I tried to migrate to webpack from 3, I changed loaders to rules, changed System.import() to import(), upgraded all the packages, changed the ts loader from awesome-typescript-loader and removed the new webpack.NamedModulesPlugin() but during the build I have this error:
ERROR in ./node_modules/sql-parser/lib/compiled_parser.js
Module parse failed: Invalid labeled declaration (394:26)
You may need an appropriate loader to handle this file type.
| lstack.length = lstack.length - n;
| }
| _token_stack: function lex() {
| var token;
| token = lexer.lex() || EOF;
# ./node_modules/sql-parser/lib/parser.js 9:13-41
# ./node_modules/sql-parser/lib/sql_parser.js
# ./node_modules/sql-parser/index.js
# ./src/reducers/bands.js
# ./src/reducers/transients.js
# ./src/reducers/index.js
# ./src/main.js
# multi babel-polyfill ./src/main
How can I fix it?
EDIT
webpack.config.js
var path = require('path')
var webpack = require('webpack')
var paths = {
src: path.resolve(__dirname, '../src'),
test: path.resolve(__dirname, '../test'),
viewers: path.resolve(__dirname, '../src', 'components', 'viewers'),
vendor: path.resolve(__dirname, '../vendor'),
build: path.resolve(__dirname, '../build'),
dist: path.resolve(__dirname, '../dist'),
}
var config = {
entry: ['babel-polyfill', path.resolve(paths.src, 'main')],
output: {
path: paths.build,
pathinfo: true,
filename: 'js/[name].bundle.js',
chunkFilename: 'js/[id].bundle.js',
// publicPath: '/'
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
alias: {
'spread-view': path.resolve(paths.vendor, 'spread-view'),
spreadjs: path.resolve(paths.vendor, 'spreadjs'),
},
},
stats: {
colors: true,
reasons: true,
},
performance: {
hints: false,
},
module: {
rules: [
{
test: /\.ts|\.tsx$/,
include: [paths.src, paths.test],
use: 'ts-loader',
},
{
// enforce: 'pre',
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015'],
},
},
],
// use: 'source-map-loader',
// include: [paths.src, paths.test],
},
{
test: /\.jsx?$/,
include: [paths.src, paths.test],
use: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.json$/,
type: 'javascript/auto',
use: 'json-loader',
},
{
test: /\.yml$/,
type: 'javascript/auto',
use: ['json-loader', 'yaml-loader'],
},
{
test: /\.(cur|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
exclude: /\/favicon.ico$/,
use: 'file-loader?name=media/[name].[hash:8].[ext]',
},
{
test: /\/favicon.ico$/,
include: paths.src,
use: 'file-loader?name=favicon.ico?[hash:8]',
},
{
test: /\.html$/,
use: 'html-loader?attrs=false', //link:href
},
// SQLite script loader
{
test: /\.sql$/,
use: 'sqlite-loader',
},
],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
// new webpack.NamedModulesPlugin(),
],
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
}
module.exports = {
paths: paths,
config: config,
}
webpack.config.debug.js
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var merge = require('webpack-merge')
var config = require('./webpack.config').config
module.exports = merge.smart(config, {
bail: true,
devtool: 'inline-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('debug'),
},
}),
new HtmlWebpackPlugin({
inject: true,
template: 'index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
],
})

Migrating from web pack v1.15 config to v2.6.1

Updated webpack to the latest version(2.6.1), so the webpack config file, that came with the boilerplate, became outdated...
Looked at the official documentation on migration, but still a bit lost regarding how exactly i need to update my config file:
'use strict';
const path = require('path');
const webpack = require('webpack');
const NODE_ENV = process.env.NODE_ENV;
const SaveAssetsJson = require('assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
devtool: '#source-map',
// Capture timing information for each module
profile: false,
// Switch loaders to debug mode
debug: false,
// Report the first error as a hard error instead of tolerating it
bail: true,
entry: [
'babel-polyfill',
'./assets/main.jsx',
],
output: {
path: 'public/dist/',
pathInfo: true,
publicPath: '/dist/',
filename: 'bundle.[hash].min.js',
},
resolve: {
root: path.join(__dirname, ''),
modulesDirectories: [
'web_modules',
'node_modules',
'assets',
'assets/components',
],
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'],
},
resolveLoader: {
},
plugins: [
new CleanWebpackPlugin(['public/dist'], {
verbose: true,
dry: false,
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
output: {
comments: false,
},
compress: {
warnings: false,
screw_ie8: true,
},
}),
new SaveAssetsJson({
path: process.cwd(),
filename: 'assets.json',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
],
query: {presets: ['es2015', 'react'] },
module: {
rules: [
{
use: [
"style-loader",
"css-loader",
"autoprefixer-loader",
]
},
{
test: /\.scss$/, // sass files
loader: 'style!css!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded',
},
{
test: /\.(ttf|eot|svg|woff)(\?[a-z0-9]+)?$/, // fonts files
loader: 'file-loader?name=[path][name].[ext]',
},
{
test: /\.jsx?$/, // react files
exclude: /node_modules/,
loaders: ['babel?presets[]=es2015,presets[]=stage-0,presets[]=react'],
include: path.join(__dirname, 'assets'),
},
],
noParse: /\.min\.js/,
}
};
In the end there were few deletion of the deprecated plugin calls and restructuring some of the fields. Here is the 2.6.1 compatible version, the parts of the file that were changed:
'use strict';
module.exports = {
devtool: '#source-map',
// Capture timing information for each module
profile: false,
// Switch loaders to debug mode
//debug: false,
// Report the first error as a hard error instead of tolerating it
bail: true,
entry: [
'babel-polyfill',
'./assets/main.jsx',
],
output: {
path: '/public/dist/', //This has to be an absolute path
publicPath: '/dist/',
filename: 'bundle.[hash].min.js',
},
resolve: {
//merging root and modules
modules: [
path.join(__dirname, ''),
'web_modules',
'node_modules',
'assets',
'assets/components',
],
extensions: [ '.webpack.js', '.web.js', '.js', '.jsx'], //Removed empty entry
},
resolveLoader: {
},
plugins: [
new CleanWebpackPlugin(['public/dist'], {
verbose: true,
dry: false,
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: true, //added this
output: {
comments: false,
},
compress: {
warnings: false,
screw_ie8: true,
},
}),
new SaveAssetsJson({
path: process.cwd(),
filename: 'assets.json',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
],
module: {
//Modules are slightly differently listed now
rules: [
{
test: /\.(css|scss)$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', "stage-0", 'react']
}
}
}
],
noParse: /\.min\.js/,
}
};

Resources