Question

我正在编译需要package.json的版本值的代码：

import {version} from '../package.json';
export default {version};

当我查看webpack输出的.js文件时，我看到整个package.json！

我该如何避免这种情况？

我的设置是：

plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
    new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8
    }),
]

我的网络包版本为3.8.1

Answer 1

我通常采用的是 DefinePlugin

// webpack.config.js
// getting the version
const package = require("./package.json");
const version = package.version;

plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"',
        'process.env.VERSION': version,
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
    new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8
    }),
]

现在，在您的代码中，您只需使用 process.env.VERSION ，然后输出您的软件包版本。

希望有所帮助

Answer 2

现代webpack版本支持Tree shaking（https://webpack.js.org/guides/tree-shaking/），但仅当导出指令由特殊方案配置时才有效，包括每个实体的独立命名导入。在这种情况下，webpack可以执行分析依赖关系图并仅包括所需的实体。此外，import指令不支持destruct - 它只是命名导入的语法，因此大型JS对象将始终以单片方式导入。

按定义导入值不可用，因为webpack仅对包含源代码和自定义资源依赖性的文件集执行捆绑。 ES6模块中的实际导入（目前已在大多数平台上得到支持）也不提供值导入 - 而是它的绑定。 https://ponyfoo.com/articles/es6-modules-in-depth#bindings-not-values

当然，原始问题可以通过webpack replace或alias插件来解决。只需将version存储在某个独立的文件或字符串常量中，并将其替换为捆绑。最简单的解决方案是

import version from 'PACKAGE_VERSION'

然后使用回调https://webpack.js.org/configuration/externals/配置external

externals: [
  function(context, request, callback) {
    if (request === 'PACKAGE_VERSION'){
      return callback(null, 'exports.default = ' + JSON.stringify(JSON.parse(fs.readFileSync('package.json')).version));
    }
    callback();
  }
],

webpack仅导入变量值

2 个答案: