在webpack dev服务器中找不到CSS错误

时间:2017-11-21 07:07:11

标签: webpack

我为SASS和Babel构建自定义webpack配置。在我的webpack dev服务器中,它显示

  

获取http://localhost:8082/dist/bundle.css net :: ERR_ABORTED

在控制台中,虽然它正在运行。我已经添加了publicPath,但它仍然显示此错误。

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

//Check production environment
var isProd = process.env.NODE_ENV === 'production';


// Use CSS loader based on env
var cssDev = ['style-loader', 'css-loader']
var scssDev = ['style-loader', 'css-loader', 'sass-loader']

var cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader'],
    publicPath: '/dist'
})

var cssConfig = isProd ? cssProd : cssDev
var scssConfig = isProd ? cssProd : scssDev



module.exports = {
    entry: './src/js/bootstrap.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env']
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: scssConfig
            },
            {
                test: /\.css$/,
                use: cssConfig
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'bundle.css',
            disable: !isProd
        }),
    ]
};

此外,热重新加载仅在css或js更改时有效。 html更改时如何自动重新加载?

0 个答案:

没有答案