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里面了，页面体积减少，加载速度自然

就上去了。