时间戳

首页 > 解决方案 > 如果文件在本地主机上，则使用 webpack 复制文件，否则缩小

javascript - 如果文件在本地主机上，则使用 webpack 复制文件，否则缩小

问题描述

我是 Webpack 的新手。

我的团队正在使用 Golang 作为服务器，并开始在前端使用 ReactJS + MobX。我们使用 Webpack 将所有代码捆绑/转译到每页一个捆绑文件中。（它是多页应用程序。）

我的 PM 让我考虑将所有这些前端代码从static名为 的新文件夹中移动src，并执行以下操作：

设置环境，以便：

由于 Golang 运行的是服务器而不是 Webpack（我们的用例只是开发时的转译），有没有办法让 Webpack 像这样工作？

注意：我们的入口文件不一定在同一级别，但具有类似的路径static/js/[relative path of one or more levels]/entry.js

标签： javascriptwebpackbundling-and-minification

解决方案

使用webpack 合并你可以做到这一点

基本上你需要3个文件

  1. 主 webpack.config.js 文件
  2. 用于开发环境的 webpack.dev.js
  3. webpack.prod.js 用于生产环境

示例：webpack.dev.js

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");

module.exports = merge(baseConfig, {
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development'),
                'BASE_URL': JSON.stringify('http://localhost:5000/')
            }
        })
    ],
    watch: true
});

webpack.prod.js。您可以看到我在 prod 模式下使用了一些优化包，例如 OptimizeCSSAssetsPlugin、CompressionPlugin、UglifyJsPlugin 来对文件内容进行 uglify 和 gzip 压缩以提高性能。您可以根据需要进行相应调整。 

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");

module.exports = merge(baseConfig, {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production'),
                'BASE_URL': JSON.stringify('a/')
            }
        }),
        new CompressionPlugin({
            test: /\.(js|css)/
        }),
        new UglifyJsPlugin(),
    ]
});

要运行它，只需在 package.json 中使用这 2 个命令

 "prod": "webpack -p --mode=production --config webpack.prod.js",
 "start": "webpack --mode=development --config webpack.dev.js",

推荐阅读