Question

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

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

无论如何都要阻止webpack添加该代码，而只是采用普通的js文件并将它们连接起来（如gulp-concat）。

Answer 1

假设您正在使用Webpack 4，请将runtimeChunk拖放到配置文件中，以便Webpack生成一个运行时.js文件，该文件仅包含webpackBootstrap部分，保持输出文件清洁：

optimization: {
    runtimeChunk: true,
}

Answer 2

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

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({和打字稿本身会在检查文件中是否缺少类型，变量等时明确使用它们。

如果您想自定义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并从typescript中删除所有package.json包含的内容：

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;

在提供script目录文件后，允许我使用build标签在浏览器中添加它：

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

webpack - 删除＆＃34; webpackBootstrap＆＃34;码

4 个答案: