webpack2 vue2 CSS无法提取出来 总是打包到JS里去。

Question

在我没有引用vue 路由的时候 是能正常打包和识别CSS的
打包后的样子

并没有把CSS 单独存放在一个独立的CSS 文件里

WEBPACK 配置

/**
 * Created by truncate on 2017/3/18.
 */
const isEnv = process.env.NODE_ENV === 'production';

/**
 * 引入webpack
 * @type {webpack}
 */
const webpack = require('webpack');
/**
 * path 路径
 */
const path = require('path');
/**
 * 生成首页
 * @type {HtmlWebpackPlugin}
 */
const HTMLWebpackPlugin = require('html-webpack-plugin');
/**
 * 热更新
 * @type {string}
 */
const hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
/**
 * 入口文件
 * @type {string}
 */
const entry = './src/main.js';
/**
 * 分离CSS
 * @type {ExtractTextPlugin}
 */
const Ex = require('extract-text-webpack-plugin');
/**
 * CSS压缩
 * @type {OptimizeCssAssetsPlugin}
 */
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

/**
 * 公共插件
 * @type {Array}
 */
const commonPlugins = [
    // 生成首页
    new HTMLWebpackPlugin({
        title: 'vue',
        filename: './index.html',
        template: './src/template/index.html',
        inject: true
    }),
    // 热加载插件 想要自动刷新必须加
    new webpack.HotModuleReplacementPlugin(),
    // 导出 打包 CSS
    new Ex('./css/[name].css'),
    // 提取公共模块, 保存指定公共 bundle 的名字。
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
    })
];

/**
 * 开发插件
 * @type {Array}
 */
const envPlugins = isEnv ? [
    // 指定生产环境，以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句。
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production')
    }),
    // 压缩JS代码,CSS 没有被压缩到
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
    // CSS压缩 单独webpack 似乎没用 webpack -p 都给压缩了观察
    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.optimize\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { discardComments: {removeAll: true } },
        canPrint: true
    }),
] : [];

console.log('## 代码编译开始')
/**
 * 导出模块
 * @type {{entry: *[], output: {path: string, filename: string, publicPath: string}, module: {rules: *[]}, resolve: {alias: {vue: string}}, plugins: *[]}}
 */
module.exports = {
    //入口文件
    entry: [entry, hotMiddlewareScript],
    output: {
        path: __dirname + '/dist',
        filename: '[name].js?[hash]', //编译后文件名
        publicPath: '/',
        //libraryTarget: "umd" // 组件采用UMD格式打包
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                //use: ["vue-loader"],
                //如果想要分离vue里面的Style css用以下配置
                use: {
                    loader: "vue-loader",
                    options: {
                        loaders: {
                            css: 'vue-style-loader?sourceMap!css-loader?sourceMap',
                            sass: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?sourceMap',
                            // css: Ex.extract({
                            //     use: ['css-loader'],
                            //     fallback: 'vue-style-loader' // 加入路由后 不加此货CSS 无法生效
                            // }),
                            // stylus: Ex.extract({
                            //     use: ["css-loader", "stylus-loader"],
                            //     fallback: 'vue-style-loader'
                            // }),
                            // less: Ex.extract({
                            //     use: ["css-loader", "less-loader"],
                            //     fallback: 'vue-style-loader'
                            // }),
                            // sass: Ex.extract({
                            //     use: ["css-loader", "sass-loader"],
                            //     fallback: 'vue-style-loader'
                            // })
                        }
                    }
                }
            },
            {
                test: /\.js$/,
                use: ["babel-loader"],
                exclude: /node_modules/

            },
            {
                test: /\.html$/,
                use: ["vue-html-loader"]
            },
            // {
            //     test: /\.styl$/,
            //     use: ["vue-style-loader", "css-loader", "stylus-loader"]
            // },
            // {
            //     test: /\.css$/,
            //     use: ["vue-style-loader", "css-loader"]
            // },
            // {
            //     test: /\.less$/,
            //     use: ["vue-style-loader", "css-loader", "less-loader"]
            // },
            // {
            //     test: /\.(scss|sass)$/,
            //     use: ["vue-style-loader", "node-sass", "css-loader", "sass-loader"]
            // },
            {
                test: /\.(css|less|sass)$/,
                loader: "vue-style-loader?sourceMap!css-loader?sourceMap!less-loader?sourceMap!sass-loader?sourceMap"
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10000,
                        name: 'img/[name].[hash:7].[ext]'    // 将图片都放入img文件夹下，[hash:7]防缓存
                    }
                }]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10000,
                        name: 'fonts/[name].[hash:7].[ext]'    // 将字体放入fonts文件夹下
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue', '.jsx'], //后缀名自动补全
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    //公共及开发插件
    plugins: commonPlugins.concat(envPlugins),
}
console.log('## 代码编译完成');

Answer 1

webpack 配置有点看不懂，建议使用 vue-cli 来生成项目结构和 webpack 配置，一直用 vue-cli 创建 Vue 的项目，好像没有遇到这个问题，如果题主不方便的话，建议看一下 vue-cli 生成的 webpack 配置；对比一下有什么区别（PS.:webpack 配置真TM复杂）

Answer 2

楼主解决了吗？我也有相同的问题