Webpack2でJSソースマップが生成されない

Question

Webpack2でJSソースマップを生成できないようです。おそらく、Closure Compilerプラグインを削除しても問題は解決しないと思った。

マイセットアップ：

• のWebPACK 2.4.1
• WebPACKの閉鎖コンパイラ2.1.4

コマンド私が実行している：

webpack -d --colors --progress

私のWebPACKの設定：私はここに示されたdevtoolのために可能なすべての値を試してみた

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' 
} 

：https://webpack.js.org/configuration/devtool/。私は、create_source_map: trueをクロージャコンパイラ設定のcompilerオブジェクトに追加しようとしました。何も動作していないようです。バンドルはうまく生成されるため、アクセス権の問題ではありません。

EDIT：

だから私が代わりに-dの-pオプションを使用するようにWebPACKのコマンドを変更しました。これでエラーが発生しました：

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

私はUglifyJSプラグインを使用していないため、これは奇妙です。私は、Closure Compiler Pluginの使用を取り除くだけで、エラーを取り除くことができたということです。今、物事が正しく構築され、ソースマップが生成されますが、圧縮はありません。

Answer 1

（私がWebpackを-pコマンドラインオプションに切り替えた後に）私のClosure Compilerの設定にはいくつかの問題がありました。

1. バベルはすでに、ECMASCRIPT5代わりのECMASCRIPT6に設定する必要がlanguage_inプロパティをtranspilingたので。
2. また、compilerオブジェクトにcreate_source_map: trueを追加する必要がありました。

は、ここに私の完全な作業の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' 
}