針對Webpack加載樣式文件的坑

main.css代碼：

body{ background: #ccc; }

app.js代碼：

import './main.css';

webpack_config.js代碼：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
	entry:'./src/app.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'app.js'
	},
	mode:'development',
	plugins:[
		new HtmlWebpackPlugin({
			filename:'index.html',
			template:'src/index.html'
		})
	],
	module:{
		rules:[
			{
			test:/\.js$/,
			use:[{
				loader:'babel-loader',
				options:{
					presets:['react','env']
					}
				}]
			},{
				test:/\.css$/,
				use:['style-loader','css-loader']
			}
		]
	// },
	// devServer:{
	// 	open:true, //自動打開瀏覽器
	// 	port:8081 //更換端口
	}
}
 

運行代碼：

npm run dev

結果出現報錯：

ERROR in ./node_modules/css-loader/dist/runtime/api.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "@babel/preset-env" relative to directory "D:\\progr                                                                                                                           am\\webpack\\proj1\\node_modules\\css-loader"
......

通過各方面資料查詢後得知，需要安裝"@babel/preset-env"，得出結論：

1、第一步運行代碼：

npm i -D babel-preset-env

2、webpack_config.js代碼更改：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
	entry:'./src/app.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'app.js'
	},
	mode:'development',
	plugins:[
		new HtmlWebpackPlugin({
			filename:'index.html',
			template:'src/index.html'
		})
	],
	module:{
		rules:[
			{
			test:/\.js$/,
			use:[{
				loader:'babel-loader',
				options:{
					presets:['react','env']
					}
				}]
			},{
				test:/\.css$/,
				use:[{
					loader:'style-loader',
					options:{
							presets:['@babel/preset-env']
						}
					},{
					loader:'css-loader',
					options:{
							presets:['@babel/preset-env']
						}
					}
				]
			}
		]
	// },
	// devServer:{
	// 	open:true, //自動打開瀏覽器
	// 	port:8081 //更換端口
	}
}
 

運行代碼後發現仍然報錯：

去掉loader:'babel-loader'代碼段中的options:{presets:['@babel/preset-env']}}這段代碼，見代碼：

{
				test:/\.css$/,
				use:[{
					loader:'style-loader'
					},{
					loader:'css-loader',
					options:{
							presets:['@babel/preset-env']
						}
					}
				]
			}

再次運行代碼發現，報了一個新的錯誤：

再次通過搜索各種網站資料發現，問題所在：我安裝的Webpack版本是4.29.5的最新版，css-loader版本是2.1.0 ，是因爲版本的問題，1.0.0以後的版本minimize這個屬性已經被取消了。因此需要安裝postcss-loader。安裝好後，更新webpack_config.js代碼：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
	entry:'./src/app.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'app.js'
	},
	mode:'development',
	plugins:[
		new HtmlWebpackPlugin({
			filename:'index.html',
			template:'src/index.html'
		})
	],
	module:{
		rules:[
			{
			test:/\.js$/,
			use:[{
				loader:'babel-loader',
				options:{
					presets:['react','env']
					}
				}]
			},{
				test:/\.css$/,
				use:[{
					loader:'style-loader'
					},{
					loader:'postcss-loader',
					options:{
							presets:['@babel/preset-env']
						}
					}
				]
			}
		]
	// },
	// devServer:{
	// 	open:true, //自動打開瀏覽器
	// 	port:8081 //更換端口
	}
}
 

 

再次運行代碼，你會發現問題解決了……

效果：

完美解決問題了！！！