Question

我一直试图在Visual Studio 2017中绕过Angular。我购买的Angular 5模板要求从文件中加载CSS。所以我一直在尝试让webpack将所有SCSS和CSS文件放入vendor.css。

但是，除了关于源地图的评论之外，vendor.css从未创建或基本上是空的。我已经在网上使用了所有各种代码示例，我不禁认为这是一个错误。

详细输出显示正在处理的scss文件，但未提及正在使用的ExtractTextPlugin。

非常感谢任何帮助！

这是我当前的webpack.config.js。

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    //const extractCSS = new ExtractTextPlugin('vendor.css');
    const extractSass = new ExtractTextPlugin('vendor.css');

    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                {
                    test: /\.css$/,
                    use: extractSass.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' })
                },
                {
                    test: /\.scss$/,
                    use: extractSass.extract({
                        use: [
                            {
                                loader: "css-loader",
                                options: {
                                    minimize: true,
                                    sourceMap: true
                                }
                            },
                            {
                                loader: "sass-loader"
                            }
                        ],
                        // use style-loader in development
                        fallback: "style-loader"
                    })
                }
            ]
        },
        plugins: [
            extractSass,
            new CheckerPlugin()
        ]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';



        const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [

            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
                new AngularCompilerPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    //const serverBundleConfig = merge(sharedConfig, {
    //    resolve: { mainFields: ['main'] },
    //    entry: { 'main-server': './ClientApp/boot.server.ts' },
    //    plugins: [
    //        new webpack.DllReferencePlugin({
    //            context: __dirname,
    //            manifest: require('./ClientApp/dist/vendor-manifest.json'),
    //            sourceType: 'commonjs2',
    //            name: './vendor'
    //        })
    //    ].concat(isDevBuild ? [] : [
    //        // Plugins that apply in production builds only
    //        new AotPlugin({
    //            tsConfigPath: './tsconfig.json',
    //            entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
    //            exclude: ['./**/*.browser.ts']
    //        })
    //    ]),
    //    output: {
    //        libraryTarget: 'commonjs',
    //        path: path.join(__dirname, './ClientApp/dist')
    //    },
    //    target: 'node',
    //    devtool: 'inline-source-map'
    //});

    return [clientBundleConfig]; //, serverBundleConfig];
};

Answer 1

如果您使用的是webpack4，则it is recommended使用mini-css-extract-plugin作为新的网络包版本的兼容性问题会继续产生ExtractTextPlugin，并且很可能在不久的将来无法修复。

ExtrapTextPlugin无效的webpack

1 个答案: