我已经到处搜索了数天,但仍无法理解为什么我的最新尝试也不起作用。
为什么在dist文件夹中没有CSS文件?
现在我正在一个.js
文件中导入样式,然后在我的应用程序入口点中导入该文件,但仍然没有效果。
webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const paths = {
src: path.resolve(__dirname, 'src'),
dist: path.resolve(__dirname, 'dist'),
};
module.exports = {
entry: 'index.js',
mode: 'production',
cache: false,
output: {
path: paths.dist,
filename: 'index.js',
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
generator: {
filename: 'assets/[name][ext][query]',
},
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
type: 'asset/resource',
generator: {
filename: 'assets/fonts/[name][ext][query]',
},
},
],
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name][contenthash].css',
chunkFilename: '[id].css',
ignoreOrder: false,
}),
new CopyWebpackPlugin({
patterns: [
{
from: paths.src + '/assets',
to: paths.dist + '/assets',
toType: 'dir',
globOptions: {
ignore: ['*.DS_Store', 'Thumbs.db'],
},
},
{
from: paths.src + '/mocks',
to: paths.dist + '/mocks',
toType: 'dir',
globOptions: {
ignore: ['*.DS_Store', 'Thumbs.db'],
},
} /*{
from: paths.src + '/styles.css',
to: paths.dist + '/styles.css',
}*/,
],
}),
new HTMLWebpackPlugin({
filename: 'index.html',
template: paths.src + '/index.html',
favicon: paths.src + '/favicon.ico',
}),
],
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
resolve: {
modules: [paths.src, 'node_modules'],
extensions: ['.js', '.jsx', '.json'],
},
};
src/importCSSForBuild.js
import './styles.scss'
src/index.js
import './js/ConsoleLog.js';
import './importCSSForBuild.js'
[... other stuff]
package.json
....
"sideEffects": [
"**/*.css",
"src/importCSSForBuild.js"
],
"scripts": {
"postinstall": "npm run start",
"start": "npm-run-all --parallel css serve",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"buildserve": "cross-env NODE_ENV=production webpack --config webpack.config.js && http-server ./dist -c-1 -p 8081",
"test": "jest --no-cache ./src/*",
"watch": "jest --no-cache --watch ./*",
"coverage": "jest --coverage"
},
"devDependencies": {
"@babel/core": "^7.16.12",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/preset-env": "^7.16.11",
"babel-jest": "^27.4.6",
"babel-loader": "^8.2.3",
"babel-preset-jest": "^27.4.0",
"clean-webpack-plugin": "^4.0.0",
"compression-webpack-plugin": "^9.2.0",
"copy-webpack-plugin": "^10.2.2",
"cross-env": "^7.0.3",
"css-loader": "^6.6.0",
"css-minimizer-webpack-plugin": "^3.4.1",
"dead-server": "1.0.6",
"html-webpack-plugin": "^5.5.0",
"http-server": "^14.1.0",
"jest": "^27.4.7",
"mini-css-extract-plugin": "^2.5.3",
"node-sass": "^7.0.1",
"npm-run-all": "^4.1.5",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.2.3",
"prettier": "^2.5.1",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.0",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2",
"webpack-dashboard": "^3.3.7",
"webpack-dev-server": "^4.7.3"
},
"engines": {
"node": ">=14.15.0"
}
}
output: { clean: true }
来代替使用clean-webpack-plugin
。 - mindlid