登录

javascript - 为什么我配置的webpack只打包.vue内部样式 单独的样式表文件打包不了?

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
entry: {

app: './src/main.js'

},
output: {

path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'

},
resolve: {

extensions: ['', '.js', '.vue','css'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components')
}

},
resolveLoader: {

fallback: [path.join(__dirname, '../node_modules')]

},
module: {

loaders: [
  {
    test: /\.vue$/,
    loader: 'vue'
  },
  {
    test: /\.js$/,
    loader: 'babel',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.json$/,
    loader: 'json'
  },
  {
    test: /\.html$/,
    loader: 'vue-html'
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
    {
test: /\.css$/,
 loader:  ExtractTextPlugin.extract("style-loader","css-loader")

},

  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
      
]
  

},

plugins:[

   new ExtractTextPlugin("/assets/main.css"),

]

,

vue: {

loaders: utils.cssLoaders()

}
}

# JavaScript
高洛峰高洛峰2195 天前592 次浏览

全部回复(2) 我要回复

  • 阿神

    阿神2017-04-11 13:09:49

    添加对于less/sass/css文件的loader

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-11 13:09:49

    // 以前自己写的配置 
    vue: {
        autoprefixer: {
          browsers: ['last 3 versions', '> 1%', 'ie_mob 11']
        },
        loaders: {
          sass: ExtractTextPlugin.extract('style-loader', 'css!autoprefixer!sass'),
          js: 'babel'
        }
      }
    
    
    // 不知道你这个代码里写的啥, 
    utils.cssLoaders()

    回复
    0
  • 取消回复发送