大部分使用過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裡面了，頁面體積減少，載入速度自然

就上去了。