Webpack 2 ExtractTextPlugin CSS源代碼覆蓋babel 6 JS源代碼

編輯：在發佈此問題後不久發現了一個解決方案。見下面的My Answer。Webpack 2 ExtractTextPlugin CSS源代碼覆蓋babel 6 JS源代碼

我有一個使用ExtractTextPlugin到SCSS/CSS拉出到一個單獨的文件中的WebPack 2基於項目。

此外，我有兩個在webpack（vendor和app）中定義的入口點，它們構建到我的JS捆綁包中。

由於某些原因，ExtractTextPlugin似乎打破爲應用程序包生成的源映射app.js.map。如果我看一下sourcemap，它會指向提取的CSS文件中的隨機行，而不是JS。

展望sourcemap文件本身裏面，我只看到在「源」（以下shortene樣品）中列出的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", .....

然而，如果我在的WebPack配置註釋掉ExtractTextPlugin ，我得到的來源中所列的JS文件：

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

所以真的不知道這是怎麼回事......這似乎是一些關於ExtractTextPlugin是打破或重寫應用程序外灘sourcemap樂？

這裏是我如何在我的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的某種衝突？我的配置問題？

來源

2017-02-25 Prefix

發佈此問題後不久就找到了解決方案！只是想回答任何人遇到同樣的問題。

我成功找到了this helpful github issue。問題在於webpack輸出中設置的sourceMapFileName。 Mine是：

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

其中，巧合的是，它將匹配extractTextPlugin以及應用程序包的CSS。所以一個人正在覆蓋另一個人。

更改該行：

sourceMapFilename: '[file].map',

允許生成一個唯一的CSS圖和JS地圖！

希望這可以幫助別人。 :)

來源

2017-02-25 18:47:14 Prefix

終於！你爲我節省了一小時的時間。 –

這應該定義在文檔:) –

很高興它幫助了別人，@Kędrzu！很高興將這個貢獻給webpack文檔。 – Prefix

Webpack 2 ExtractTextPlugin CSS源代碼覆蓋babel 6 JS源代碼

回答

相關問題