webpack2.x抽取css

目录

• 抽取成一个css文件
• 抽取成多个css文件

 

这里以.vue文件为例,需要安装extract-text-webpack-plugin包

我们主要设置的文件是webpack.config.js文件。

抽取成一个css文件

---

这个设置是提取成一个单独的style.css文件

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader' 
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

抽取成多个css文件

---

这个设置是提取成多个单独的css文件

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader' 
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'dist/css/[name].[contenthash].css'
    })
  ]
}