Webpack 如何构建生产代码以及如何使用它

Question

我对 webpack 很陌生，我发现在生产环境中我们可以减少整体代码的大小。目前 webpack 构建大约 8MB 文件和 main.js 大约 5MB。如何减少生产构建中的代码大小？我从互联网上找到了一个示例 webpack 配置文件，并为我的应用程序进行了配置，然后运行 npm run build 并开始构建它并在 ./dist/ 目录中生成了一些文件。

1. 这些文件仍然很重（与开发版本相同）
2. 如何使用这些文件？目前我正在使用 webpack-dev-server 来运行应用程序。

包.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]
  }
};

原文由 Gilson PJ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在观察了这个问题的观众数量后，我决定从 Vikramaditya 和 Sandeep 得出一个答案。

要构建生产代码，您必须创建的第一件事是带有优化包的生产配置，例如，

   new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

然后在 package.json 文件中，您可以使用此生产配置配置构建过程

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},

现在您必须运行以下命令来启动构建

npm run build

根据我的生产构建配置，webpack 会将源代码构建到 ./dist 目录。

现在您的 UI 代码将在 ./dist/ 目录中可用。配置您的服务器以将这些文件作为静态资产提供。完毕！

原文由 Gilson PJ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以按照@Vikramaditya 的建议添加插件。然后生成生产版本。你必须运行命令

NODE_ENV=production webpack --config ./webpack.production.config.js

如果使用 babel ，您还需要在上述命令 BABEL_ENV=node 前缀。

原文由 sandeep 发布，翻译遵循 CC BY-SA 4.0 许可协议