Question

我想了解如何将多个bundle.js文件（例如main.bundle.js，scripts.bundle.js等）（数量为5个）合并到一个bundle.js文件中，并在index.html中进行引用创建。我正在使用angular-cli，它依次使用webpack。

我能够使用单独的npm模块合并文件，但不能使用webpack配置。

Answer 1

您可以使用JavaScript配置文件webpack.config.js确定Webpack的功能以及它的工作方式。这样做

entry: {
  app: 'src/app.ts',
  vendor: 'src/vendor.ts'
},

output: {
  filename: 'app.js'
}

app.ts和vendor.ts都将合并到app.js中。如果你想让他们分开吗

entry: {
  app: 'src/app.ts',
  vendor: 'src/vendor.ts'
},

output: {
  filename: '[name].js'
}

希望这会有所帮助。

Answer 2

您有一个条目文件，例如app.js。

然后你可以让webpack的配置文件知道如何命名webpack.config.js，并在webpack配置文件中找到应用程序的入口点app.js

在webpack的最低配置下，您可以使用以下内容：

// Path Module for relative addressing
const path = require('path');

// Webpack Configuration
module.exports = {

    entry : './src/app.js',

    output : {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },

    module : {
        rules : [
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015']
                        }
                    }
                ]
            },
        ]
    },

}

您需要为angular设置正确的加载器才能编译代码，例如typescript或......

然后在app.js（申请的入口点）

// Importing libs

import $ from 'jquery';

// Import jQuery plugins
window.ionRangeSlider = require('ion-rangeslider');
window.remodal = require('remodal');

// Importing several js modules or components
require('./js/utils');
require('./js/general');
// ...

// Import sass files 
// NOTE: In order to compile sass or css you need to set the loader in the webpack.config.js file
require('./scss/styles.scss');

// AND WHATEVER YOU WANT YOU CAN IMPORT HERE

当你告诉webpack编译你的代码时，它从你的入口点开始并编译你在app.js中包含的所有资产并导出一个名为app.bundle.js的文件

我希望它有所帮助;）

Answer 3

尝试这些标志

ng build --aot --prod --bo -sm --vendor-chunk=false --output-hashing=none

我发现here

还有一个易于使用的webpack combiner plugin，您应该查看，例如：

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var MergeFilesPlugin = require('merge-files-webpack-plugin');

module.exports = {
    entry: {
        'entry1': './tests/test1/src/entry1/index.js',
        'entry2': './tests/test1/src/entry2/index.js'
    },
    output: {
        path: path.join(__dirname, './tests/test1/public'),
        filename: 'all-bundled.js'
    },
    module: {
        rules: [
            {
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                }),
                test: /\.css$/,
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].style.css'
        }),
        new MergeFilesPlugin({
            filename: 'css/style.css',
            test: /style\.css/, // it could also be a string
            deleteSourceFiles: true
        })
    ]
}

但那将是你似乎反对的另一个npm模块。目前尚不清楚你究竟在问什么，因为你没有给出你曾经尝试过的例子，或者你运行的构建命令。

还有一些名为multicompiler的东西应该检查出来。

[
  {
    entry: './app.js',
    output: {
      filename: 'app.js'
    }
  },
  {
    entry: ['es5-shim', 'es5-shim/es5-sham', 'es6-shim', './vendor/polyfills.js'],
    output: output: {
      filename: 'concated.js'
    }
  }
]

如何使用webpack将所有bundle文件合并到角度应用程序中的单个js中？

3 个答案: