2
Ich baue meine App mit Webpack. Ich generiere 3 Bündel: app.js, vendor.js und manifest.js. Da ich zu meinem Config UglifyJsPlugin hinzugefügt habe, werden auch 3 Sourcemaps generiert.Generieren Sie Quellkarten nur für einige Stücke
Ich möchte nur eine Quellkarte für mein app.js Bundle generieren, da die anderen 2 nutzlos für mich sind. Gibt es eine Möglichkeit, dem Uglifier zu sagen, nur eine Quellkarte für die Chunks zu erstellen, die ich möchte, anstatt alle?
Hier ist, was ich currnetly haben:
Asset Size Chunks Chunk Names
app.1e1d20f5f417ed9df40d.js 901 kB 1, 2 [emitted] [big] app
app.1e1d20f5f417ed9df40d.js.map 4.24 MB 1, 2 [emitted] app
manifest.05867db2f94981c04486.js 1.43 kB 2 [emitted] manifest
manifest.05867db2f94981c04486.js.map 14.1 kB 2 [emitted] manifest
styles.1e1d20f5f417ed9df40d.css 42.3 kB 1, 2 [emitted] app
styles.1e1d20f5f417ed9df40d.css.map 108 bytes 1, 2 [emitted] app
vendor.2734c5cd65804c943c80.js 1.64 MB 0, 2 [emitted] [big] vendor
vendor.2734c5cd65804c943c80.js.map 11.9 MB 0, 2 [emitted] vendor
und hier ist, was ich haben möchte:
Asset Size Chunks Chunk Names
app.1e1d20f5f417ed9df40d.js 901 kB 1, 2 [emitted] [big] app
app.1e1d20f5f417ed9df40d.js.map 4.24 MB 1, 2 [emitted] app
manifest.05867db2f94981c04486.js 1.43 kB 2 [emitted] manifest
styles.1e1d20f5f417ed9df40d.css 42.3 kB 1, 2 [emitted] app
styles.1e1d20f5f417ed9df40d.css.map 108 bytes 1, 2 [emitted] app
vendor.2734c5cd65804c943c80.js 1.64 MB 0, 2 [emitted] [big] vendor
Hier meine ganze conf-Datei ist, falls erforderlich:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'hidden-source-map',
entry: {
app: './src/scripts/app',
},
module: {
rules: [
{
enforce: 'pre',
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true,
},
test: /\.jsx?$/,
},
{
exclude: /node_modules/,
use: ['babel-loader'],
test: /\.jsx?$/,
},
{
exclude: /node_modules/,
use: [
'babel-loader',
'style-loader',
'css-loader',
'sass-loader',
],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'sass-loader',
],
}),
test: /\.scss$/,
},
],
},
output: {
filename: '[name].[chunkhash].js',
path: path.join(__dirname, '/dist'),
},
plugins: [
new ExtractTextPlugin('styles.[chunkhash].css'),
// new HtmlWebpackPlugin({
// // favicon: paths.appFavicon,
// inject: 'body',
// minify: {
// collapseBooleanAttributes: true,
// collapseWhitespace: true,
// keepClosingSlash: true,
// removeComments: true,
// removeRedundantAttributes: true,
// removeScriptTypeAttributes: true,
// removeStyleLinkTypeAttributes: true,
// useShortDoctype: true,
// },
// showErrors: false,
// template: path.join(__dirname, '/src/index.html'),
// }),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
},
'ROLLBAR_ACCESS_TOKEN': JSON.stringify('e39dde52172a4b45a7d6039e5aa369eb'),
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(true),
// this is only be useful to extract common modules from multiple chunks
// new webpack.optimize.CommonsChunkPlugin({
// minChunks: function (module, count) {
// return module.resource
// && module.resource.indexOf('node_modules') === -1
// && module.resource.match(/\.jsx?$/)
// && count > 2;
// },
// name: 'common',
// }),
new webpack.optimize.CommonsChunkPlugin({
minChunks: function (module) {
return module.resource
&& module.resource.indexOf('node_modules') !== -1;
},
name: 'vendor',
}),
new webpack.optimize.CommonsChunkPlugin({
chunks: ['vendor'],
name: 'manifest',
}),
new webpack.LoaderOptionsPlugin({
debug: false,
minimize: true,
}),
new webpack.optimize.UglifyJsPlugin({
beautify: false,
comments: false,
compress: {
screw_ie8: true,
warnings: false,
},
mangle: {
keep_fnames: true,
screw_ie8: true,
},
sourceMap: true,
}),
new webpack.ProvidePlugin({
$: 'jquery',
'window.jQuery': 'jquery',
Immutable: 'immutable',
Fluxxor: 'fluxxor',
jQuery: 'jquery',
moment: 'moment',
React: 'react',
ReactDom: 'react-dom',
}),
],
resolve: {
alias: {
'~': path.join(__dirname, '/src/scripts'),
'@': path.join(__dirname, '/src/stylesheets'),
},
extensions: [
'.js',
'.js.jsx',
'.jsx',
'.react.js.jsx',
],
},
};Dank