在我手动更改chrome控制台(AngularJS)中的文件之前,Webpack 2提取的样式表不会加载

时间:2017-08-23 10:56:27

标签: javascript css angularjs webpack-2

我正在尝试将Webpack 2集成到AngularJS 1.6应用程序的构建过程中。我实际上是尝试使用 ExtractTextPlugin 从生成的HTML中提取CSS。

问题是当我使用 ExtractTextPlugin 提取CSS文件时: The CSS is extracted into an external file styles.css但除非我在Chrome控制台中对CSS文件进行更改(即使只添加一个空格)Here I added a space and the CSS was loaded

,否则它不会加载到页面上

我不明白为什么第一次运行时没有加载CSS,为什么在我做任何小改动时会加载。

更多详情:

我一直在关于survvs网站和主要Webpack网站上的SurviveJS和其他教程的本教程。

这是我当前的Webpack配置文件:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')
const path = require('path')
const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const fs = require('fs');
const gracefulFs = require('graceful-fs');
const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const cssnano = require('cssnano');
const posthtml = require('posthtml');

gracefulFs.gracefulify(fs);

module.exports = {
    entry: {
        main: './src/index.ts'
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '../'
    },
    plugins: [
        new CleanWebpackPlugin(['dist'], {
            root: __dirname + "/../",
            verbose: true
        }),
        new ngAnnotatePlugin({
            add: true
        }),
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.jquery': 'jquery'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                return module.context
                    && (module.context.indexOf('node_modules') !== -1 || module.context.indexOf('bower_components') !== -1);
            }
        }),
        //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
        }),
        new webpack.LoaderOptionsPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
            hash: true
        }),
        new CopyWebpackPlugin([{
            context: 'raw/',
            from: '**/*',
        }]),
        new OptimizeCssAssetsPlugin({
            cssProcessor: cssnano,
            cssProcessorOptions: { 
                discardComments: {
                    removeAll: true 
                }
            },
            canPrint: true
        }),
        new ExtractTextPlugin("styles.css")
    ],
    module: {
        loaders: [
            {
                test: /\.ts(x?)$/,
                loader: 'ts-loader'
            },
            {
                test: /\.less$/i,
                use: ExtractTextPlugin.extract({
                    fallback: ['style-loader', 'css-loader', 'less-loader'],
                    use: ['css-loader', 'less-loader']
                })
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: [
                    { 
                        loader: 'html-loader', 
                        options: { 
                            minimize: true 
                        } 
                    }
                ]
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(gif|png|jpe?g|svg|ico)$/i,
                loaders: [
                    'file-loader',
                    {
                        loader: 'image-webpack-loader',
                        query: {
                            mozjpeg: {
                                progressive: true,
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            optipng: {
                                optimizationLevel: 7,
                            },
                            pngquant: {
                                quality: '75-90',
                                speed: 3,
                            },
                        }
                    }
                ]
            },
            {
                test: /\.ts$/,
                enforce: "pre",
                loader: 'tslint-loader'
            },
            {
                test: /^((?!\.spec\.ts).)*.ts$/,
                enforce: "post",
                exclude: /(node_modules|bower_components)/,
                loader: 'istanbul-instrumenter-loader'
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
        modules: [path.resolve(__dirname, "src"), "node_modules", "bower_components"]
    }
};

0 个答案:

没有答案