Webpack - Запустите сервер, посмотрите и скомпилируйте его, затем перезагрузите. Это возможно?

Хорошо, вот в чем дело, я переключаюсь с Gulp на Webpack и пытаюсь заставить Webpack запустить сервер, посмотреть изменения, скомпилировать файлы (CSS, JS и HTML), а затем перезагрузить страницу.

С Gulp это слишком просто, но с Webpack это выглядит как кошмар, вот мой конфигурационный файл Webpack...

const path = require("path");
const glob = require('glob');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurifyCSSPlugin = require('purifycss-webpack');
let isProd = (process.env.NODE_ENV === 'production');

module.exports = {
    entry: ["./src/js/index.js", "./src/sass/app.scss"],
    output: {
        filename: "js/index.js",
        path: path.join(__dirname, "./build/")
    },
    devServer: {
        contentBase: path.join(__dirname, "./build/")
    },
    devtool: 'source-map',
    module: {
        rules: [{
                test: /\.html$/,
                use: [{
                    loader: "html-loader",
                    options: {
                        minimize: false
                    }
                }]
            },
            {
                test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
                use: [{
                        loader: "url-loader",
                        options: {
                            name: "./images/[name].[ext]",
                            limit: 10000
                        }
                    },
                    {
                        loader: "img-loader"
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                            loader: "css-loader",
                            options: {
                                minimize: false,
                                sourceMap: true
                            }
                        },
                        {
                            loader: "postcss-loader",
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: true,
                                outFile: 'css/app.css',
                                outputStyle: 'expanded'
                            }
                        }
                    ]
                })
            },
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env"]
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new ExtractTextPlugin({
            filename: "css/app.css",
            disable: false,
            allChunks: true
        }),
        new PurifyCSSPlugin({
            paths: glob.sync(path.join(__dirname, 'build/*.html')),
        })
    ]
};

if (isProd) {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin()
    )
}

А вот и файл package.json...

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --open",
    "dev": "webpack",
    "prod": "webpack -p",
    "watch": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "breakpoint-sass": "^2.7.1",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^2.30.1",
    "img-loader": "^2.0.0",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.0.10",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "sass-loader": "^6.0.6",
    "susy": "^2.2.12",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },
  "browserslist": [
    "last 2 versions"
  ]
}

Что происходит сейчас, так это то, что когда я печатаю в консоли npm start сервер запускается просто отлично и перезагружается при сохранении, но изменения не будут применены, потому что файлы в./build не меняются.

Я искал эту проблему, и я не могу найти решение, где я могу запустить сервер, скомпилировать файл, а затем перезагрузить страницу? Это возможно даже в Webpac?

Также в Gulp CSS, используемый для инъекции без перезагрузки страницы, могу ли я добиться того же в Webpack?

0 ответов

Другие вопросы по тегам