我可以使用 webpack 单独缩小文件吗？答案

【问题标题】：Can I minify file separately with webpack?我可以使用 webpack 单独缩小文件吗？
【发布时间】：2018-07-25 08:59:09
【问题描述】：

我有一个项目，其中有很多 JavaScript 文件，分别位于多个文件夹中。

root
 | - index.html
 | - lib
 | -- jquery-ui.js
 | -- jquery.js
 | -- html2canvas.js
 |  
 | - js
 | -- main.js
 | -- app1.js
 | -- app2.js
 | -- app3.js

O 需要使用 webpack 分别缩小这些文件，使每个文件保持其路径。

我不希望一个文件包含所有代码。

我目前的配置：

const path = require('path');

module.exports = {
    entry:[
        './js/index.js',
        './pages/MCF/js/index.js',
        './pages/MCF/js/refresh.js',
        './pages/MCF/lang/index.js',
        './pages/MCF/lib/scriptJs/script.js',
        './pages/MCF/lib/scriptJs/load.js'
        ],
    output :{
        path :path.resolve('./prod/js'),
        filename: "app.min.js"
    },
    module:{
        rules:[
        {
            test:/\.js$/,
            exclude: /(node_modules|bower_components)/,
            use:['babel-loader']
        }
        ]
    }
}

【问题讨论】：

将条目作为对象。
@Jai ** 谢谢 **
@Jai 您可以将此作为答案发布并进一步详细说明吗？看起来这个问题在谷歌上是排名第一的结果。

标签： javascript webpack minify

【解决方案1】：

You can take a reference from here for multiple-entry-points.

这是您应该采用单独文件构建的方式：

module.exports = {
  entry:{
    main      : './js/index.js',
    main2     : './pages/MCF/js/index.js',
    refresh   : './pages/MCF/js/refresh.js',
    langindex : './pages/MCF/lang/index.js',
    script    : './pages/MCF/lib/scriptJs/script.js',
    load      : './pages/MCF/lib/scriptJs/load.js'
    },
    output :{
      path :path.resolve('./prod/js'),
      filename: "[name].min.js"
    },
    ...
};

[name].min.js

这个[name] 可以让您将每个条目的构建保存为给定的名称（键）。输出将是：

./prod/js/main.js, 
./prod/js/main2.js
// so on

【讨论】：