Webpack如何构build生产代码以及如何使用它
我对webpack非常陌生，我发现在生产版本中，我们可以减less整体代码的大小。 目前webpack大约build立了8MB的文件和5MB的main.js。 如何减less生产构build中的代码的大小？ 我从互联网上find一个示例webpackconfiguration文件，并为我的应用程序进行了configuration，我运行了npm run build及其开始构build，并在./dist/目录中生成了一些文件。
- 这些文件仍然很重（与开发版本相同）
- 如何使用这些文件？ 目前我正在使用webpack-dev-server来运行应用程序。
package.json文件
{ "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", "scripts": { "test": "", "start": "babel-node src/server/bin/server", "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors" }, "dependencies": { "scripts" : "", ... }, "devDependencies": { "scripts" : "", ... } }
webpack.config.js
var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var public_dir = "src/frontend"; var ModernizrWebpackPlugin = require('modernizr-webpack-plugin'); module.exports = { devtool: 'eval-source-map', entry: [ 'webpack-hot-middleware/client?reload=true', path.join(__dirname, public_dir , 'main.js') ], output: { path: path.join(__dirname, '/dist/'), filename: '[name].js', publicPath: '/' }, plugins: [ plugins ], module: { loaders: [loaders] } };
webpack.production.config.js
var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var public_dir = "src/frontend"; var ModernizrWebpackPlugin = require('modernizr-webpack-plugin'); console.log(path.join(__dirname, 'src/frontend' , 'index.html')); module.exports = { devtool: 'eval-source-map', entry: [ 'webpack-hot-middleware/client?reload=true', path.join(__dirname, 'src/frontend' , 'main.js') ], output: { path: path.join(__dirname, '/dist/'), filename: '[name].js', publicPath: '/' }, plugins: [plugins], resolve: { root: [path.resolve('./src/frontend/utils'), path.resolve('./src/frontend')], extensions: ['', '.js', '.css'] }, module: { loaders: [loaders] } };
您可以按照@Vikramaditya的build议添加插件。 然后生成生产版本。 您必须运行该命令
webpack -p --config ./webpack.production.config.js
-p告诉webpack生成生产版本。 您必须更改package.json中的构build脚本以包含生产标志。
使用这些插件来优化您的生产构build：
new webpack.optimize.CommonsChunkPlugin('common'), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.AggressiveMergingPlugin()
我最近才知道压缩webpack插件gzips您的输出包，以减less其大小。 在上面列出的插件列表中添加这个以进一步优化您的生产代码。
new CompressionPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0.8 })
服务器端dynamicgzip压缩不build议用于静态客户端文件，因为CPU使用率过高。
在观察这个问题的观众人数后，我决定从Vikramaditya和Sandeep那里得出答案。
要构build生产代码，首先要创build的是带有优化包的生产configuration，
new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.AggressiveMergingPlugin()
然后在package.json文件中，您可以使用此生产configuration来configuration生成过程
"scripts": { "build": "NODE_ENV=production webpack -p --config ./webpack.production.config.js" },
现在您必须运行以下命令来启动构build
npm run build
根据我的生产构buildconfigurationwebpack将生成源./dist目录。
现在你的UI代码将在./dist/目录下。 将您的服务器设置为为请求提供这些UI代码。 你完成了！
你可以在你的webpack.config.js文件中使用argv npm模块（通过运行npm install argv –save进行安装 ），以及使用-p标志“build”：“webpack -p”的产品在下面的webpack.config.js文件中添加条件
plugins: [ new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': argv.p ? JSON.stringify('production') : JSON.stringify('development') } }) ]
这就是它。
这将帮助你。
plugins: [ new webpack.DefinePlugin({ 'process.env': { // This has effect on the react lib size 'NODE_ENV': JSON.stringify('production'), } }), new ExtractTextPlugin("bundle.css", {allChunks: false}), new webpack.optimize.AggressiveMergingPlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: true, compress: { warnings: false, // Suppress uglification warnings pure_getters: true, unsafe: true, unsafe_comps: true, screw_ie8: true }, output: { comments: false, }, exclude: [/\.min\.js$/gi] // skip pre-minified libs }), new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack new CompressionPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0 }) ],
除了Gilson PJ回答：
new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.AggressiveMergingPlugin()
同
"scripts": { "build": "NODE_ENV=production webpack -p --config ./webpack.production.config.js" },
导致它试图丑化你的代码两次。 有关更多信息，请参见https://webpack.github.io/docs/cli.html#production-shortcut-p 。
您可以通过从插件数组中删除UglifyJsPlugin或添加OccurrenceOrderPlugin并删除“-p”标记来解决此问题。 所以一个可能的解决scheme将是
new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.AggressiveMergingPlugin()
和
"scripts": { "build": "NODE_ENV=production webpack --config ./webpack.production.config.js" },
如果在webpack.dev.config和webpack.prod.config中有很多重复的代码，则只能在某些情况下使用布尔isProd来激活某些function，并且只有一个webpack.config.js文件。
const isProd = (process.env.NODE_ENV === 'production'); if (isProd) { plugins.push(new AotPlugin({ "mainPath": "main.ts", "hostReplacementPaths": { "environments/index.ts": "environments/index.prod.ts" }, "exclude": [], "tsConfigPath": "src/tsconfig.app.json" })); plugins.push(new UglifyJsPlugin({ "mangle": { "screw_ie8": true }, "compress": { "screw_ie8": true, "warnings": false }, "sourceMap": false })); }
顺便说一下：从Webpack中删除了DedupePlugin插件。 你应该从你的configuration中删除它。
更新：
除了我以前的回答：
如果您想隐藏您的代码以便发布，请尝试使用enclosejs.com 。 它允许你：
- 在没有源代码的情况下制作应用程序的发行版
- 创build一个自解压的存档或安装程序
- 制作封闭的源代码GUI应用程序
- 把你的资产放在可执行文件中
你可以用npm install -g enclose来安装它
