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

IT技术 node.js reactjs npm webpack webpack-dev-server
2021-03-26 05:39:03

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

  1. 这些文件仍然很重（与开发版本相同）
  2. 如何使用这些文件？目前我正在使用 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]
  }
};
6个回答

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

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

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

好，谢谢。我的下一个疑问是如何运行生产代码？当我运行上面的命令时，它会在 dist 目录中创建一些文件。ok，编译成功。现在如何使用这些文件？在开发模式下，我使用了“npm start”并启动了它。
2021-05-24 05:39:03
@GilsonPJ 你知道如何使用这些 UI 文件吗？
2021-06-02 05:39:03
@Vikramaditya 你能帮我解决stackoverflow.com/questions/40993795/msbuild-and-webpack 中的场景吗？
2021-06-11 05:39:03
如果你去你的src/server/bin/server. 然后你可以弄清楚它是如何提供文件的，也许可以改变它。我认为它将做的是运行 webpack 来构建文件，然后为它们提供服务。看看这个文件的代码。
2021-06-12 05:39:03
您需要先使用安装 webpack npm install webpack
2021-06-17 05:39:03

在观察了这个问题的观众数量后，我决定总结 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/目录中可用。配置您的服务器以将这些文件作为静态资产提供服务。完毕！

请注意，在 uglifyJS 插件顶部添加 -p 选项会导致问题，因为它会尝试 uglify 两次。删除 -p cli 选项为我解决了这些问题
2021-05-27 05:39:03
你最后一句话是什么意思？如何提供这些代码？我知道 node.js 自己构建了一个服务器。但是我在./dist/目录中有文件后如何运行它？
2021-05-30 05:39:03
这应该是公认的答案，因为没有人说如何为网站提供服务现在您的 UI 代码将在 ./dist/ 目录中可用。设置您的服务器为请求提供这些 UI 代码。你就完成了。！
2021-06-02 05:39:03
'NODE_ENV' 不是内部或外部命令，也不是可运行的程序或批处理文件。
2021-06-08 05:39:03
我仍然不明白如何“设置你的服务器为请求提供这些 UI 代码。你就完成了。”。我明白我们想在这里做什么，但我只是不知道该怎么做
2021-06-15 05:39:03

使用这些插件来优化您的生产构建：

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

我最近开始了解compression-webpack-plugin ，它可以对输出包进行gzip 以减小其大小。在上面列出的插件列表中也添加它以进一步优化您的生产代码。

new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
})

由于 CPU 使用率高，不建议将服务器端动态 gzip 压缩用于提供静态客户端文件。

“common.js”部分在 commonschuckplugin 上有什么作用？那个插件对我来说是最难掌握的。
2021-06-03 05:39:03
此答案不再适用于 webpack 版本 4
2021-06-03 05:39:03
CommonsChunkPlugin 从所有块中提取通用代码并将其放入单独的文件中common.js。
2021-06-13 05:39:03

自己学这个而已。我来回答第二个问题：

  1. 如何使用这些文件？目前我正在使用 webpack-dev-server 来运行该应用程序。

您可以运行“express”而不是使用 webpack-dev-server。使用 npm install "express" 并在项目的根目录中创建一个 server.js，如下所示：

var path = require("path");
var express = require("express");

var DIST_DIR = path.join(__dirname, "build");
var PORT = 3000;
var app = express();

//Serving the files on the dist folder
app.use(express.static(DIST_DIR));

//Send index.html when the user access the web
app.get("*", function (req, res) {
  res.sendFile(path.join(DIST_DIR, "index.html"));
});

app.listen(PORT);

然后，在 package.json 中，添加一个脚本：

"start": "node server.js"

最后，运行应用程序：npm run start启动服务器

详细示例可见：https : //alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ （示例代码与最新包不兼容，但可以使用小调整）

@Arpit 感谢您指出这一点。我对此很陌生。我假设一旦生成了压缩代码，运行方法应该是相同的。
2021-05-27 05:39:03
如果你开始学习 nodejs、expressjs 等东西，那么我想告诉你。这个问题是高级问题。它不仅适用于如何运行这些文件。它是关于如何最小化（压缩）生产代码以及如何运行该压缩代码
2021-05-29 05:39:03
非常感谢您的回答。即使它是一个如此简单的 nodejs 应用程序，它的路由最终也适用于我的应用程序。在此之前，我尝试将 golang 与服务库一起使用，但路由不适用于此解决方案。
2021-06-09 05:39:03

您可以使用argv npm module（通过运行npm install argv --save安装它）来获取 webpack.config.js 文件中的参数，至于生产，您使用-p flag "build": "webpack -p"，您可以在 webpack.config.js 文件中添加条件，如下所示

plugins: [
    new webpack.DefinePlugin({
        'process.env':{
            'NODE_ENV': argv.p ? JSON.stringify('production') : JSON.stringify('development')
        }
    })
]

就是这样。

@AjaxLeung：你必须argv在 webpack 配置文件中包含：const argv = require('argv');
2021-05-22 05:39:03
而是使用 process.argv.indexOf('-p') != -1
2021-06-02 05:39:03
其它你可能感兴趣的问题
上一篇如何使用带有 Redux 的连接从 this.props 获得简单的调度？ 下一篇npm 错误！代码 UNABLE_TO_GET_ISSUER_CERT_LOCALLY