当我将 webpack 从 2.7.x 升级到 4.5.x 时，main.js 捆绑的大小从 2.4 Mb 增加到 12 Mb。我不知道为什么？我已将所有加载器更新到最新版本 - 例如，url-loader、css-loader、file-loader 等。
这是我的配置 webpack 2.7.X
entry: {
home: [
'babel-polyfill',
path.join(__dirname, 'app/home-styles.js')
],
main: [
'babel-polyfill',
path.join(__dirname, 'app/styles.js'),
path.join(__dirname, 'app/vendor.js'),
path.join(__dirname, 'app/index.js')
]
},
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name]-[hash].min.js',
chunkFilename: 'static/react/js/[name]-[hash]-chunk.min.js'
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new ExtractTextPlugin({
filename: '[name]-[hash].min.css',
disable: false,
allChunks: true
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
screw_ie8: true
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
options: {
postcss: {
plugins: () =>[autoprefixer]
}
}
}),
new StatsPlugin('webpack.stats.json', {
source: false,
modules: false
}),
new webpack.DefinePlugin({
'process.env' : {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.CommonsChunkPlugin({
names: ["common"],
minChunks: 2,
async: true
})
],
module: {
rules: [
{
test: /\.js?$/,
exclude: [/node_modules/],
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: {
minimize: true
}
}
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: ['style-loader', 'sass-loader'],
use: {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]---[local]---[hash:base64:5]'
}
}
})
},
{
test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
use: {
loader: 'file-loader',
options: {
name: 'static/fonts/[name].[ext]',
limit: 10000,
mimetype: 'application/font-woff'
}
}
},
{
test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/,
use: {
loader: 'file-loader',
options: {
name: 'static/fonts/[name].[ext]'
}
}
},
{
test: /\.otf(\?[a-z0-9#=&.]+)?$/,
use: {
loader: 'file-loader',
options: {
name: 'static/fonts/[name].[ext]',
limit: 10000,
mimetype: 'application/x-opentype'
}
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: {
loader: 'file-loader',
options: {
name: 'static/images/[name].[ext]'
}
}
}
]
},
resolve: {
modules: [
path.join(__dirname, 'static'),
'node_modules'
],
extensions: ['*', '.json', '.js', '.jsx', '.css', '.scss']
},
网络包 4.5.X
devtool: 'eval-source-map',
entry: {
home: [
path.join(__dirname, 'app/home-styles.js')
],
main: [
'babel-polyfill',
path.join(__dirname, 'app/styles.js'),
path.join(__dirname, 'app/vendor.js'),
path.join(__dirname, 'app/index.js')
]
},
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name]-[hash].min.js',
chunkFilename: 'static/react/js/[name]-[hash]-chunk.min.js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new StatsPlugin('webpack.stats.json', {
source: false,
modules: false
}),
new ExtractTextPlugin({
filename: '[name]-[hash].min.css',
disable: false,
allChunks: true
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
options: {
postcss: {
plugins: () =>[autoprefixer]
}
}
})
],
optimization:{
runtimeChunk: false,
splitChunks: {
chunks: "async",
minChunks: 1,
name: true,
cacheGroups: {
commons: {
minChunks: 2
}
}
},
minimize: true
},
mode: 'production',
devServer: {
historyApiFallback: true,
noInfo: false
},
module: {
rules: [
{
test: /\.js?$/,
exclude: [/node_modules/],
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: {
minimize: true
}
}
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: ['style-loader', 'sass-loader'],
use: {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]---[local]---[hash:base64:5]'
}
}
})
},
{
test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
use: {
loader: 'file-loader',
options: {
name: 'static/fonts/[name].[ext]',
limit: 10000,
mimetype: 'application/font-woff'
}
}
},
{
test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/,
use: {
loader: 'file-loader',
options: {
name: 'static/fonts/[name].[ext]'
}
}
},
{
test: /\.otf(\?[a-z0-9#=&.]+)?$/,
use: {
loader: 'file-loader',
options: {
name: 'static/fonts/[name].[ext]',
limit: 10000,
mimetype: 'application/x-opentype'
}
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: {
loader: 'file-loader',
options: {
name: 'static/images/[name].[ext]'
}
}
}
]
},
resolve: {
modules: [
path.join(__dirname, 'static'),
'node_modules'
],
extensions: ['*', '.json', '.js', '.jsx', '.css', '.scss']
}
我也将 System.import() 更改为 import() 我做错了什么？
您将 devtool 设置为eval-source-map甚至在生产模式下。
eval-source-map - 每个模块都使用 eval() 执行，并将 SourceMap 作为 DataUrl 添加到 eval()。最初它很慢，但它提供了快速的重建速度并产生了真实的文件。行号被正确映射，因为它被映射到原始代码。它为开发提供最优质的 SourceMaps。
它还可以使您的捆绑包更大。确保为适当的模式使用不同的源映射。这是 devtool 值的列表：devtool configuration
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句