Question

webpack为什么css不能同步刷新了

Answer 1

const path = require('path');var webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成htmlconst ExtractTextPlugin = require("extract-text-webpack-plugin");  //css单独打包const OpenBrowserPlugin = require('open-browser-webpack-plugin');const PATHS = {
    app: path.join(__dirname, 'src/app'),
    build: path.join(__dirname, 'build'),
};module.exports = {
    devtool: "cheap-eval-source-map",
    entry: {
        app: PATHS.app,
    },
    output: {
        path: PATHS.build,
        filename: '[name].[hash:8].js',
    },    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['css-loader', 'postcss-loader'] //使用postcss-loader 要在plugin中配置LoaderOptionsPlugin
                })
            }
        ]
    },

    devServer: {
        contentBase: './',  //本地服务器所加载的页面所在的目录
        host: 'localhost',
        port: 8080,
        historyApiFallback: true,  //不跳转
        hot: true,
        inline: true,//
        proxy: {            '/api': {
                target: '',
                secure: false,
                changeOrigin: true,
                host: ''
            }
        }
    },
    plugins: [        new HtmlWebpackPlugin({
            title: '测试',//生成HTML文件的title，设置template没用
            filename: './index.html',//打包后html文件名
            template: './src/template/index.html',//
            inject: 'head',
            favicon: '',// html 文件生成一个 favicon
            hash: true,//给生成的js文件hash 值
            minify: {    //压缩HTML文件
                removeComments: true,    //移除HTML中的注释
                collapseWhitespace: true,    //删除空白符与换行符
                conservativeCollapse: true,
                minifyJS: true //js也在一行
            }
        }),        new ExtractTextPlugin({filename: '[name].[hash:8].css'}),//样式压缩
        new OpenBrowserPlugin({    //自动打开浏览器
            url: 'http://localhost:8080'
        }),        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: function () {                    return [                        require('autoprefixer')
                    ];
                }
            }
        }),
    ],
};