Сборка файлов с изменениями в Webpack - PullRequest
Новая
       5

Сборка файлов с изменениями в Webpack

0 голосов
/ 21 апреля 2020

Можете ли вы объяснить, как добавить перезагрузку страницы при смене файлов в веб-пакете? Файлы изменяются только после запуска «npm run build». Как обновить все элементы в режиме "npm run start"? В студенческом вебпаке буду благодарен, если кто-нибудь поможет мне разобраться, я не нашел пример

webpack.config. js

const webpack = require('webpack');
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');



module.exports = {
    entry: {
        app: "./src/js/index.js"
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, './dist'),
        publicPath: './dist'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    },
                    {
                        loader: 'postcss-loader',
                        options: { sourceMap: true, config: { path: 'postcss.config.js' } }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true }
                    }
                ]
            }, {
                test: /\.css$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    },
                    {
                        loader: 'postcss-loader',
                        options: { sourceMap: true, config: { path: 'postcss.config.js' } }
                    }
                ]
            },
            {
                test: /\.(png|gif|jpe?g)$/,
                loaders: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path].[name].[ext]',
                        },
                    },
                    'img-loader',
                ]
            }
        ]
    },

    devServer: {
        overlay: true
    },
    plugins: [

        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
}

package. json 

{
  "name": "world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --mode development"
  },

  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "img-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-notifier": "^1.8.0"
  }
}
...