首先要说的是,一切都正常,但不知怎的就坏了。
我正在尝试获取独立的 css 文件并将它们包含在我的 index.html 文件中
但是 css 仍然在 main.bundle.js 中内联加载,但页面中缺少 css。 我注意到在 main.bundle.js 中我看到了很多“ ”
padding-right: 15px;\n}\n.btn.content-btn::before {\n position: absolute;\n
我知道这个 webpack 文件很乱,但我几个小时以来一直在尝试不同的变体。
我是 wepback 的新手,所以我希望得到一些帮助。 我使用的是 webpack 5.68.0
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const Dotenv = require('dotenv-webpack');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// css twice [CONTENTS]
module.exports = {
mode: 'development',
//devtool: 'inline-module-source-map',
devtool: 'source-map',
entry: [
'./src/index.js'
],
output: {
// path: __dirname + '/dist',
path: __dirname + '/public',
publicPath: '/',
filename: '[name].bundle.js',
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'async',
minSize: 60000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
cacheGroups: {
// styles: {
// name: 'styles',
// test: /\.s?css$/,
// chunks: 'all',
// minChunks: 1,
// reuseExistingChunk: true,
// enforce: true,
// },
vendor: {
test: /node_modules/,
name: 'vendor',
chunks: 'initial',
enforce: true
},
vendorModules: {
test: /src\/js\/modules/,
name: 'vendor-modules',
chunks: 'initial',
enforce: true
}
}
}
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
// use: [
// 'babel-loader',
// 'eslint-loader',
// ]
use: [
{
loader: 'babel-loader',
},
// {
// loader: 'eslint-webpack-plugin',
// options: {
// quiet: true
// }
// }
]
},
{
test: /\.ts$/,
use: ['babel-loader']
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
// {
// loader: MiniCssExtractPlugin.loader,
// options: {
// publicPath: __dirname + '/public',
// },
// },
// {
// loader: 'css-loader',
// options: {
// importLoaders: 2,
// sourceMap: true
// }
// },
// {
// loader: "sass-loader",
// options: {
// sourceMap: true,
// sassOptions: {
// indentWidth: 2,
// includePaths: ["src/styles"],
// },
// },
// },
],
},
// {
// test: /\.s[ac]ss$/i,
// //test: /\.scss$/,
// //test: /\.s[ac]ss$/i,
// exclude: /node_modules/,
// use: [
// {
// loader: 'file-loader',
// options: { outputPath: 'css/', name: '[name].min.css'}
// },
// 'style-loader',
// {
// loader: "sass-loader"
// }
// ]
// },
// {
// test: /\.s[ac]ss$/i,
// use: [
// // something is making styles show up twice. I don't want style loader loads twice???
// "style-loader", // Creates `style` nodes from JS strings
// "css-loader", // Translates CSS into CommonJS
// {
// loader: 'sass-loader',
// options: {
// sourceMap: true
// }
// }, // Compiles Sass to CSS
// ],
// },
{
test: /\.svg$/,
loader: 'svg-inline-loader'
}
// {
// test: /\.svg$/,
// use: [
// {
// loader: 'svg-url-loader',
// options: {
// limit: 10000,
// },
// },
// ],
// },
]
},
resolve: {
extensions: ['.js', '.jsx', ".ts"],
fallback: {
"fs": false,
"os": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"browser": false,
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer"),
"crypto": false,
"crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
}
},
devServer: {
allowedHosts: [
'learntoearn.dev',
],
historyApiFallback: true,
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 8080,
},
plugins: [
new MiniCssExtractPlugin( // split css into files
{
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
}
),
//new BundleAnalyzerPlugin(),
new ESLintPlugin(),
new Dotenv(),
new ESLintPlugin({
quiet: true,
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
// template: __dirname + '/src/index.html',
filename: 'index.html',
inject: false // BROKE AGAIN FOR SOME REASON, SO SETTING TO TRUE
//inject: 'body' // causing styles to be loaded twice!
})
]
};
对于遇到此问题的任何人,我都有几个问题。
删除节点模块。
清除yarn/npm缓存。
重新安装所有内容。
在您的 webback 文件中包含此内容
{
//test: /\.s[ac]ss$/i,
test: /\.(s(a|c)ss)$/,
use: [
// Creates `style` nodes from JS strings
MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
{
loader: "sass-loader",
options: {
sourceMap: true,
},
},
],
},
在插件中,你只需要这个
plugins: [
new MiniCssExtractPlugin(), // split css into files
Webpack 然后创建一个 main.css 文件并将其包含在 index.html 中
我可以自信地说。我用我的 webpack 构建进行了测试。如果您在 css 加载器使用属性中包含“style-loader”。 MiniCssExtractPlugin 不起作用。这意味着,在 webpack 构建之后你将不会获得 css 文件。如果你删除“style-loader”它将起作用。