Webpack2 erzeugt keine JS-Quellkarten

Question

Ich kann Webpack2 anscheinend nicht dazu bringen, eine JS-Quellkarte zu erzeugen. Ich dachte, vielleicht würde das Entfernen des Closure Compiler-Plugins es beheben, aber nein.

Mein Setup:

• webpack 2.4.1
• webpack-Verschluss-Compiler 2.1.4

Befehl Ich bin mit:

webpack -d --colors --progress

Mein webpack config:

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

ich jeden möglichen Wert für devtool hier angegeben habe versucht: https://webpack.js.org/configuration/devtool/. Ich habe versucht, create_source_map: true zu dem compiler Objekt in der Closure Compiler-Konfiguration hinzuzufügen. Nichts scheint zu funktionieren. Es handelt sich nicht um ein Berechtigungsproblem, da das Bundle ordnungsgemäß generiert wird.

EDIT:

So änderte ich den webpack Befehl -p Option statt -d zu verwenden. Das erzeugte einen Fehler:

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

Das ist seltsam, da ich das UglifyJS-Plugin nicht verwende. Noch schlimmer ist, dass ich den Fehler nur beheben konnte, indem ich das Closure Compiler-Plugin entfernte. Jetzt werden die Dinge korrekt erstellt, und eine Quellkarte wird generiert, aber ich habe keine Komprimierung.

Answer 1

Es stellte sich heraus, dass ein paar Probleme mit meiner Closure Compiler-Konfiguration auftraten (nachdem ich das Webpack auf die Befehlszeilenoption -p umgestellt hatte).

1. Da Babel bereits transpiling, die language_in Eigenschaft benötigt, um ECMASCRIPT5 statt ECMASCRIPT6 eingestellt werden.
2. Ich musste auch create_source_map: true zum compiler Objekt hinzufügen.

Hier ist meine komplette Arbeits webpack config (Anmerkung: ich den Namen des Bündels von "Client-Bundle" auf "Client"):

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