Question

Webpack生成的文件太大了 Webpack 2.x
Webpack专家，我现在想要在css文件中连接js 我如何包括

import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap-select/dist/css/bootstrap-select.min.css';
import 'bootstrap-multiselect/dist/css/bootstrap-multiselect.css';
import 'font-awesome/css/font-awesome.min.css';
import 'angular-ui-notification/dist/angular-ui-notification.min.css';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

import '../css/styles.css';
import '../css/custom.css';
import '../css/max-width_767.css';

webpack config

var glob = require('glob'),
    ngAnnotate = require('ng-annotate-webpack-plugin'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: __dirname + '/application/application.js',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    plugins: [
        new ngAnnotate({
            add: true,
        }),
        new ExtractTextPlugin({
            filename: '[name].css',
        })
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['babel-preset-es2015'].map(require.resolve)
                },
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    },
    node: {
        fs: 'empty'
    }
};

这就是我要解决的问题，一个庞大的bundle.js文件大概是5 MB，包含所有字体，图片等。

bundle.js 5.53 MB 0 [emitted] [big] main

我只想连接css并输出到bundle.css

我做错了什么？

Answer 1

您已加入extract-text-plugin，但实际上您似乎并未使用它。

在此处更改：

 {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
 }

类似于：

  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: "style-loader",
      loader: "css-loader"
    })
  }

Answer 2

它的回答
有必要查看limit

var glob = require('glob'),
    ngAnnotate = require('ng-annotate-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: __dirname + '/application/application.js',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    plugins: [
        new ngAnnotate({
            add: true,
        }),
        new ExtractTextPlugin('bundle.css'),
    ],
    resolve: {
        alias: {
            moment: __dirname + '/node_modules/moment/min/moment'
        },
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['babel-preset-es2015'].map(require.resolve)
                },
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader',
                options: {
                    limit: 1000
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }
        ]
    },
    node: {
        fs: 'empty'
    },
    devServer: {
        historyApiFallback: true
    }
};

Webpack生成大文件

2 个答案: