gpt4 book ai didi

webpack - extract-text-webpack-plugin 不创建 CSS 文件

转载 作者:行者123 更新时间:2023-12-04 03:56:19 24 4
gpt4 key购买 nike

我有创建 bundle.js 的 webpack.config.js 但由于某种原因它没有创建任何 css 文件,尽管我有 css-loader , style-loaderextract-text-webpack-plugin .

我的 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './client/index.html',
filename: 'index.html',
favicon: './client/asset/favicomatic/favicon.ico'
});
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'dist');

module.exports = {
entry: ['./client/src/index.js'],
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [HtmlWebpackPluginConfig, new ExtractTextPlugin('style.css')]
};

我希望我是在其他地方创建这个捆绑的 css 文件,我在我的文件夹中看不到任何 css 文件。

如果有人能找到我做错了什么,请告诉我。

谢谢,

最佳答案

配置看起来不错。

General :虽然 webpack loader 执行特定于资源的任务,但它的源代码需要定义依赖项。在您需要 CSS 样式的源代码中,您需要导入该 CSS 文件。第一次听到可能听起来很奇怪,但这就是 webpack 的工作原理。

Webpack 应该处理依赖图中的 CSS 依赖项。如果未创建输出 css 文件,则可能缺少的部分是源代码中的依赖声明,即 require("./css-file-here")import "./css-file-here"
来自 webpack 指南 here

This enables you to import './style.css' into the file that depends on that styling.



输出是否显示它处理 CSS 源文件的任何迹象?

如果有帮助,请查看此 repo 中的 src/entry.js: webpack-bootstrap .在此期间,您可以尝试查看如何通过 webpack 应用 bootstrap 样式。

关于webpack - extract-text-webpack-plugin 不创建 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47838021/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com