Question

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

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( { ... } ) ”配置时。源地图正常运行良好！

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

我认为SourceMapDevToolPlugin会覆盖有关源地图的一些选项，并且每个js文件只生成一个源地图。

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

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

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

SourceMapDevToolPlugin在webpack中工作正常。它没有接管开发工作

0 个答案: