2

编辑：发布此问题后不久找到了解决方案。请参阅下面的我的答案。

我有一个基于 webpack 2 的项目，它使用ExtractTextPlugin将 SCSS/CSS 提取到单独的文件中。

此外，我在 webpack (vendor和app) 中定义了两个入口点，它们构建到我的 JS 包中。

出于某种原因，ExtractTextPlugin 似乎破坏了为应用程序包生成的源映射，app.js.map. 如果我查看源映射，它指向提取的 CSS 文件中的随机行，而不是 JS。

查看源映射文件本身，我只看到“源”下列出的 CSS 和 SCSS 文件（下面的缩短示例）：

{"version":3,"sources":["webpack:///webpack:///~/icon-font/package/styles/ficon.css","webpack:///webpack:///~/styles/package/styles/_imports.scss","webpack:///webpack:///~/styles/package/styles/includes/_variables.scss","webpack:///webpack:///~/styles/package/styles/includes/_mixins-utilities.scss", .....

但是，如果我ExtractTextPlugin在 webpack 配置中注释掉，我会在源代码中列出 JS 文件：

{"version":3,"sources":["webpack:///app-552b3935c142f5001484.js","webpack:///./src/lib/Globals.js","webpack:///./src/actions/AdActions.js", ....

所以不太确定这里发生了什么......似乎ExtractTextPlugin是在破坏或覆盖应用程序包的源映射？

以下是我在 webpack 配置中定义所有相关插件的方式：

{
  entry: {
    vendors: [
      'react',
      'react-dom',
      'react-redux',
    ],
    app: path.resolve(__dirname, './../src/client.js'),
  },
  output: {
    path: path.resolve(__dirname, './../dist/assets/'),
    filename: '[name]-[chunkhash].js',
    sourceMapFilename: '[name]-[chunkhash].js.map',
  },
  cache: false,
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(scss|sass|css)$/,
        loader: ExtractTextPlugin.extract({
          loader: [
            'css?sourceMap',
            'postcss-loader',
            'sass?sourceMap'
          ],
        }),
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, '../src')],
        exclude: [NODE_MODULES_DIR],
      },
    ],
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      debug: false,
      postcss: () => ([autoprefixer]),
      eslint: {
        emitWarning: true,
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      minChunks: Infinity,
    }),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,
        drop_console: true,
        collapse_vars: true,
        reduce_vars: true,
      },
      output: {
        comments: false,
        ascii_only: true,
      },
    }),
    new ExtractTextPlugin({ filename: '_all.[chunkhash].css', allChunks: true }),
  ],
}

有什么想法可能导致这种情况吗？会不会是与 UglifyJS 和 ExtractTextPlugin 的某种冲突？我的配置问题？

4

1 回答 1

6

发布此问题后不久就找到了解决方案！只是想回答它，以防其他人遇到同样的问题。

我设法找到了这个有用的 github 问题。问题在于sourceMapFileNamewebpack 输出中的集合。我的是：

sourceMapFilename: '[name]-[chunkhash].js.map',

巧合的是，这将匹配 extractTextPlugin 中的 CSS 以及应用程序包。所以一个覆盖了另一个。

将该行更改为：

sourceMapFilename: '[file].map',

允许生成唯一的 CSS 映射和 JS 映射！

希望这可以帮助某人。:)

于 2017-02-25T18:47:14.263 回答