gpt4 book ai didi

webpack - 仅为某些 block 生成源映射

转载 作者:行者123 更新时间:2023-12-03 23:57:23 26 4
gpt4 key购买 nike

我正在使用 webpack 构建我的应用程序。我生成了 3 个包:app.js、vendor.js 和 manifest.js。由于我已将 UglifyJsPlugin 添加到我的 conf 中,因此还生成了 3 个源映射。

我只想为我的 app.js 包生成一个源映射,因为其他 2 个对我没用。
有没有办法告诉 uglifier 只为我想要的块生成源映射,而不是全部?

这是我目前拥有的:

                               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

这是我想要的:
                               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

如果需要,这是我的整个 conf 文件:

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',
],
},
};


谢谢

最佳答案

使用 SourceMapDevToolPlugin而不是 devtool您将能够排除以下文件:

new webpack.SourceMapDevToolPlugin({
filename: "sourcemaps/[file].map",
test: /\.(js|jsx|css)($|\?)/i,
exclude: /vendor\..+\.js/
})

关于webpack - 仅为某些 block 生成源映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42580971/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com