Webpack2不生成JS源地图

Question

我似乎无法获得Webpack2生成JS源地图。我想也许删除Closure Compiler插件可以修复它，但不会。

我的设置：

• 的WebPack 2.4.1
• 的WebPack闭合编译器2.1.4

命令我运行：

webpack -d --colors --progress

我的WebPack配置：

const path = require('path') 
const DefinePlugin = require('webpack').DefinePlugin 
const CopyWebpackPlugin = require('copy-webpack-plugin') 
const ClosureCompilerPlugin = require('webpack-closure-compiler') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 

module.exports = { 
    devtool: 'source-map', 
    entry: { 
    'client-bundle': path.join(__dirname, 'src/index') 
    }, 
    module: { 
    rules: [ 
     { 
     test: [ /\.jsx?$/ ], 
     include: [/src/], 
     loader: 'babel-loader', 
     exclude: [/\.test.js$/] 
     }, 
     { test: /\.json$/, loader: 'json-loader' }, 
     { test: /\.html?$/, loader: 'html-loader' }, 
     { test: /\.(css|sass)$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' }) }, 
     { test: /\.(png|jpg|jpeg|gif|ico)$/, loader: 'file-loader?name=[path][name].[ext]' }, 
     { test: /\.woff(2)?(\?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' } 
    ] 
    }, 
    output: { 
    filename: '[name].js', 
    library: '[name]', 
    libraryTarget: 'this', 
    path: path.join(__dirname, 'dist') 
    }, 
    plugins: [ 
    new CopyWebpackPlugin([ 
     {from: path.join(__dirname, 'src/index.html')} 
    ]), 
    new ClosureCompilerPlugin({ 
     compiler: { 
     language_in: 'ECMASCRIPT6', 
     language_out: 'ECMASCRIPT5', 
     compilation_level: 'SIMPLE' 
     }, 
     concurrency: 3 
    }), 
    new DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify('development') 
     } 
    }) 
    ], 
    target: 'web' 
} 

我试图在这里指出devtool每一个可能的值：https://webpack.js.org/configuration/devtool/。我已经尝试在Closure Compiler配置中将create_source_map: true添加到compiler对象中。似乎没有任何工作。这不是权限问题，因为生成的包很好。

编辑：

所以我改变了的WebPack命令使用-p选项，而不是-d。这产生了一个错误：

ERROR in client.js from UglifyJs 
TypeError: Cannot read property 'sections' of null 

这很奇怪，因为我没有使用UglifyJS插件。但是，我只能通过移除Closure Compiler Plugin来消除错误。现在事情正确地构建，并生成一个源地图，但我没有压缩。

Answer 1

原来是我的Closure编译器配置的几个问题（在我将webpack切换到-p命令行选项后）。

1. 由于巴贝尔已经transpiling，该language_in属性需要被设置为ECMASCRIPT5，而不是ECMASCRIPT6。
2. 我还需要将create_source_map: true添加到compiler对象。

这里是我的整个工作的WebPack配置（注：我从“客户端捆绑”到“客户”改变了包的名称）：

const path = require('path') 
const DefinePlugin = require('webpack').DefinePlugin 
const CopyWebpackPlugin = require('copy-webpack-plugin') 
const ClosureCompilerPlugin = require('webpack-closure-compiler') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 

module.exports = { 
    devtool: 'source-map', 
    entry: { 
    'client': path.join(__dirname, 'src/index') 
    }, 
    module: { 
    rules: [ 
     { 
     test: [ /\.jsx?$/ ], 
     include: [/src/], 
     loader: 'babel-loader', 
     exclude: [/\.test.js$/, /node_modules/] 
     }, 
     { test: /\.json$/, loader: 'json-loader' }, 
     { test: /\.html?$/, loader: 'html-loader' }, 
     { test: /\.(css|sass)$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' }) }, 
     { test: /\.(png|jpg|jpeg|gif|ico)$/, loader: 'file-loader?name=[path][name].[ext]' }, 
     { test: /\.woff(2)?(\?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' } 
    ] 
    }, 
    output: { 
    filename: '[name].js', 
    library: '[name]', 
    libraryTarget: 'this', 
    path: path.join(__dirname, 'dist') 
    }, 
    plugins: [ 
    new CopyWebpackPlugin([ 
     {from: path.join(__dirname, 'src/index.html')} 
    ]), 
    new ClosureCompilerPlugin({ 
     compiler: { 
     language_in: 'ECMASCRIPT5', 
     language_out: 'ECMASCRIPT5', 
     compilation_level: 'SIMPLE', 
     create_source_map: true 
     }, 
     concurrency: 3 
    }), 
    new DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify('development') 
     } 
    }) 
    ], 
    target: 'node' 
}