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

Question

我正在尝试使用webpack将多个javascript文件串联在一起，并将它们最小化。

所以我的问题可以用webpack完成吗？ 如何？

我尝试了很多方法，但是无法按照我想要的方式工作。

最好的例子。

3个javascript文件。

app.js

var fnA = function () {
    console.log('fnA')
}

global.js

fnA();

main.js

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

webpack.config.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
        }),
    ]
};

我期望global.js能够调用app.js中的任何函数。 也许这可以用咕done作成，但是我认为webpack也可以做到。

担心我朝着完全错误的方向前进。 谷歌周围，但似乎找不到任何解决方案，尝试与其他插件suc作为块，这没有帮助。

欢迎任何建议。 提前致谢。

Answer 1

我整理了一些简单的东西，但您需要巴别塔。

https://github.com/vpanjganj/simple-webpack-sample

这是您的webpack配置：

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
    })
  ]
};

这是您的2个模块：

第一个模块moduleOne.js ：

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

moduleTwo.js文件：

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

和您的main.js文件：

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

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

myApp();

构建命令：

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