Как заставить webpack смотреть простой скрипт - PullRequest
Новая
       111

Как заставить webpack смотреть простой скрипт

0 голосов
/ 27 мая 2020

У меня есть веб-сайт, на котором я представляю некоторую реакцию.

У меня есть сценарий в моем package.json, который содержит только: 

"dev": "webpack --watch"

Но он не работает. Каждый раз, когда я обновляю скрипты, он должен обновлять sh выходные файлы, но это не так.

Что мне не хватает?

Это мой webpack: 

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const postcssPresetEnv = require("postcss-preset-env");

const devMode = process.env.NODE_ENV !== "production";
module.exports = {
    mode: devMode ? "development" : "production",
    entry: {
        "style.main": [
            "./Content/css/bootstrap.min.css",
            "./Content/sass/public/style.scss"
        ],
        "app": [
            "./app/src/app.js"
        ]
    },
    output: {
        path: path.resolve(__dirname, "content/dist"),
        publicPath: "/css",
        filename: "js/[name].js"
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(c|sa|sc)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                            importLoaders: 2
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true,
                            ident: "postcss",
                            plugins: devMode
                                ? () => []
                                : () => [
                                    postcssPresetEnv({
                                        browsers: [">1%"]
                                    }),
                                    require("cssnano")()
                                ]
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            publicPath: "../images",
                            emitFile: false
                        } 
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: devMode ? "css/[name].css" : "css/[name].min.css"
        })
    ]
};

app. js имеет только это: 

console.log('Webpack watch is not working again');

Я полагаю, он должен обновлять sh сообщение в консоли каждый раз, когда я изменяю его в app.js?

I Я использую webpack 4.41.6 и webpack-cli 3.3.11

EDIT

У меня есть сценарий разработки (который вызывает webpack --watch), работающий в задаче VS runner, и я вижу, что он компилирует исходный код каждый раз при сохранении, но dist не обновляется в браузере.

Это единственная проблема.

1 Ответ

0 голосов
/ 27 мая 2020

вам необходимо обновить браузер вручную с помощью веб-пакета watch mode.
если вы хотите автоматическое обновление sh и HMR , прочтите, как настроить webpack- dev-сервер .

...