Basically i have a dynamic entry chunk in react-router file.
but in webpack 3 am unable to extract the css into seperate chunks from these entry files.
so included the same chunknames in webpack entry.
Now the chunks are created and css without duplicates are extracted and common scss imports from multiple entry files is moved to the commonChunks entry But i start getting this error. Maybe because i specify entry chunk twice now(1 in webpack entry and another time in react-router file)
So i upgraded to 3.10 it solved the issue but now the css chunks have duplicate css in them.
So wanted to know any solutions or alternatives to extract css in seperate named chunks in webpack 3.2 or solve the duplicate css issue in 3.10
ERROR(occurs only in production mode)
manifest.a9c406e9412da8263008.js:1 Uncaught TypeError: Cannot read property 'call' of undefined
at n (manifest.a9c406e9412da8263008.js:1)
at Object../desktop-containers/Index/index.js (VM150 home.1ee4964ea9da62fee1c0.js:1)
at n (manifest.a9c406e9412da8263008.js:1)
at window.webpackJsonp (manifest.a9c406e9412da8263008.js:1)
at VM150 home.1ee4964ea9da62fee1c0.js:1
link to github issue https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/185#issuecomment-419396442
/* Desktop webpack client-side config */
const webpack = require('webpack');
const path = require('path');
const DashboardPlugin = require('webpack-dashboard/plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const autoprefixer = require('autoprefixer');
const WebpackStableModuleIdAndHash = require('webpack-stable-module-id-and-hash');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const AssetsPlugin = require('assets-webpack-plugin');
const HashOutput = require('webpack-plugin-hash-output');
const nodeEnv = process.env.NODE_ENV;
const isProduction = nodeEnv === 'production';
/** ***********common rules********* */
const rules = [
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
}
]
}
];
const plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv)
},
__BROWSER__: true
}),
new webpack.NamedModulesPlugin(), // used for scope hoisting in webpack 3
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: ['> 1%', 'Firefox >= 20', 'ie >= 9']
})
],
context: path.resolve(`${__dirname}client`)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'main',
children: true,
minChunks: 2
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// optimize moment
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// exclude mobile-specific modules
new webpack.IgnorePlugin(/react-input-range/),
new webpack.IgnorePlugin(/react-lazy-load/),
new webpack.IgnorePlugin(/react-collapse/),
new webpack.IgnorePlugin(/react-motion/),
new webpack.IgnorePlugin(/react-scroll/)
];
/** *********end********** */
/** **********rules for non production***** */
if (!isProduction) {
rules.push({
test: /\.scss$/,
exclude: /node_modules/,
use: [
'style-loader',
// Using source maps breaks urls in the CSS loader
// https://github.com/webpack/css-loader/issues/232
// This comment solves it, but breaks testing from a local network
// https://github.com/webpack/css-loader/issues/232#issuecomment-240449998
// 'css-loader?sourceMap',
'css-loader',
'postcss-loader',
'sass-loader',
{
loader: 'stylefmt-loader',
options: {
config: '.stylelintrc'
}
}
]
});
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new BundleAnalyzerPlugin({
analyzerPort: 9999
})
);
}
/** *********end******** */
/** ** only for proudction rule starts ****** */
if (isProduction) {
rules.push({
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!postcss-loader!sass-loader'
})
});
plugins.push(
new ExtractTextPlugin({
filename: '[name].[contentHash].css',
allChunks: true
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin(),
new HashOutput(), // used for MD5 hashing of assets
new WebpackStableModuleIdAndHash(),
new AssetsPlugin({
filename: 'assetsManifestDesktop.json',
path: path.resolve('./build'),
prettyPrint: true
})
);
}
/** **************end *********** */
module.exports = {
devtool: isProduction ? false : 'source-map',
context: path.join(`${__dirname}/client`),
entry: {
main: 'app-desktop.js',
home: 'desktop-containers/Index',
wizardLandingPage: 'common-containers/WizardLandingPage',
auth: 'desktop-containers/Auth',
vendor: [
'babel-polyfill',
'fingerprint',
'isomorphic-fetch',
'moment',
'moment-range',
'react',
'react-addons-css-transition-group',
'react-cookie',
'react-daterange-picker',
'react-dom',
'react-helmet',
'react-redux',
'react-router',
'react-waypoint',
'redux',
'redux-thunk'
]
},
output: {
path: isProduction ? path.join(`${__dirname}/build/desktop`) : path.join(`${__dirname}/dist/desktop`), // webpack cli output directory
publicPath: '/assets/desktop/', // from where actually assets will be served.
filename: isProduction ? '[name].[chunkhash].js' : '[name].js',
chunkFilename: isProduction ? '[name].[chunkhash].js' : '[name].js'
},
module: {
rules
},
performance: isProduction && {
maxAssetSize: 100,
maxEntrypointSize: 300,
hints: 'warning'
},
resolve: {
alias: {
react: 'preact-compat',
'react-dom': 'preact-compat',
'create-react-class': 'preact-compat/lib/create-react-class',
components: path.resolve(__dirname, 'client/desktop-components')
},
extensions: ['dev-server.js', '.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [path.join(`${__dirname}/client`), path.join(`${__dirname}/node_modules`)]
},
plugins,
devServer: {
contentBase: './dist/desktop',
historyApiFallback: {
index: 'index.html'
},
port: 7000,
compress: isProduction,
inline: !isProduction,
hot: !isProduction,
disableHostCheck: true,
host: '0.0.0.0'
}
};
