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 中的任何功能。可能这可以通过grunt完成，但我认为webpack也可以这样做。

担心我会走向一个完全错误的方向。谷歌周围，但似乎无法找到任何解决方案，尝试使用其他插件成功作为块，这没有帮助。

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

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"

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

1 个答案: