Javascript 网页包能让项目变得更大吗?
我开始在现有项目中使用webpack,它生成的包比webpack之前大得多。 我正在使用我能想到的所有优化,但它仍然比以前大60%左右。 我不知道我做错了什么 我的配置:Javascript 网页包能让项目变得更大吗?,javascript,cordova,webpack,babeljs,Javascript,Cordova,Webpack,Babeljs,我开始在现有项目中使用webpack,它生成的包比webpack之前大得多。 我正在使用我能想到的所有优化,但它仍然比以前大60%左右。 我不知道我做错了什么 我的配置: 'use strict'; // Modules var webpack = require('webpack'); var autoprefixer = require('autoprefixer'); var HtmlWebpackPlugin = require('html-webpack-plugin'); //va
'use strict';
// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var jQueryPlugin = require('jquery');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//var Promise = require('es6-promise-polyfill').Promise;
module.exports = function makeWebpackConfig (options) {
/**
* BUILD is for generating minified builds
*/
var BUILD = !!options.BUILD;
var config = {};
config.entry = {
app: './app.js',
iosCordova: ['./static/wrapper-resources/js/ios/cordova_all.js'],
androidCordova: ['./static/wrapper-resources/js/android/cordova_all.js']
};
/**
* Output
*/
config.output = {
// Absolute output directory
path: __dirname + '/public',
// Output path from the view of the page
// Uses webpack-dev-server in development
publicPath: 'http://localhost:8080/',
filename: '[name].bundle.js',
// non-entry
chunkFilename: '[name].bundle.js'
};
if (BUILD) {
config.devtool = 'source-map';
} else {
config.devtool = 'eval';
}
/**
* Loaders
*/
config.module = {
noParse: /node_modules\/html2canvas/,
preLoaders: [],
loaders: [
{
// JS LOADER
test: /\.js$/,
loader: 'babel?optional[]=runtime,cacheDirectory',
presets: ['es2015'],
plugins: ['transform-runtime'],
exclude: [/node_modules/,
/cordova_all/
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file?name=[name].[ext]'
//loader: 'url-loader'
}, {
test: /\.html$/,
loader: 'raw'
}]
};
var cssLoader = {
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss', 'scss', 'sass')
};
config.module.loaders.push(cssLoader);
config.postcss = [
autoprefixer({
browsers: ['last 2 version']
})
];
/**
* Plugins
*/
config.plugins = [
// Extract css files
new ExtractTextPlugin('[name].css')
,
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
];
// build specific plugins
if (BUILD) {
config.plugins.push(
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin()
)
}
/**
* Dev server configuration
*/
config.devServer = {
contentBase: './public',
stats: {
modules: false,
cached: false,
colors: true,
chunk: false
}
};
return config;
};
我想出来了。导入时,我没有导入节点模块的缩小版本。我想网页包的缩小和丑陋并不能解决这个问题。
谢谢你的帮助。你没有写下你是如何决定它更大的。app.bundle.js大约是1MB,而整个项目之前大约是600KB,这并没有回答我的问题。你是怎么确定它更大的?你到底测量了什么,bundle.js和整个项目所在的文件夹?在比较大小时,您是否考虑了项目包含的图像?我可能不完全理解您的问题,但没有图像或css,也没有cordova捆绑包,只有生成的app.bundle.js。图像和其他所有内容都在我创建的公用文件夹中。即使缩小后,它是否很大?Webpack在捆绑时也添加了自己的内容。但仍然缩小你应该有更小的尺寸