webpack+vue-loader 如何提取公共css文件

Question

weback和vue，使用vue-loader的方式开发多pc页面

参考蓝狐的多页面框架 https://github.com/bluefox168...

尝试可以构建，公共js没有问题。
但是公共css没有分离处理，所有css都是相对应的一个css文件.
过程如下：

1. 尝试在每个页面的入口文件js中添加，失败，没有变化。
   

2. 尝试在每个vue文件中的script标签中假如，失败，没有变化。
   

3. 尝试在每个vue文件中的style标签中加入，失败，公共css和单独css合并...
   

请问各位前辈们有什么办法解决或者处理吗？

Answer 1

需要借助于webpack的插件extract-text-webpack-plugin。

你可以研究一下。

给你个webpack配置文件的参考

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    target: 'atom',
    entry: {
        app: './app/app.js',
    },
    output: {
        path: './build',
        filename: '[name].js',
    },
    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /\.css$/,
            loaders: ExtractTextPlugin.extract("style", "css")
        }, {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel'
        }, {
            test: /\.json$/,
            loader: 'json'
        }]
    },
    plugins: [
        new ExtractTextPlugin('app.css')
    ],
    vue: {
        loaders: {
            css: ExtractTextPlugin.extract("css")
        }
    }
}

提取出来的文件就是app.css

Answer 2

在 webpack 4 里面一般换掉它了