如何在使用webpack的angular应用程序中将所有的包文件合并成一个单独的js？

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'
    }
  }
]