webpack - 删除“webpackBootstrap”代码

Question

我正在使用 WebPack 连接 js 文件并输出到 dist 文件夹。这一切似乎都有效，但我的问题是我想在没有额外的 webpack boostrap 代码的情况下连接所有 js 文件

/******/ (function(modules) { // (/******/ (function(modules) { // webpackBootstrap)......

有没有办法阻止 webpack 添加该代码，而只是获取普通的 js 文件并连接它们（如 gulp-concat）。

Answer 1

假设您使用的是 Webpack 4，请将 runtimeChunk 放到配置文件中，这样 Webpack 将生成一个仅包含 webpackBootstrap 部分的运行时 .js 文件，从而使您的输出文件保持干净：

optimization: {
    runtimeChunk: true,
}

Answer 2

可以使用webpack-merge-and-include-globally。

webpack.config.js

const path = require('path');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new MergeIntoSingleFilePlugin({
      "bundle.js": [
        path.resolve(__dirname, 'src/util.js'),
        path.resolve(__dirname, 'src/index.js')
      ],
      "bundle.css": [
        path.resolve(__dirname, 'src/css/main.css'),
        path.resolve(__dirname, 'src/css/local.css')
      ]
    })
  ]
};

https://code.luasoftware.com/tutorials/webpack/merge-multiple-javascript-into-single-file-for-global-scope/#webpack-merge-and-include-globally

Answer 3

你应该将 webpack.config.js 文件中输出的库类型更改为var，如下所示：

    output: {
      library: {
      name: "[name]",
      type: "var" 
           },
     libraryTarget: "umd",
     path: path.resolve(__dirname, "dist"),
},

Answer 4

我也有同样的问题。这个 webpack 额外代码破坏了我的全局命名空间，并且在我的 <script> 标签中使用 then 时，我的全局变量不起作用。

我尝试了Desmond Lua 的答案，但它因一堆错误而失败。为了解决这个问题，我停止使用webpack，开始使用gulp、gulp-concat、gulp-typescript：

packages.json

{
  "scripts": {
    "gulp": "gulp main"
  },
  "dependencies": {
    "@types/gulp": "^4.0.6",
    "@types/gulp-concat",
    "@types/gulp-typescript",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-resolve-dependencies": "^3.0.1",
    "gulp-typescript": "^6.0.0-alpha.1",
    "typescript": "^3.7.3"
  }
}

src/someimport.ts

class SomeClass {
    delay: number;
}

src/main.ts

/// <reference path="./someimport.ts" />

someclass = new SomeClass();
someclass.delay = 1;

此main gulp 任务（在gulpfile.js 上）仅针对src/main.js 文件，解析其所有/// <reference path=... 包含引用。这些包含被称为Triple-Slash Directives，它们仅用于编译器工具来组合文件。在我们的例子中，.pipe(resolveDependencies({ 和 typescript 本身在检查文件是否缺少类型、变量等时明确使用它们。

1. https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html
2. When do I need a triple slash reference?

如果您想自定义var tsProject = ts.createProject 调用而不使用tsconfig.json 文件或覆盖其参数，请参阅https://github.com/ivogabe/gulp-typescript#api-overview。

gulpfile.js

var gulp = require("gulp");
var concat = require('gulp-concat');
var resolveDependencies = require('gulp-resolve-dependencies');

var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("main", function() {
  return gulp
    .src(["src/main.ts"])
    .pipe(resolveDependencies({
      pattern: /^\s*\/\/\/\s*<\s*reference\s*path\s*=\s*(?:"|')([^'"\n]+)/gm
    }))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(tsProject())
    .pipe(concat('main.js'))
    .pipe(gulp.dest("build/"));
});

如果您想定位所有类型脚本项目文件，而不仅仅是src/main.ts，您可以替换它：

  return gulp
    .src(["src/main.ts"])
    .pipe(resolveDependencies({
    ...
// -->
  return tsProject
    .src()
    .pipe(resolveDependencies({
    ...

如果您不想使用typescript，您可以使用这个简化的gulpfile.js 并从package.json 中删除所有typescript 包含：

gulpfile.js

var gulp = require("gulp");
var concat = require('gulp-concat');
var resolveDependencies = require('gulp-resolve-dependencies');

gulp.task("main", function() {
  return gulp
    .src(["src/main.js"])
    .pipe(resolveDependencies({
      pattern: /^\s*\/\/\/\s*<\s*reference\s*path\s*=\s*(?:"|')([^'"\n]+)/gm
    }))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(concat('main.js'))
    .pipe(gulp.dest("build/"));
});

packages.json

{
  "scripts": {
    "gulp": "gulp main"
  },
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-resolve-dependencies": "^3.0.1"
  }
}

然后，在运行命令npm run gulp 后，将创建文件build/main.js，其内容如下：

build/main.js

class SomeClass {
}
/// <reference path="./someimport.ts" />
someclass = new SomeClass();
someclass.delay = 1;

这允许我在提供build 目录文件之后，使用script 标记将其包含在浏览器中：

<html>
    <head>
        <script src="main.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            console.log(someclass.delay);
        </script>
    </body>
</html>

相关问题：

1. https://www.typescriptlang.org/docs/handbook/gulp.html
2. Can I use the typescript without requireJS?
3. Gulp simple concatenation of main file that requires another JS file
4. Client on node: Uncaught ReferenceError: require is not defined
5. How can typescript browser node modules be compiled with gulp?
6. Concatenate files using babel
7. How to require CommonJS modules in the browser?
8. Is there an alternative to Browserify?