Question

基本上，我在react-router文件中有一个动态条目块。但是在webpack 3中，无法从这些条目文件中将CSS提取到单独的块中。因此在webpack条目中包含相同的块名称。

现在，将创建块并提取没有重复的CSS，并将来自多个条目文件的通用scss导入移至commonChunks条目，但是我开始遇到此错误。也许是因为我现在两次指定了条目块（在webpack条目中指定了1个，在react-router文件中又指定了一次）

所以我升级到3.10可以解决问题，但是现在CSS块中有重复的CSS。

因此想了解在webpack 3.2的单独命名块中提取css或解决3.10中重复的css问题的任何解决方案或替代方法

错误（仅在生产模式下发生）

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'
  }
};

Answer 1

遵循两种可能的解决方案可能有助于解决该问题。

如果正在使用，请在webpack.config.js中删除DedupePlugin

//new webpack.optimize.DedupePlugin()

OR

通过添加 allChunks：true ：

修复该问题

new ExtractTextPlugin({
  filename: cssFileName,
  allChunks: true
})

OR

在Webpack配置中导入以下两个

  require('style-loader/lib/addStyles');
  require('css-loader/lib/css-base');

检查此github issue和github issue1以获得更多详细信息

Answer 2

可能你在 html 的某个地方使用了 <style> 标签，因为 webpack 有一些问题，你有这个警告。

Webpack未捕获的TypeError：无法读取未定义的属性“调用”

2 个答案: