基本上我在 react-router 文件中有一个动态条目块。但是在 webpack 中，3我无法从这些入口文件中将 css 提取到单独的块中。所以在 webpack 条目中包含相同的块名。
现在创建了块并提取了没有重复项的 css，并将来自多个条目文件的公共 scss 导入移动到 commonChunks 条目但我开始收到此错误。也许是因为我现在指定了两次入口块（1 在 webpack 条目中，另一次在 react-router 文件中）
所以我升级到3.10它解决了这个问题，但现在css块中有重复的css。
所以想知道任何解决方案或替代方案来提取 webpack 中单独命名的块中的 css3.2或解决重复的 css 问题3.10
ERROR（仅在生产模式下发生）
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
github 问题链接 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'
}
};