javascript - 在webpack+vue中,如何将css相同的部分提取到一个公共的common.css中?
PHP中文网
PHP中文网 2017-04-11 11:36:00
[JavaScript讨论组]

在webpack+vue中,如何将css相同的部分提取到一个公共的common.css中?

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


module.exports = {
    //插件项
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            filename: "common.js",
            minChunks: 5,
        }),
        new ExtractTextPlugin("[name].css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Vue: "Vue",
        })
    ],
    //页面入口文件配置
    entry: {
        // 这里有很多个各个界面的模块
    },
    //入口文件输出配置
    output: {
        path: 'dist/test',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap") },
            { test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
            { test: /\.(gif|jpg|png)\??.*$/, loader: 'url-loader?limit=20000&name=images/[name].[ext]'},
            { test: /\.(woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=1&name=fonts/[name].[ext]'},
            { test: /\.vue$/, loader: 'vue-loader'},
        ]
    },
    vue: {
        loaders: {
            css: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap"),
            less: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
        }
    },
    resolve: {
        alias: {
            "jquery": __dirname + "/vendor/bower/jquery/dist/jquery.min",
            "Vue": __dirname + "/vendor/bower/vue/dist/vue",
            // 还有各种外部库
        }
    },
};

现在这个配置文件打包的结果是:
js有独立的common.js,每个入口都有出去公共模块的js,这是没问题的;但是css却有这样的错误:common.css里面虽然是公共的内容,但是每一个入口的css都包含所有的css,没有除去公共模块

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号