我用webpack+react打包的文件有2.5MB,请求大家指点迷经
antDesign 是按需引入的
webpack.config.js文件如下:
'use strict';
var webpack = require('webpack');
var path = require("path");
module.exports = {
devtool: false,
entry: {
'ime': [
path.join(__dirname,'src/app/admin/index.js')
],
bundle: 'app',
vendor: ['react']
},
output:{
path: path.join(__dirname, 'dist'),
filename:'[name].js',
},
resolve: {
alias: {
'action': path.join(__dirname, 'src/app/admin/action/index.js'),
'reducer': path.join(__dirname, 'src/app/admin/reducer/index.js'),
'store': path.join(__dirname, 'src/app/admin/store/index.js'),
'view': path.join(__dirname, 'src/app/admin/view/index.js'),
'comp': path.join(__dirname, 'src/component/index.js'),
'util': path.join(__dirname, 'src/util/index.js'),
'method': path.join(__dirname, 'src/app/admin/method/index.js'),
'ime-react': path.join(__dirname, 'src/ime-react/index.js'),
},
},
module: {
loaders: [
{
test: /\.less$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=50000&name=[path][name].[ext]'
}
]
},
externals:{
'$':true
},
plugins:[
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: false,
drop_debugger: true,
drop_console: false
}
}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
};
package.json内容如下:
{
"name": "XXX",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev-rel": "node ./build/dev-release.js",
"dev-run": "node ./build/dev-compilation.js",
"start":"node dev-server.js"
},
"author": "XXX",
"license": "ISC",
"dependencies": {
"ajax": "0.0.4",
"antd": "^2.9.3",
"draft-js-hashtag-plugin": "^2.0.0-beta1",
"draft-js-linkify-plugin": "^2.0.0-beta1",
"draft-js-plugins-editor": "^2.0.0-beta1",
"jquery": "^3.1.0",
"lodash": "^4.15.0",
"moment": "^2.15.1",
"radium": "^0.18.1",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-motion": "^0.4.4",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"redux": "^3.5.2",
"redux-react-router": "^1.0.0-beta3",
"redux-router": "^2.1.2",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.13.0",
"browser-sync": "^2.15.0",
"css-loader": "^0.24.0",
"ejs": "^2.5.1",
"express": "^4.14.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-rev-collector": "^1.0.5",
"gulp-sequence": "^0.4.6",
"gulp-uglify": "^2.0.0",
"gulp-webpack": "^1.5.0",
"html-webpack-plugin": "^2.22.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"npmlog": "^4.0.0",
"react-transform-catch-errors": "^1.0.2",
"redbox-react": "^1.3.0",
"require-dir": "^0.3.0",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"underscore-template-loader": "^0.7.3",
"url-loader": "^0.5.8",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.1",
"webpack-hot-middleware": "^2.12.2",
"crypto-js":"^3.1.8",
"async": "^2.3.0"
}
}
不过还有个开发调试的dev-server.js,开发中,包能有17M,这个只在开发模式
#!/usr/bin/env node
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var webpackConfig = require('./webpack.config.js');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = require('./config.js');
// 添加开发服务器配置
for(var entryKey in webpackConfig.entry){
webpackConfig.entry[entryKey].push('webpack-hot-middleware/client?reload=true&clean=true');
}
//webpackConfig.output.publicPath = '/dist/';
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
"filename": 'index.html',
"template": 'index.html',
"commonjs": '',
"inject": true,
"chunks": ['ime'],
"hash": true
})
);
webpackConfig.devtool = 'cheap-module-eval-source-map';
var app = express();
var compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use('/resource', express.static('src/resource'));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(config.port, function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:'+config.port);
});
请求大家帮忙指点下迷津,我也是优化了一上午都没优化成功
在网上参考了很多优化方案,但是都没达到预期目的(压缩包一点都没变小,还是2.5M)