制作Webpack 2.2.1 输出单个JS文件答案

【问题标题】：Make Webpack 2.2.1 Output Single JS File制作Webpack 2.2.1 输出单个JS文件
【发布时间】：2017-06-18 21:07:13
【问题描述】：

我有一个非常简单的项目用于测试 webpack。针对我的代码运行时，我得到 2 个输出文件，0.bundle.js 和 bundle.js。

如何防止这种情况并让 webpack 只输出一个 js 文件？

文件夹结构

>- dist
>- node_modules
v- src
    v- libs
        BlackTriangle.js
    app.js
    index.html
    main.js
package.json
webpack.config.js

webpack.config.js

var path = require("path"),
    webpack = require("webpack");

module.exports = {
    entry: "./src/main.js",
    devtool: "source-map",
    resolve: {
        extensions: [ ".js", ],
        modules: [ "node_modules", ],
        alias: {
            "BlackTriangle" : "./libs/BlackTriangle",
        },
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "main.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                options: {
                    presets: ["es2015"],
                },
            },
        ],
    },
};

index.html

<!DOCTYPE html>
<html>
    <head>
        <base href="/">
        <meta charset="utf-8">
        <title>Webpack Black Triangle</title>
        <link rel="stylesheet" type="text/css" href="main.css">
        <script type="text/javascript" data-main="main" src="node_modules/requirejs/require.js"></script>
    </head>
    <body>
        <div id="triangle" class="BlackTriangle">
            <div class="BlackTriangle-inner"></div>
        </div>
    </body>
</html>

main.js

//  Configure requirejs to work with external libraries
require.config({
    //
    baseUrl: "",
    paths: {
        "BlackTriangle" : "libs/BlackTriangle",
    },
});


(function() {
    "use strict";

    //  Call the main function when the page load has completed
    if (document.readyState == "complete") {
        main();
    }
    else if (window.addEventListener) {
        window.addEventListener("load", main, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", main);
    }
    else
    {
        var oldOnload = window.onload;
        window.onload = function() {
            oldOnload();
            main();
        };
    }

    function main() {
        require([ './app' ], function(app) {
            app.init();
        });
    }
})();

app.js

define((require) => {
    'use strict';

    return {
        init: () => {
            const BlackTriangle = require("BlackTriangle");

            const triangle = new BlackTriangle('#triangle');

            window.setInterval(
                () => {
                    triangle.rotate(1);
                    triangle.render();
                },
                20
            );
        },
    };
});

BlackTriangle.js

define((require) => {
    const blackTriangle = function(selector) {
        this.angle = 0;
        this.innerEl = document.querySelector(selector).querySelector('.BlackTriangle-inner');
    };

    blackTriangle.prototype.rotate = function(amount) {
        this.angle = (this.angle + amount) % 360;
    };

    blackTriangle.prototype.render = function() {
        this.innerEl.style.transform = `rotate(${this.angle}deg)`;
    };

    return blackTriangle;
});

【问题讨论】：

不需要为不应该一起工作的文件添加sn-ps，尤其是不能在浏览器中运行的webpack
您是否清理了 dist 文件夹并再次运行构建？它仍然产生2个文件吗？
创建两个输出文件应该not even be possible.
@AdamWolski Snippets 是最简单的方法。代码示例插入与格式保持一致。（想通了）我已经清理了 dist 文件夹。 0.bundle.js 包含 BlackTriangle.js 和 app.js 的内容，而 bundle.js 仅包含 webpack 加载器代码和我的 main.js 代码。
@ssc-hrep3 该帖子是关于多个输出路径的，而不是文件（块）。 Webpack 从单个入口点输出 2 个不同的文件（块）。

标签： javascript webpack requirejs

【解决方案1】：

你可以通过LimitChunkCountPlugin插件强制 webpack 只创建一个块：

plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1, // disable creating additional chunks
    })
],

【讨论】：

我试过这个，不管出于什么原因，它似乎杀死了 HtmlWebpackPlugin，并且我的 html 模板不再被处理。
我解决了我的问题。 github.com/webpack/webpack/issues/1389 原来是 AMD 加载问题。将我的主模块切换到定义似乎可以解决问题。

【解决方案2】：

使用require 中的define instead 解决我项目中的问题（感谢@GetFuzzy）

之前：

require(["jquery"], function($) {
  ...
});

之后：

define(["jquery"], function($) {
  ...
});

【讨论】：