Webpack 4 devserver не доставляет новые файлы - PullRequest
Новая
       5

Webpack 4 devserver не доставляет новые файлы

0 голосов
/ 29 марта 2019

Я использую Webpack в проекте Flask на основе шаблона cookiecutter-flask. Я обновил проект с Webpack 2 до Webpack 4. С тех пор, когда я запускаю dev-сервер, он больше не включает недавно отправленные css-файлы, а только статические файлы, сгенерированные npm run build. Даже если я обновлю браузер вручную. Каковы могут быть причины этого и как это можно исправить?

Я пробовал несколько вещей, включая удаление параметров командной строки --hot и --inline.

Webpack.config.js выглядит так: 

const path = require('path');
const webpack = require('webpack');


/*
 * Webpack Plugins
 */
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// take debug mode from the environment
const debug = (process.env.NODE_ENV !== 'production');

// Development asset host (webpack dev server)
const publicHost = debug ? 'http://localhost:2992' : '';
const publicPath = `${publicHost}/static/build/`;

const rootAssetPath = path.join(__dirname, 'assets');
const outputPath = path.join(__dirname, 'newsfeed', 'static', 'build')


module.exports = {
    // configuration
    context: __dirname,
    entry: {
        main_js: './assets/js/main',
        main_css: [
            path.join(__dirname, 'node_modules', 'font-awesome', 'css', 'font-awesome.css'),
            path.join(__dirname, 'assets', 'css', 'bootstrap.scss'),
            path.join(__dirname, 'node_modules', 'bootstrap-navbar-sidebar', 'dist', 'navbar-fixed-left.css'),
            path.join(__dirname, 'node_modules', 'bootstrap-navbar-sidebar', 'dist', 'navbar-fixed-right.css'),
            path.join(__dirname, 'assets', 'css', 'style.css'),

        ],
    },
    output: {
        path: outputPath,
        publicPath: publicPath,
        filename: '[name].[hash].js',
        chunkFilename: '[id].[hash].js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css'],
    },
    devtool: 'source-map',
    devServer: {
        headers: {'Access-Control-Allow-Origin': '*'},
        // contentBase: publicPath
    },
    module: {
        rules: [
            {test: /\.html$/, loader: 'raw-loader'},
            {
                test: /\.(scss|sass|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(ttf|eot|svg|png|jpe?g|gif|ico)(\?.*)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[hash].[ext]',
                            context: rootAssetPath
                        },
                    },
                ],
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {presets: ['env'], cacheDirectory: true}
            },
        ],
    },
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    plugins: [
        new MiniCssExtractPlugin(),
        new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery'}),
         new ManifestPlugin({
            fileName: path.join(__dirname, 'newsfeed', 'webpack', 'manifest.json'),
            stripSrc: true,
            publicPath: publicPath
        }),
    ].concat(debug ? [] : [
        // production webpack plugins go here
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
            }
        }),
    ]),
};
...