我正在基于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'),
}
}),
]),
};