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