webpack + vue之抽離css方法

大部分使用過webpack的朋友都知道，抽離css需要使用到webpack的插件extract-text-webpack-plugin，vue也不例外。官方給的vue-loader的文檔裏面有這樣的描述

module: {
          rules: [
            {     //處理js中引入的css
                  test: /\.css$/,
                  loader: ExtractTextPlugin.extract({
                      use: [
                          {
                              loader: 'css-loader'
                          }
                      ]
                  })
              },
              {
                  test: /\.vue$/,
                  loader: 'vue-loader',
                  options: {loaders:{
                      css: ExtractTextPlugin.extract({
                          use: 'css-loader',
                          fallback: 'vue-style-loader'
                      })
                  }}
              }
          ]
        },
plugins: [ //這個不添加allChunks參數的話，不會抽離chunk的css
new ExtractTextPlugin({filename: 'css/[name].[hash:5].css', allChunks: true})
]

OK,這樣打包後，我們把每個entry裏面使用到的css代碼都單獨打包出來了，這時候可以選擇

使用html-webpack-plugin生成帶css 鏈接的html，也可以使用html-webpack-inline-source-

plugin把css內聯到html裏面(減少請求數量，在移動端很有用)

然而會發現，異步引入的vue文件裏面import的css，也會被抽離出來，打包內聯到html裏面，

怎麼解決這個問題呢。其實很簡單，就是使用loader的include參數，指定loader的作用文件夾，

對不想抽離css的文件，使用style-loader和css-loader。就像這樣

module: {
          rules: [
           {
        test: /\.css$/,
        include: [path.resolve(__dirname, "../src/page/"),
        loader: ExtractTextPlugin.extract({
        use: [
        {
            loader: 'css-loader'
                }
        ]
        })
       },
       {
        test: /\.css$/,
        include: path.resolve(__dirname, "../src/components/"),
        loader: ['style-loader','css-loader']
      },
             {
                  test: /\.vue$/,
                  loader: 'vue-loader',
                  options: {loaders:{
                      css: ExtractTextPlugin.extract({
                          use: 'css-loader',
                          fallback: 'vue-style-loader'
                      })
                  }}
              }
          ]
        },
plugins: [ //這個不添加allChunks參數的話，不會抽離chunk的css
new ExtractTextPlugin({filename: 'css/[name].[hash:5].css', allChunks: true})
]

這裏配置對page目錄下的代碼，抽離出css，對components裏面引用的代碼，內聯在js裏面。

這樣異步加載components的css就不會被打包到首屏的html裏面了，頁面體積減少，加載速度自然

就上去了。