webpack css loader 使用

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. 效果

 

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")