SourceMapDevToolPlugin在webpack中运行得很好。 它不接pipedevtool工作

当我设置devtool:'source-map'并应用SourceMapDevToolPlugin时 ,SourceMapDevToolPlugin不会接pipedevtool选项并生成两个不同的源地图。

webpack.config.js:

const path = require('path'); const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); var config = { context: path.resolve( __dirname, 'src'), entry:{ test1: 'test.js' }, output: { filename: 'js/[name].js?=[chunkhash]', path: path.resolve( __dirname, 'dist'), devtoolModuleFilenameTemplate: '[absolute-resource-path]', sourceMapFilename: 'srcMap/[file].map' }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: [ { loader: "babel-loader", options: { presets: ['es2015'] } } ] }, { test: /\.html$/, use: [ 'html-loader' ] } ] }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), new HtmlWebpackPlugin({ filename: 'html/index.html', template: 'testSourceMap.html', minify: { minifyJS: true, removeComments: true, sortAttributes: true, }, hash: false, chunks: ['test1'], }), new webpack.optimize.UglifyJsPlugin({ test: /\.js$/, sourceMap: true, uglifyOptions: { ie8: false, mangle: true, output: { comments: false, beautify: false, }, compress: true, warnings: false }, parallel: { cache: true, } }), new webpack.SourceMapDevToolPlugin({ filename: 'srcMapPlugin/[file].map', include: ['js/test1.js'], append: '\n//#sourceMappingURL=http://192.168.32.5:8080/[url]', moduleFilenameTemplate:'[absolute-resource-path]', }), new CleanWebpackPlugin([ 'dist/js', 'dist/srcMap', 'dist/srcMapPlugin']), ], resolve: { modules: ['src', "node_modules" ] }, //devtool: process.env.NODE_ENV === 'production' ? 'source-map' :'cheap-module-eval-source-map' devtool: 'source-map', }; console.log('Now, the NODE_ENV:', process.env.NODE_ENV); module.exports = config; 

和package.json:

 { "name": "srcmapplugin", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "v": ".\\node_modules\\.bin\\webpack -version", "cd": ".\\node_modules\\.bin\\webpack --optimize-minimize", "cp": "cross-env NODE_ENV=production PLATFORM=web .\\node_modules\\.bin\\webpack --optimize-minimize" }, "author": "", "license": "ISC", "devDependencies": { "babel": "^6.23.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-es2015": "^6.24.1", "clean-webpack-plugin": "^0.1.16", "cross-env": "^5.0.5", "html-loader": "^0.5.1", "html-webpack-plugin": "^2.30.1", "webpack": "^2.7.0" } } 

运行命令“npm run cp”后。 我在/ dist / srcMap和/ dist / srcMapPlugin目录中得到两个源映射文件。 而且,当我浏览html页面时,它不起作用。 但是,当我删除“ new webpack.SourceMapDevToolPlugin( { ... } ) ”configuration。 源地图正确运行良好!

webpack.config.js中的devtool选项和SourceMapDevToolPlugin选项如何分别生成源映射并导致源映射被破坏?

我想SourceMapDevToolPlugin会覆盖一些关于源地图的选项,并且每个js文件只产生一个源地图。

示例项目位于https://github.com/yincu/srcMapPlugin.git中

======================

我在谷歌search。 有人告诉我使用devtool或SourceMapDevToolPlugin。 但是,当我只使用SourceMapDevToolPlugin时,webpack仍然不会生成js源地图 ,但会生成css源地图。