Question

我有一个看起来像这样的模块：

let Info = {};

Info.VALUE_ONE = 123;
Info.VALUE_TWO = 456;
Info.VALUE_THREE = 789;

module.exports = Info;

我希望这个模块在编译完成后从代码中完全消失，并且在适用的情况下只有123,456和789的内联值 - 如何使用Webpack执行此操作？

Answer 1

听起来您可能想要使用webpack.DefinePlugin，它允许您在编译时内联全局值。

<强> webpack.config.js

plugins: [
  new webpack.DefinePlugin({
    Info: require('./info.js'),
  }),
  //...
]

例如，您的源代码将转换如下：

<强>来源

let value = null;

switch (value) {
  case Info.VALUE_ONE:
    //...
  case Info.VALUE_TWO:
    //...
  case Info.VALUE_THREE:
    //...
  default:
    //...
}

<强>输出

let value = null;

switch (value) {
  case 123: //...

  case 456: //...

  case 789: //...

  default: //...

}

Answer 2

一种解决方案是使用string-replace-loader将Info.<key>内联到<value>。然后要删除模块本身，您有两个选择。

选项1 ：保留您的commonjs语法并使用null-loader将模块转换为空对象。使用这种方法的警告是我没有看到任何方法来删除对模块的引用，因为webpack安全地假设require语句本身可能产生副作用¹
选项2 ：开始使用es6导入和导出并使用webpack＆＃39; module-concatenation-plugin。这将把info.js放在与其使用者相同的范围内，允许minifier删除其代码（因为不会引用Info对象）。您还需要使用esm通过npx webpack -r esm

所以给定目录结构：

- index.js
- info.js
- webpack.config.js

此代码应该为您提供您正在寻找的内容（我使用代码段代码语法使其可折叠 - 代码无法运行）

选项1的代码

＆＃13;

    // info.js
    module.exports {
      VALUE_ONE: 123,
      VALUE_TWO: 456,
      VALUE_THREE: 789,
    }


    // index.js
    const Info = require('./info')
    console.log(Info.VALUE_ONE)


    // webpack.config.js
    const Info = require('./info')

    const searchAndReplaceInfo = createSearchAndReplaceInfo(Info)

    module.exports = {
      mode: 'development',
      entry: './index.js',
      output: {
        filename: 'bundle.js',
        path: __dirname
      },
      module: {
        rules: [
          {
            test: path.resolve(__dirname, 'info.js'),
            use: 'null-loader'
          }, {
            exclude: /\/node_modules\//,
            loader: 'string-replace-loader',
            options: {
              multiple: searchAndReplaceInfo
            }
          }
        ]
      }
    }

    function createSearchAndReplaceInfo(Info) {
      return Object.keys(Info).map(key => [key, Info[key]]).map(toSearchAndReplace)
    }

    function toSearchAndReplace([key, value]) {
      return {
        search: 'Info.' + key,
        replace: '' + value
      }
    }

＆＃13;

选项2的代码

＆＃13;

    // info.js
    export default {
      VALUE_ONE: 123,
      VALUE_TWO: 456,
      VALUE_THREE: 789,
    }


    // index.js
    import Info from './info'
    console.log(Info.VALUE_ONE)


    // webpack.config.js
    import Info from './info'
    import webpack from 'webpack'

    const searchAndReplaceInfo = createSearchAndReplaceInfo(Info)

    export default {
      mode: 'development',
      entry: './index.js',
      output: {
        filename: 'bundle.js',
        path: __dirname
      },
      plugins: [ new webpack.optimize.ModuleConcatenationPlugin() ],
      module: {
        rules: [
          {
            exclude: /\/node_modules\//,
            loader: 'string-replace-loader',
            options: {
              multiple: searchAndReplaceInfo
            }
          }
        ]
      }
    }

    function createSearchAndReplaceInfo(Info) {
      return Object.keys(Info).map(key => [key, Info[key]]).map(toSearchAndReplace)
    }

    function toSearchAndReplace([key, value]) {
      return {
        search: 'Info.' + key,
        replace: '' + value
      }
    }

＆＃13;

<强> side-effect¹

A＆＃34;副作用＆＃34;定义为导入时执行特殊行为的代码，而不是公开一个或多个导出。一个例子是polyfill，它影响全局范围，通常不提供导出。

使用webpack中的字段值替换具有静态字段的对象

2 个答案: