Question

我花了3天的时间来解决我在使用webpack时遇到的问题，我希望这里的人能为我提供帮助。我们的网站有很多旧的JS文件，我想将它们捆绑到一个文件中。我创建了一个文件“ bundle.config.js”，该文件指定了多个JS文件需要捆绑的文件名。在我的情况下，files1.js，files2.js，files3.js和files4.js应该捆绑到page1-bundle.min.js中。我使用terser来缩小和捆绑文件。

这就是问题所在。当我运行“ npm run watch”时，“ file1.js”中的const卡会变形，并且在file2.js的代码中引用了本节中使用的const卡时找不到。我没有看到任何警告或错误，并且两个捆绑文件都已生成。

这是奇怪的部分。如果我注释掉bundle.config.js文件中的page2-bundle.min.js部分，则var“ card”不会混乱，并且在bundle page1-bundle.min.js中一切正常。请注意，每个捆绑包都在不同的html页面中使用。

有人可以帮我解决我做错的事情吗？我刚刚开始学习webpack，可以使用一些帮助。

文件：file1.js

const card = {
    name: "",
    address: ""
}

文件：file2.js

const person1 = {
    contact: card
}

文件：bundle.config.js

const bundleJsFiles = {
    "page1-bundle.min.js": [
        "javascript/file1.js",
        "javascript/file2.js",
        "javascript/file3.js",
        "javascript/file4.js",
    ],
    "page2-bundle.min.js": [
        "javascript/file5.js",
        "javascript/file6.js",
    ],
}

文件：webpack.config.js

const bundleConfig = require('./bundle.config.js');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
const Terser = require('terser');
const bundleJsFiles = bundleConfig.bundleJsFiles;
var combineJsFiles = [];

for (var bundleFile in bundleJsFiles) {
    var bundleFileMap = bundleFile + '.map';

    var bundle = {
        src: bundleJsFiles[bundleFile],
        dest: code => {
            const min = Terser.minify(code, {
                keep_classnames: true,
                keep_fnames: true,
                sourceMap: {
                    filename: bundleFile,
                    url: bundleFileMap
                }
            });
            return {
                [bundleFile]: min.code,
                [bundleFileMap]: min.map
            };
        },
    };
    combineJsFiles.push(bundle);
}

const bundleJsConfig = {
    devtool: 'source-map',
    entry: bundleConfig.bundleJsFiles,
    output: {
        filename: '[name]',
        path: path.resolve(__dirname, '/dist'),
    },
    plugins: [
        new MergeIntoSingleFilePlugin({
            files: combineJsFiles
        })
    ],
};

var exports = [];

if (args['bundle'] == 'true') {
    exports.push(bundleJsConfig);
}

module.exports = exports;

文件：package.json

{
    "name": "test-webpack",
    "version": "1.0.0",
    "description": "test webpack",
    "repository": {
        "type": "git"
    },
    "main": "index.js",
    "scripts": {
        "watch": "webpack --watch --mode production --display-error-details true --postcss true --bundle true --vue false",
        "build": "webpack --mode production --display-error-details true --postcss false --bundle true --vue false",
        "postcss": "webpack --mode production --display-error-details true --postcss true --bundle false --vue false"
    },
    "author": "test",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.6.3",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/preset-env": "^7.6.3",
        "autoprefixer": "^9.6.5",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.2.0",
        "cssnano": "^4.1.10",
        "disable-output-webpack-plugin": "^1.0.1",
        "file-loader": "^4.2.0",
        "mini-css-extract-plugin": "^0.8.0",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "postcss": "^7.0.18",
        "postcss-import": "^12.0.1",
        "postcss-inherit": "^4.1.0",
        "postcss-loader": "^3.0.0",
        "postcss-mixins": "^6.2.2",
        "postcss-nested": "^4.1.2",
        "postcss-preset-env": "^6.7.0",
        "postcss-simple-vars": "^5.0.2",
        "svg-inline-loader": "^0.8.0",
        "terser": "^4.3.9",
        "terser-webpack-plugin": "^2.1.3",
        "url-loader": "^2.2.0",
        "vue-loader": "^15.7.1",
        "vue-style-loader": "^4.1.2",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.41.0",
        "webpack-cli": "^3.3.9",
        "webpack-merge-and-include-globally": "^2.1.20"
    }
}

使用Webpack发行捆绑JS文件

0 个答案: