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. 效果
webpack css loader 使用_分享
 
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")