Javascript SourceMapDevToolPlugin在webpack中运行良好。它没有';Don’我不能接管开发工具的工作
当我同时设置devtool:'source-map'并应用SourceMapDevToolPlugin时,SourceMapDevToolPlugin不会接管devtool选项并生成两个不同的源映射 webpack.config.js:Javascript SourceMapDevToolPlugin在webpack中运行良好。它没有';Don’我不能接管开发工具的工作,javascript,node.js,webpack,Javascript,Node.js,Webpack,当我同时设置devtool:'source-map'并应用SourceMapDevToolPlugin时,SourceMapDevToolPlugin不会接管devtool选项并生成两个不同的源映射 webpack.config.js: const path = require('path'); const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const
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页面时,它也不起作用。
但是,当我删除“新的webpack.SourceMapDevToolPlugin({…})
”配置时。源映射正确工作良好
webpack.config.js中的devtool选项和SourceMapDevToolPlugin选项如何分别生成源映射并导致断开的源映射
我假设SourceMapDevToolPlugin覆盖了一些关于源映射的选项,并且每个js文件只生成一个源映射
示例项目位于
======================
我在谷歌搜索。有人告诉我使用devtool或SourceMapDevToolPlugin。但是当我只使用SourceMapDevToolPlugin时,网页包仍然不会生成js源地图,但是它会生成css源地图