为什么不提取-text-webpack-plugin在输出文件夹中创建app.css?

时间:2016-01-07 09:43:42

标签: css plugins sass webpack

我正在尝试使用extract-text-webpack-plugin在我的输出文件夹中生成一个app.css(在我的条目中我正在导入scss' s。)

我看到了这个: Webpack "OTS parsing error" loading fonts

它确实有帮助,因为如果我使用完整路径作为我的publicPath然后它可以工作,但这意味着由于某种原因,extract-text-webpack-plugin不会。

我的配置:

'use strict';

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');


module.exports = function makeWebpackConfig (options) {

    var BUILD = !!options.BUILD;

    var config = {};

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

    config.output = {
        path: __dirname + '/_dist',

//the commented out works without generating an app.css in output
        //publicPath: BUILD ? 'http://danny.il.corner.com:2222/' : 'http://danny.il.corner.com:8080/',
        publicPath: BUILD ? '/' : 'http://danny.il.corner.com:8080/',

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

        chunkFilename:  '[name].bundle.js'
    };

    if (BUILD) {
        config.devtool = 'source-map';
    } else {
        config.devtool = 'eval';
    }

    config.module = {
        noParse: /node_modules\/html2canvas/,
        preLoaders: [],
        loaders: [
            {

                test: /\.js$/, 
                loader: 'babel',
                query: {
                    presets: ['es2015'],
                    plugins: ['transform-runtime'],
                    comments: true,
                    compact: false
                },
                exclude: [
                    /node_modules/,
                    /cordova_all/
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file?name=[name].[ext]'
            }, {
                test: /\.html$/,
                loader: "ngtemplate?relativeTo=" + __dirname + "!raw"
            }
            ,
            {
                test: /\.(css)$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css?sourceMap", "sass?sourceMap"]
            }
        ]
    };

    config.postcss = [
        autoprefixer({
            browsers: ['last 3 versions']
        })
    ];
    config.plugins = [

        new ExtractTextPlugin('[name].css'),

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
        ,
        new ngAnnotatePlugin({
            add: true
        })
    ];

    config.plugins.push(
        new HtmlWebpackPlugin({
            template: './index.html',
            inject: true,
            excludeChunks: ['app','iosCordova','androidCordova']
        })
    );

    if (BUILD) {
        config.plugins.push(

            new webpack.NoErrorsPlugin(),

            new webpack.optimize.DedupePlugin(),

            new webpack.optimize.UglifyJsPlugin()
        )
    }

    config.devServer = {
        stats: {
            modules: false,
            cached: false,
            colors: true,
            chunk: false
        }
    };

    return config;
};

感谢帮助者:)

0 个答案:

没有答案
相关问题