使用Webpack将多个javascript文件压缩并缩小为一个？

我正试图用webpack将多个javascript文件连接起来，缩小为一个

那么我的问题是，这可以用webpack来完成吗？怎么做

我尝试了很多方法，但都没能让它按我想要的那样工作

我最好举个例子

3个javascript文件

app.js

global.js

main.js

webpack.config.js

我希望global.js能够调用app.js中的任何函数。 也许这可以通过grunt实现，但我认为webpack也可以实现

担心我会走向一个完全错误的方向。谷歌四处搜索，但似乎找不到任何解决方案，尝试使用其他插件，如chunk，但没有帮助

欢迎任何意见。

---

提前谢谢。

我准备了一些简单的东西，但你需要巴贝尔

这是您的网页包配置：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [ "./app/main.js" ],
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    },

  module: {
    rules: [
      { test: /\.js$/, use: [ { loader: 'babel-loader' } ], exclude: /node_modules/ }
    ]
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]
};

这是您的两个模块：

第一个模块，moduleOne.js：

modulewo.js文件：

以及您的main.js文件：

要生成的命令：

$ ./node_modules/.bin/webpack  --color --display-error-details --config ./webpack.js"

---

如果粘贴了正确的代码，可能会出现拼写错误。app.js中函数的名称是fnA而不是fn，因此您在global.js中的调用可能是错误的。此外，您的函数只能在app.js中访问，因此您需要使用module.exports.typo导出它，并进行编辑。那么，为了让global.js访问函数，我需要module.exports from app.js？

require('./app.js');
require('./global.js');

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry : [
        './app/main.js'
    ],
    output : {
        path : path.resolve(__dirname, 'dist'),
        filename : 'bundle.js'
    },
    plugins : [
        new webpack.optimize.UglifyJsPlugin(
        {
            minimize: true,
            compress: false,
            mangle: {
                 keep_fnames: true
            },
            bare_returns : true
        }),
    ]
};

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [ "./app/main.js" ],
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    },

  module: {
    rules: [
      { test: /\.js$/, use: [ { loader: 'babel-loader' } ], exclude: /node_modules/ }
    ]
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]
};

export default function sayHello() {
   console.log('hello')
}

export default function sayBye() {
   console.log('bye')
}

import sayHello from './moduleOne'
import sayBye from './moduleTwo'

const myApp = ()=>{
   sayHello();
   sayBye()
};

myApp();

$ ./node_modules/.bin/webpack  --color --display-error-details --config ./webpack.js"