Question

当我运行webpack时，它生成的缩小文件不包含所有代码。我将它贴在下面。首先，webpack配置文件：

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
    // define entry point
    entry: {
        script1: './plugins/jquery.min.js',
        script2: './bootstrap/js/bootstrap.min.js',
        script3: './plugins/modernizr.js',
        script4: './plugins/rs-plugin/js/jquery.themepunch.tools.min.js',
        script5: './plugins/rs-plugin/js/jquery.themepunch.revolution.min.js',
        script6: './plugins/isotope/isotope.pkgd.min.js',
        script7: './plugins/magnific-popup/jquery.magnific-popup.min.js',
        script8: './plugins/waypoints/jquery.waypoints.min.js',
        script9: './plugins/jquery.countTo.min.js',
        script10: './plugins/jquery.parallax-1.1.3.min.js',
        script11: './plugins/jquery.validate.min.js',
        script12: './plugins/morphext/morphext.min.js',
        script13: './plugins/vide/jquery.vide.min.js',
        script14: './plugins/owl-carousel/owl.carousel.min.js',
        script15: './plugins/jquery.browser.min.js',
        script16: './plugins/SmoothScroll.min.js',
        script17: './public/js/template.min.js',
        script18: './plugins/jquery.knob.min.js'
    },
    // define output point
    output: {
        path: './dist',
        filename: PROD ? 'bundle.min.js' : 'bundle.js'
    },
    externals: {
        'TweenLite': 'TweenLite'
    },
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false }
        })
    ] : []

};

文件输出不是我所期待的。它只有几行代码。它是：

!function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return t[o].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e){!function(t){function e(t,e){return t.toFixed(e.decimals)}t.fn.countTo=function(e){return e=e||{},t(this).each(function(){function n(){s+=l,c++,o(s),"function"==typeof r.onUpdate&&r.onUpdate.call(i,s),c>=a&&(f.removeData("countTo"),clearInterval(d.interval),s=r.to,"function"==typeof r.onComplete&&r.onComplete.call(i,s))}function o(t){var e=r.formatter.call(i,t,r);f.text(e)}var r=t.extend({},t.fn.countTo.defaults,{from:t(this).data("from"),to:t(this).data("to"),speed:t(this).data("speed"),refreshInterval:t(this).data("refresh-interval"),decimals:t(this).data("decimals")},e),a=Math.ceil(r.speed/r.refreshInterval),l=(r.to-r.from)/a,i=this,f=t(this),c=0,s=r.from,d=f.data("countTo")||{};f.data("countTo",d),d.interval&&clearInterval(d.interval),d.interval=setInterval(n,r.refreshInterval),o(s)})},t.fn.countTo.defaults={from:0,to:0,speed:1e3,refreshInterval:100,decimals:0,formatter:e,onUpdate:null,onComplete:null}}(jQuery)}]);

如何让它缩小列出的所有文件并将它们连接到单个bundle.min.js？

Answer 1

您的输出文件仅显示webpack的单个库（countTo）。这是因为您有多个入口点且只有一个输出文件名。所以发生的事情是webpack正在处理你的入口点并不断覆盖bundle.js输出文件：）

为了处理此设置，您应该将输出文件名配置为：

output: {
    path: './dist',
    filename: PROD ? '[name].bundle.min.js' : '[name].bundle.js'
},

请参阅https://webpack.js.org/configuration/output/#output-filename

但是，如果你这样做，你将最终得到每个条目的缩小文件，绝对不是你想要的。

@Felix正在使用单个条目文件 - 将您列出的文件作为入口点，将它们放入自己的文件中，例如plugins.js，其内容如下所示：

import './plugins/jquery.min.js';
import './bootstrap/js/bootstrap.min.js';
import './plugins/modernizr.js';
...

然后，将您的条目指向它：

 entry: {
    plugins: './plugins.js',
 }

运行webpack后，您应该在PROD中使用./dist/plugins.bundle.min.js，否则./dist/plugins.bundle.js。

您可以在此处详细了解how I've done it，其中还包括如何正确处理jQuery和modernizr等库。

Webpack无法缩小文件

1 个答案: