Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/402.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 网页包能让项目变得更大吗?_Javascript_Cordova_Webpack_Babeljs - Fatal编程技术网

Javascript 网页包能让项目变得更大吗?

Javascript 网页包能让项目变得更大吗?,javascript,cordova,webpack,babeljs,Javascript,Cordova,Webpack,Babeljs,我开始在现有项目中使用webpack,它生成的包比webpack之前大得多。 我正在使用我能想到的所有优化,但它仍然比以前大60%左右。 我不知道我做错了什么 我的配置: 'use strict'; // Modules var webpack = require('webpack'); var autoprefixer = require('autoprefixer'); var HtmlWebpackPlugin = require('html-webpack-plugin'); //va

我开始在现有项目中使用webpack,它生成的包比webpack之前大得多。 我正在使用我能想到的所有优化,但它仍然比以前大60%左右。 我不知道我做错了什么

我的配置:

'use strict';

// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var jQueryPlugin = require('jquery');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//var Promise = require('es6-promise-polyfill').Promise;

module.exports = function makeWebpackConfig (options) {
    /**
     * BUILD is for generating minified builds
     */
    var BUILD = !!options.BUILD;

    var config = {};

    config.entry = {
        app: './app.js',
        iosCordova: ['./static/wrapper-resources/js/ios/cordova_all.js'],
        androidCordova: ['./static/wrapper-resources/js/android/cordova_all.js']
    };

    /**
     * Output
     */
    config.output = {
        // Absolute output directory
        path: __dirname + '/public',

        // Output path from the view of the page
        // Uses webpack-dev-server in development
        publicPath: 'http://localhost:8080/',

        filename: '[name].bundle.js',

        // non-entry

        chunkFilename: '[name].bundle.js'
    };
    if (BUILD) {
        config.devtool = 'source-map';
    } else {
        config.devtool = 'eval';
    }

    /**
     * Loaders
     */
    config.module = {
        noParse: /node_modules\/html2canvas/,
        preLoaders: [],
        loaders: [
            {
                // JS LOADER
                test: /\.js$/,              
                loader: 'babel?optional[]=runtime,cacheDirectory',
                presets: ['es2015'],
                plugins: ['transform-runtime'],
                exclude: [/node_modules/,
                    /cordova_all/
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file?name=[name].[ext]'
                //loader: 'url-loader'
            }, {
                test: /\.html$/,
                loader: 'raw'
            }]
    };

    var cssLoader = {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss', 'scss', 'sass')
    };
    config.module.loaders.push(cssLoader);

    config.postcss = [
        autoprefixer({
            browsers: ['last 2 version']
        })
    ];

    /**
     * Plugins
     */
    config.plugins = [

        // Extract css files
        new ExtractTextPlugin('[name].css')
        ,
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ];

    // build specific plugins
    if (BUILD) {
        config.plugins.push(
            new webpack.NoErrorsPlugin(),

            new webpack.optimize.DedupePlugin(),
            // Minify all javascript, switch loaders to minimizing mode
            new webpack.optimize.UglifyJsPlugin()
        )
    }

    /**
     * Dev server configuration
     */
    config.devServer = {
        contentBase: './public',
        stats: {
            modules: false,
            cached: false,
            colors: true,
            chunk: false
        }
    };  

    return config;
};

我想出来了。导入时,我没有导入节点模块的缩小版本。我想网页包的缩小和丑陋并不能解决这个问题。
谢谢你的帮助。

你没有写下你是如何决定它更大的。app.bundle.js大约是1MB,而整个项目之前大约是600KB,这并没有回答我的问题。你是怎么确定它更大的?你到底测量了什么,bundle.js和整个项目所在的文件夹?在比较大小时,您是否考虑了项目包含的图像?我可能不完全理解您的问题,但没有图像或css,也没有cordova捆绑包,只有生成的app.bundle.js。图像和其他所有内容都在我创建的公用文件夹中。即使缩小后,它是否很大?Webpack在捆绑时也添加了自己的内容。但仍然缩小你应该有更小的尺寸