如何使用Webpack打包引入CSS_file-loader与style-loader实践
作者：P粉602998670 浏览： 发布日期：2025-11-23
[导读]:要正确打包CSS需使用css-loader和style-loader：前者解析CSS语法，后者将样式注入DOM。安装webpack、css-loader、style-loader及file-loader后，在webpack.config.js中配置module.rules，确保test匹配.css文件且use顺序为[‘style-loader’,‘css-loader’]，file-loader处理静态资源并输出至assets目录。在src/index.js中导入CSS文件，运行npmrunbu
要正确打包CSS需使用css-loader和style-loader：前者解析CSS语法，后者将样式注入DOM。安装webpack、css-loader、style-loader及file-loader后，在webpack.config.js中配置module.rules，确保test
匹配.css文件且use顺序为['style-loader', 'css-loader']，file-loader处理静态资源并输出至assets目录。在src/index.js中导入CSS文件，运行npm run build生成bundle.js，页面加载时样式自动生效，关键在于loader顺序与完整依赖。
要在Webpack中正确打包并引入CSS文件，需要使用css-loader和style-loader。这两个loader分工明确：css-loader负责解析CSS文件中的@import和url()等语法，而style-loader则负责将CSS内容注入到页面的
安装必要的依赖
在项目根目录下运行以下命令，安装Webpack和相关loader：
npm install --save-dev webpack webpack-cli css-loader style-loader
如果你还打算处理图片或字体等资源，可以额外安装file-loader：
npm install --save-dev file-loader
配置webpack.config.js
在项目根目录创建webpack.config.js文件，并添加如下配置：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader', // 将CSS插入到DOM中
'css-loader' // 解析CSS文件
]
},
{
test: /\.(png|jpg|gif|woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: {
outputPath: 'assets/'
}
}
]
}
};
说明：
-
test: /\.css$/ 匹配所有以.css结尾的文件
-
use数组顺序很重要：Webpack从右向左执行loader，所以必须先
css-loader再style-loader
-
file-loader会将引用的静态资源复制到输出目录，并返回最终的路径
编写CSS与JS代码
在src/style.css中写入样式：
body {
background: url('./assets/bg.jpg');
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
在src/index.js中引入CSS：
import './style.css';
document.write('Hello Webpack
');
构建与查看效果
在package.json中添加脚本：
"scripts": {
"build": "webpack --mode development"
}
运行构建：
npm run build
生成的bundle.js会包含CSS逻辑，浏览器加载后自动将样式插入页面头部。打开dist目录下的HTML文件即可看到蓝色标题和背景图生效。
基本上就这些。只要loader顺序正确、依赖安装完整，CSS就能顺利打包进项目。不复杂但容易忽略细节。
免责声明：转载请注明出处：http://sczxchw.cn/news/361862.html
400-9888-660 
匹配.css文件且use顺序为['style-loader', 'css-loader']，file-loader处理静态资源并输出至assets目录。在src/index.js中导入CSS文件，运行npm run build生成bundle.js，页面加载时样式自动生效，关键在于loader顺序与完整依赖。
