webpack css loader 使用
备注:
接上面的项目
1. 添加css
main.css
#app {
text-align:center;
}
main.js
require("./main.css");
const shortid = require("shortid");
const demo = require("./show.js");
demo(shortid.generate());
2. 添加loader 让webpack 支持css 解析编译
webpack.config.js
const path = require("path");
module.exports = {
entry:"./main.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"./dist"),
},
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader'],
}
]
}
}
3. 构建
yarn run build
4. 效果
![](https://images2017.cnblogs.com/blog/562987/201712/562987-20171229101533209-272952257.png)
5. 参考资料
https://webpack.js.org/guides/getting-started/
6. 扩展使用方式
use:[
"style-loader",{
loader:"css-loader",
options:{
mininize:true
}
}
]
or
require("syle-loader!css-loader?minimize!./mian.css")