Webpack 4 devserver不传送新发出的文件

时间:2019-03-29 12:32:20

标签: flask webpack webpack-dev-server

我正在基于cookiecutter-flask模板的Flask项目中使用Webpack。 我将项目从Webpack 2升级到Webpack 4。 从那时起,当我启动开发服务器时,它不再包含新发出的CSS文件,只有npm生成的静态文件才运行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'),
            }
        }),
    ]),
};

0 个答案:

没有答案