代码之家  ›  专栏  ›  技术社区  ›  André Engelbrecht

从主包隔离特定的配置文件

  •  1
  • André Engelbrecht  · 技术社区  · 7 年前

    我的应用程序中有两个配置文件,一个需要单独捆绑,或者根本不捆绑,而是复制到输出文件夹中,然后由主捆绑以某种方式读取。

    我已经设法将我的文件放入一个单独的配置包中,但问题是这些文件仍然捆绑在主包中,实际上使我的配置包无用。

    我已经设法在@chase的帮助下让config包工作,但我还不高兴。接下来,我想知道如何使这些文件完全不捆绑在一起,但在部署之后仍然可以用于主捆绑包。

    有什么建议吗?

    我的项目文件夹/文件结构(基本位):

    - app
      - js
        - components
          - [all of my components]
        - config
          - [my config files that I want to isolate]
        - App.jsx
        - index.jsx
        - ...
      - ...
    

    我的网络包配置:

    const path = require('path')
    const webpack = require('webpack')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const cwd = process.cwd()
    const mode = 'production'
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    
    module.exports = {
      context: path.join(cwd, 'app'),
      mode,
    
      optimization: {
        runtimeChunk: 'single',
        minimize: false,
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 0,
          cacheGroups: {
            config: {
              test: /[\\/]app[\\/]js[\\/]config[\\/]/,
              minSize: 0
            },
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
    
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`;
              },
            }
          },
        },
      },
    
      entry: {
        app: ["babel-polyfill", './js/index.jsx'],
        silentRenew: ["./silent_renew/silent_renew.js"],
      },
    
      output: {
        path: path.resolve('dist'),
        filename: 'bundle_[name].js'
      },
    
      module: {
        rules: [{
          test: /\.jsx?$/,
          use: ['babel-loader'],
          exclude: /node_modules/
        },
        {
          test: /\.json$/,
          use: ['json-loader'],
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.less$/,
          use: [
            'style-loader',
            'css-loader',
            'less-loader'
          ]
        },
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'scss-loader'
          ]
        },
        {
          test: /\.(png|jpg|jpeg|svg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /\.(pptx|zip)$/,
          loader: "file-loader",
          options: {
            name: '[name].[ext]'
          }
        }]
      },
    
      plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
          template: './index.ejs',
          excludeChunks: ["silentRenew"],
        }),
        new HtmlWebpackPlugin({
          template: "./silent_renew/silent_renew.html",
          chunks: ["silentRenew",],
          filename: "silent_renew.html"
        }),
        new webpack.DefinePlugin({
          CONSTANTS: {
            PROD: false,
            TEST: true,
            DEV: false
          }
        }),
        new webpack.IgnorePlugin(/^(fs|ipc|ignore)$/)
      ]
    }
    

    我希望我的配置文件进入配置包,这已经开始工作了。 但是我也需要它们不包含在主包中。

    如果我可以让配置文件完全不捆绑在一起,只复制到输出文件夹中,然后通过主(应用)捆绑从中读取,那就更好了。 但是独立的配置包是第二个选项。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Chase    7 年前

    你需要根据情况把你的包裹分块。这是一个将节点模块拆分为“公共”包的示例,但是您可以重写 test 属性以匹配目录条件。

        optimization: {
        splitChunks: {
          cacheGroups: {
            commons: {
              test: /[\\/]node_modules[\\/]/,
              name: "common",
              chunks: "all"
            }
          }
        }