webpack的css單獨打包解決方案

背景是在webpack打包的時候，如果不做特殊處理，那么webpack會把css，less，image等等都打包到js文件中，而這會導致一些bug。

是為了解決：樣式是通過js 動態添加 style 標簽引入的問題，因為動態添加所以css動畫會有一個不必要的閃爍效果，初步估計是因為：css的stlye應該先被渲染。所以要把css抽離出來。那么就引入了extract-text-webpack-plugin這個插件。

但是！這里有個坑，如果直接使用以下命令安裝是有bug的：

npm install extract-text-webpack-plugin --save-dev

因為 extract-text-webpack-plugin目前不支持webpack4，所以要使用如下命令行安裝：

npm install extract-text-webpack-plugin@next

 這樣就可以使用最新的beta版。

然后在webpack中配置：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),//打包后的文件名
  ]
}

 再補充一點關於loader的知識：

webpack本身只能打包Javascript文件，對於其他資源例如 css，圖片，或者其他的語法集比如jsx，是沒有辦法加載的。 這就需要對應的loader將資源轉化，加載進來。

上面的代碼是在webpack.config.js里添加配置，這種loader的使用方法最佳。

loader的解析是從右往左解析，介紹幾個常見的loader：

樣式

1. css-loader : 解析css文件中代碼
2. style-loader : 將css模塊作為樣式導出到DOM中
3. less-loader : 加載和轉義less文件
4. sass-loader : 加載和轉義sass/scss文件

腳本轉換編譯

1. script-loader : 在全局上下文中執行一次javascript文件，不需要解析
2. babel-loader : 加載ES6 代碼后使用Babel轉義為ES5后瀏覽器才能解析

Files文件

1. url-loader : 多數用於加載圖片資源,超過文件大小顯示則返回data URL
2. raw-loader : 加載文件原始內容(utf-8格式)

加載框架

1. vue-loader : 加載和轉義vue組件
2. react-hot-loader : 動態刷新和轉義react組件中修改的部分