less文件怎么使用webpack實(shí)現(xiàn)熱更新？

各位好，我最近剛使用webpack。現(xiàn)在求助一個(gè)問(wèn)題。
項(xiàng)目中使用webpack-dev-server實(shí)現(xiàn)了熱更新。但是修改less文件時(shí)，發(fā)現(xiàn)頁(yè)面css樣式?jīng)]有刷新，必須要手動(dòng)打包后，頁(yè)面css樣式才能變化。請(qǐng)問(wèn)一下，需要怎么設(shè)置，才能在修改less時(shí)，頁(yè)面樣式同步更新？非常感謝！

回答

編輯回答

忠妾

webpack-dev-server --inline --env.dev開(kāi)啟項(xiàng)目熱更新

這里把我的配置文件也貼出來(lái)吧

let path = require("path");
let webpack = require("webpack");

let HtmlWebpackPlugin = require("html-webpack-plugin");
let HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
let ExtractTextPlugin = require("extract-text-webpack-plugin");

let page1ExtractTextPlugin = new ExtractTextPlugin({
    filename: "index.css"
});

function getPath(file) {
    return path.resolve(__dirname, file);
}

module.exports = env => {
    let isDev = env.dev

    let plugins = [
        page1ExtractTextPlugin,
        new HtmlWebpackPlugin({
            template: getPath("./index.html"),
            inlineSource: ".(css|js)$",
            minify: {minifyCSS: true, minifyJS: true},
        }),
        new webpack.DefinePlugin({
            'IS_DEV': JSON.stringify(isDev),
        }),
    ];
    if (env.build) {
        plugins.push(new HtmlWebpackInlineSourcePlugin());
    }
    return {
        entry: {
            index: isDev ? [
                getPath("./js/_mock.js"),
                getPath("./index.js")
            ] : getPath("./index.js")
        },
        output: {path: getPath("./dist"), filename: "[name].js"},
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "babel-loader?presets=env"
                },
                {
                    test: /\.scss$/,
                    use: page1ExtractTextPlugin.extract({
                        use: [
                            "css-loader",
                            "autoprefixer-loader",
                            "sass-loader"
                        ]
                    })
                },
                {
                    test: /\.(png|jpg)/,
                    use: {loader: "url-loader", options: {limit: 8192}}
                }
            ]
        },
        externals: {
            jquery: "window.jQuery",
            layer: "window.layer",
            Vue: "window.Vue",
        },
        plugins
    };
};

2018年8月17日 22:34

編輯回答