我有创建bundle.js的webpack.config.js,但是由于某种原因,它不能创建任何css文件,尽管我有css-loader
,style-loader
和extract-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文件。
如果有人能发现我做错了什么,请让我知道。
谢谢,
发布于 2017-12-16 02:54:12
配置对我来说很好。
一般:虽然webpack加载器执行特定于资源的任务,但它是需要定义依赖项的源代码。在源代码中需要CSS样式的地方,都需要导入该CSS文件。第一次听起来可能有些奇怪,但这就是webpack的工作方式。
Webpack应该会处理依赖图中的CSS依赖项。如果没有创建输出css文件,那么可能缺少的部分是源代码中的依赖项声明,即require("./css-file-here")
或import "./css-file-here"
。
出自《webpack指南》here
这使您能够
import './style.css'
到依赖于该样式的文件中。
输出是否显示它处理了CSS源文件的任何迹象?
如果有帮助,请查看以下代码库中的src/entry.js:webpack-bootstrap。在此期间,您可以尝试一下,看看如何通过webpack应用引导样式。
https://stackoverflow.com/questions/47838021
复制相似问题