版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hjh15827475896/article/details/86228967
webpack 默认是可以找包js文件的,当要打包 css的时候 就需要引入 style-loader 和 css-loader
css-loader 的作用是把 css文件进行转码 而 style-loader 的作用是把转码后的css文件插入到相应的 文件中去
所以两者使用的时候是一起使用的缺一不可并且有先后顺序的 要先使用 css-loader 转码,然后再使用 style-loader插入到文件中去安装使用
1安装css-loader 和 style-loader
命令行 npm install --save-dev css-loader style-loader
2.在webpack.config.js中进行配置
let path = require("path");
module.exports = {
mode:"production",
entry:{
app:'./app.js'
},
output:{
path:path.resolve(__dirname,"./bundle/"),
filename:'[name].bundel.[hash5].js',
},
//说明: 这里的 style-loader 和 css-loader 的顺序是不能写反的 use的时候是从后向前use的,所以会先使用 css-loader转换,再使用 style-loader 插入
module:{
rules:[
test:/\.css$/,
use:[
{
loader:"style-loader",
},{
loader:"css-loader",
options:{
minimize:true, // 对css代码进行压缩 options选项可以不要
}
}
]
]
}
}
3.在打包的入口文件中 引入所与的css文件
即在 app.js中
import "./src/css/demo.css";这样在打包时 webpack就是自动去加载相应的css文件了
还有 style-loader/url 和 style-loader/useable的用法,自行百度