没有ExtractTextPlugin的js源代码(No sourcemap for js with ExtractTextPlugin)

没有ExtractTextPlugin的js源代码(No sourcemap for js with ExtractTextPlugin)

有了这个配置，我得到了app.bundle.js，app.map，app.css。 问题是app.map只包含与css相关的代码。 如果我不使用ExtractTextPlugin，那么源映射包含所有css和js相关代码，但我必须将css保存在单独的文件中。 如果我没有得到css的地图，那很好，但对于js来说这是必须的。

// webpack.common.config var webpack = require('webpack'); var helpers = require('./helpers'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpackPostcssTools = require('webpack-postcss-tools'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var autoprefixer = require('autoprefixer'); var postcssImport = require('postcss-import'); var map = webpackPostcssTools.makeVarMap('src/css/index.css'); var ngAnnotatePlugin = require('ng-annotate-webpack-plugin'); const METADATA = { baseUrl: '/' }; module.exports = { metadata: METADATA, entry: { 'app': './src/js/app.js', 'vendor': './src/vendor.js' }, resolve: { extensions: ['', '.js'], root: helpers.root('src'), modulesDirectories: ['node_modules'] }, module: { preLoaders: [ { test: /\.js$/, loaders:['eslint', 'source-map-loader'], exclude: /node_modules/ } ], loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.json$/, loader: 'json-loader' }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap&importLoaders=1!postcss-loader?sourceMap') }, { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] }, { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } ] }, plugins: [ new ngAnnotatePlugin({ add: true, }), new ExtractTextPlugin("[name].css", { allChunks: true }), new webpack.optimize.OccurenceOrderPlugin(true), new webpack.optimize.CommonsChunkPlugin({ name: helpers.reverse(['vendor', 'app']), minChunks: Infinity }), new CopyWebpackPlugin([{ from: 'src/res', to: 'res' }, { from: 'src/templates', to: 'templates' } } ]), new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none' }), ], postcss: function (webpack) { return [ //webpackPostcssTools.prependTildesToImports, postcssImport({ addDependencyTo: webpack }), require('postcss-custom-properties')({ variables: map.vars }), require('postcss-custom-media')({ extensions: map.media }), require('postcss-calc'), autoprefixer ]; }, node: { global: 'window', crypto: 'empty', module: false, clearImmediate: false, setImmediate: false }, };

// webpack.dev.config var helpers = require('./helpers'); var webpackMerge = require('webpack-merge'); var commonConfig = require('./webpack.common.js'); var DefinePlugin = require('webpack/lib/DefinePlugin'); const ENV = process.env.ENV = process.env.NODE_ENV = 'development'; const METADATA = webpackMerge(commonConfig.metadata, { host: 'localhost', port: 8000, ENV: ENV }); module.exports = webpackMerge(commonConfig, { debug: true, metadata: METADATA, devtool: 'source-map', output: { path: helpers.root('www'), filename: '[name].bundle.js', sourceMapFilename: '[name].map', chunkFilename: '[id].chunk.js' }, plugins: [ new DefinePlugin({ 'ENV': JSON.stringify(METADATA.ENV) }), ], devServer: { port: METADATA.port, host: METADATA.host, historyApiFallback: true, watchOptions: { aggregateTimeout: 300, poll: 1000 } }, eslint: { configFile: './.eslintrc.js', emitError: false, emitWarning: false, fix: true }, node: { global: 'window', crypto: 'empty', process: true, module: false, clearImmediate: false, setImmediate: false } });

With this config I get an app.bundle.js, app.map, app.css. The problem is that app.map contains only the css related code. If I don't use ExtractTextPlugin then the sourcemap contains all the css and js related code but I have to keep css in a separate file. If I don't get map for css that's fine but for js it is a must have.

// webpack.common.config var webpack = require('webpack'); var helpers = require('./helpers'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpackPostcssTools = require('webpack-postcss-tools'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var autoprefixer = require('autoprefixer'); var postcssImport = require('postcss-import'); var map = webpackPostcssTools.makeVarMap('src/css/index.css'); var ngAnnotatePlugin = require('ng-annotate-webpack-plugin'); const METADATA = { baseUrl: '/' }; module.exports = { metadata: METADATA, entry: { 'app': './src/js/app.js', 'vendor': './src/vendor.js' }, resolve: { extensions: ['', '.js'], root: helpers.root('src'), modulesDirectories: ['node_modules'] }, module: { preLoaders: [ { test: /\.js$/, loaders:['eslint', 'source-map-loader'], exclude: /node_modules/ } ], loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.json$/, loader: 'json-loader' }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap&importLoaders=1!postcss-loader?sourceMap') }, { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] }, { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } ] }, plugins: [ new ngAnnotatePlugin({ add: true, }), new ExtractTextPlugin("[name].css", { allChunks: true }), new webpack.optimize.OccurenceOrderPlugin(true), new webpack.optimize.CommonsChunkPlugin({ name: helpers.reverse(['vendor', 'app']), minChunks: Infinity }), new CopyWebpackPlugin([{ from: 'src/res', to: 'res' }, { from: 'src/templates', to: 'templates' } } ]), new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none' }), ], postcss: function (webpack) { return [ //webpackPostcssTools.prependTildesToImports, postcssImport({ addDependencyTo: webpack }), require('postcss-custom-properties')({ variables: map.vars }), require('postcss-custom-media')({ extensions: map.media }), require('postcss-calc'), autoprefixer ]; }, node: { global: 'window', crypto: 'empty', module: false, clearImmediate: false, setImmediate: false }, };

// webpack.dev.config var helpers = require('./helpers'); var webpackMerge = require('webpack-merge'); var commonConfig = require('./webpack.common.js'); var DefinePlugin = require('webpack/lib/DefinePlugin'); const ENV = process.env.ENV = process.env.NODE_ENV = 'development'; const METADATA = webpackMerge(commonConfig.metadata, { host: 'localhost', port: 8000, ENV: ENV }); module.exports = webpackMerge(commonConfig, { debug: true, metadata: METADATA, devtool: 'source-map', output: { path: helpers.root('www'), filename: '[name].bundle.js', sourceMapFilename: '[name].map', chunkFilename: '[id].chunk.js' }, plugins: [ new DefinePlugin({ 'ENV': JSON.stringify(METADATA.ENV) }), ], devServer: { port: METADATA.port, host: METADATA.host, historyApiFallback: true, watchOptions: { aggregateTimeout: 300, poll: 1000 } }, eslint: { configFile: './.eslintrc.js', emitError: false, emitWarning: false, fix: true }, node: { global: 'window', crypto: 'empty', process: true, module: false, clearImmediate: false, setImmediate: false } });

最满意答案

根据这个讨论，问题似乎是ExtractTextPlugin会覆盖其他源图： https ： //github.com/webpack/extract-text-webpack-plugin/issues/119

您可以通过确保获取源映射的每个输出文件获取不同的文件名来解决此问题，如下所示：

sourceMapFilename: '[file].map'

The issue seems to be that ExtractTextPlugin overwrites other sourcemaps, according to this discussion: https://github.com/webpack/extract-text-webpack-plugin/issues/119

You can fix this issue by ensuring that each output file that gets a sourcemap gets a different filename, like this:

sourceMapFilename: '[file].map'