将CSS提取到单个文件中

将所有Vue组件中的所有已处理的CSS解压缩到单个CSS文件中示例配置:

Webpack 2.x

  1. npm install extract-text-webpack-plugin@2.x --save-dev
  1. // webpack.config.js
  2. var ExtractTextPlugin = require("extract-text-webpack-plugin")
  3. module.exports = {
  4. // 其余配置...
  5. module: {
  6. rules: [
  7. {
  8. test: /\.vue$/,
  9. loader: 'vue-loader',
  10. options: {
  11. loaders: {
  12. css: ExtractTextPlugin.extract({
  13. use: 'css-loader',
  14. fallback: 'vue-style-loader' // <- 这是vue-loader的dep,所以如果使用npm3,不需要显式安装
  15. })
  16. }
  17. }
  18. }
  19. ]
  20. },
  21. plugins: [
  22. new ExtractTextPlugin("style.css")
  23. ]
  24. }

Webpack 1.x

  1. npm install extract-text-webpack-plugin --save-dev
  1. // webpack.config.js
  2. var ExtractTextPlugin = require("extract-text-webpack-plugin")
  3. module.exports = {
  4. // 其余配置...
  5. module: {
  6. loaders: [
  7. {
  8. test: /\.vue$/,
  9. loader: 'vue'
  10. },
  11. ]
  12. },
  13. vue: {
  14. loaders: {
  15. css: ExtractTextPlugin.extract("css"),
  16. // 你还可以包括<style lang ="less">或其他语言
  17. less: ExtractTextPlugin.extract("css!less")
  18. }
  19. },
  20. plugins: [
  21. new ExtractTextPlugin("style.css")
  22. ]
  23. }