如何在 webpack 中添加输出文件？答案

【问题标题】：How to prepend outputs files with webpack?如何在 webpack 中添加输出文件？
【发布时间】：2020-01-31 13:20:24
【问题描述】：

我正在使用 webpack 将库构建到 saleforce dx 项目中。

但是当我在 github 上推送时，我有一个 eslint 验证。

此验证失败，因为它尝试检查 webpack 输出的有效性。

我正在尝试在输出文件前添加 /* eslint-disable */ 以在我推送时禁用 eslint。

所以我试试：

rules: [
      {
        loader: '@shoutem/webpack-prepend-append',
        query: {
          prepend: '/* eslint-disable */'
        }
      }
    ]

但是注释没有显示在输出文件的顶部。我认为它会在输入文件之前添加。

如何在 webpack 中添加输出文件？

【问题讨论】：

标签： javascript node.js webpack eslint

【解决方案1】：

您可以使用BannerPlugin 插件在每个生成的块的顶部添加横幅：

https://webpack.js.org/plugins/banner-plugin/

例如，您可以使用以下内容：

new webpack.BannerPlugin({
  banner: '/* eslint-disable */'
  raw: true
});
``

【讨论】：

不幸的是，它在评论中添加了一个 ! 并且 eslint 没有被禁用。
看起来您需要raw 选项
是的，但是 webpack v 4.40 删除了像 /* some text */ 这样的 cmets。因此，当我使用 raw 选项时，它会在评论中添加 cmets 但有多个 *：/** * eslint-disable */

【解决方案2】：

创建文件 eslintdisable.sh

echo "/* eslint-disable */" | cat - dist/webpackoutput.js > /tmp/out && mv /tmp/out dist/webpackoutput.js

在上面的代码中，将dist/webpackoutput.js 替换为生成 webpack 输出文件的正确路径。

然后在 package.json 中运行 webpack 如下

"scripts": {
    "build": "webpack --mode=production && sh ./eslintdisable.sh" }

【讨论】：

【解决方案3】：

我没有找到任何方法将有效的 eslint cmets 放入我的 webpack 配置中。

所以我使用 nodejs 脚本

// nodeScript.js
var path = require('path');
var fs = require('fs');

var pathDefault = '{build path}';
var jsFilesName = ['build1.js', 'build2.js'];

jsFilesName.forEach(function(file) {
  try {
    var contents = fs.readFileSync(
      path.join(__dirname, pathDefault, file + '.js'),
      'utf8'
    ); // copy contents file into a variable
    fs.writeFileSync(
      path.join(__dirname, pathDefault, file + '.js'),
      '/* eslint-disable */\r\n' + contents
    ); // rewrite content file with the concatenation of comments and contents
    console.log('   - ' + file + ' => Done');
  } catch (err) {
    console.log('   - ' + file + ' => KO');
    if (err) throw err;
  }
});

你可以在 yarn/npm build 之后启动这个脚本

例如

{
  "scripts": {
    "build": "yarn build && node ./nodeScript.js",
  }
}

【讨论】：