4

我遇到了 webpack 没有从供应商VUE 组件中提取 CSS 的问题。

Html 头部看起来像这样：https ://i.stack.imgur.com/AbtkC.png

所有这些样式标签仅来自供应商Vue 组件。在从 Javascript 加载页面后插入

我的 vue 组件中的其他样式，我的 LESS 文件，来自非 vue供应商包的样式被正确拆分为main.css和vendor.css

配置中缺少什么？（底部）

谢谢

webpack.config.js

    常量 webpack = require('webpack');
    常量 HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
    const utils = require('./utils');

    常量路径 = 要求（'路径'）;
    const isProduction = process.env.NODE_ENV === 'production';

    const SRC_PATH = path.join(__dirname, 'src');
    const DIST_PATH = path.join(__dirname, !isProduction ? 'www-dev' : 'www');

    函数解析（目录）{
        return path.join(__dirname, '../', dir)
    }

    模块.exports = {

        开发工具：！isProduction ？'inline-source-map' ：未定义，

        入口： {
            主要的： [
                SRC_PATH + '/main.less',
                SRC_PATH + '/main.js',
            ]
        },

        输出： {
            路径：DIST_PATH，
            公共路径：''，
            文件名：!isProduction ? '[name].js' : '[name].min.js?c=[chunkhash]',
            sourceMapFilename: !isProduction ? '[名称].js.map'：未定义
        },

        模块： {
            规则：utils.styleLoaders({ sourceMap: true, extract: true })
                .concat([{
                        测试：/\.vue$/，
                        加载器：'vue-loader'，
                        选项： {
                            加载器：utils.cssLoaders({
                                源地图：真，
                                提取：真
                            })
                        },
                    },
                    {
                        测试：/\.js$/，
                        加载器：'babel-loader'，
                        排除：/node_modules/
                    },
                    {
                        测试：/\.(woff2?|ttf|eot|otf)$/,
                        加载器：'文件加载器'，
                        选项： {
                            名称：路径 => {
                                if(!/node_modules|bower_components/.test(path))
                                    返回'字体/[名称]。[哈希]。[ext]'；

                                返回“字体/供应商/”+路径
                                    .replace(/\\/g, '/')
                                    。代替（
                                        /((.*(node_modules|bower_components))|fonts|font|assets)\//g, ''
                                    ) + '?[哈希]';
                            },
                            公共路径：'./'
                        }
                    },
                    {
                        测试：/\.(bmp|png|jpe?g|gif|svg|ico|ani|cur)$/,
                        装载机：[{
                                加载器：'文件加载器'，
                                选项： {
                                    名称：路径 => {
                                        if(!/node_modules|bower_components/.test(path))
                                            返回'图像/[名称]。[哈希]。[ext]'；

                                        返回“图像/供应商/”+路径
                                            .replace(/\\/g, '/')
                                            。代替（
                                                /((.*(node_modules|bower_components))|images|image|img|assets)\//g, ''
                                            ) + '?[哈希]';
                                    },
                                    公共路径：'./'
                                }
                            },
                            “图像加载器”
                        ]
                    }
                ])
        },
        解决： {
            别名：{
                'vue$': 'vue/dist/vue.esm.js',
                '~': 解析('node_modules'),
                '@'：解析（'src'）
            }
        },
        插件：[]，

        表现： {
            提示：假
        }
    }

    //开发和生产插件
    模块.exports.plugins.push(

        //环境
        新的 webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"' + (!isProduction ? 'development' : 'production') + '"'
            }
        }),

        //提取CSS到文件
        新的 ExtractTextPlugin({ 文件名: !isProduction ? '[name].css?c=[chunkhash]' : '[name].min.css?c=[chunkhash]' }),

        //提取供应商CSS/JS
        新的 webpack.optimize.CommonsChunkPlugin({
            名称：'供应商'，
            minChunks：函数（模块）{
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),

        //提取html
        新的 HtmlWebpackPlugin({
            文件名：'index.html',
            模板：SRC_PATH + '/index.html',
            注入：真，
            chunksSortMode: '依赖',
            缩小：！isProduction ？不明确的 ： {
                删除评论：真，
                折叠空白：真，
                removeAttributeQuotes: 真
            }
        })
    );


    if(!isProduction)
    //开发的东西
        模块.exports.plugins.push(

        // 热模块更换..不知道
        新的 webpack.HotModuleReplacementPlugin(),

        // 使用 NoEmitOnErrorsPlugin 跳过发射
        // 编译时出现错误时的阶段。
        // 这确保不会发出包含错误的资产。
        新的 webpack.NoEmitOnErrorsPlugin()
    );
    别的
    //生产
        模块.exports.plugins.push(

        // 优化 CSS
        新的 OptimizeCSSPlugin({
            cssProcessorOptions: {
                安全：真实
            }
        }),

        // 缩小 JS
        新的 webpack.optimize.UglifyJsPlugin({
            源地图：真，
            压缩：{
                警告：错误
            }
        })
    );

实用程序.js

    const ExtractTextPlugin = require('extract-text-webpack-plugin')

    出口.cssLoaders = 功能（选项）{
        选项 = 选项 || {}

        变量 cssLoader = {
            加载器：'css-loader'，
            选项： {
                最小化：process.env.NODE_ENV === 'production',
                sourceMap：options.sourceMap
            }
        }

        // 生成与提取文本插件一起使用的加载器字符串
        函数 generateLoaders(loader, loaderOptions) {
            var loader = [cssLoader]
            如果（加载器）{
                装载机.push({
                    装载机：装载机+'-装载机'，
                    选项：Object.assign({}, loaderOptions, {
                        sourceMap：options.sourceMap
                    })
                })
            }

            // 指定该选项时提取 CSS
            //（在生产构建期间就是这种情况）
            如果（选项。提取）{
                返回ExtractTextPlugin.extract({
                    用途：装载机，
                    后备：'vue-style-loader'
                })
            } 别的 {
                返回 ['vue-style-loader'].concat(loaders)
            }
        }

        // https://vue-loader.vuejs.org/en/configurations/extract-css.html
        返回 {
            css：生成加载器（），
            postcss: generateLoaders(),
            少：generateLoaders（'少'），
            sass: generateLoaders('sass', { indentedSyntax: true }),
            scss: generateLoaders('sass'),
            手写笔：generateLoaders('stylus'),
            styl: generateLoaders('stylus')
        }
    }

    // 为独立样式文件（.vue 之外）生成加载器
    出口.styleLoaders = 功能（选项）{
        变量输出 = []
        var loaders = exports.cssLoaders(options)
        for（加载器中的 var 扩展）{
            var loader = loaders[扩展名]
            输出.推（{
                测试：新正则表达式（'\\.' + 扩展名 + '$'），
                用途：装载机
            })
        }
        返回输出
    }

包.json

    {
      “名称”：“vue 测试”，
      "description": "一个 Vue.js 项目",
      “版本”：“1.0.0”，
      “作者”： ””，
      “私人”：真的，
      “脚本”：{
        "start": "cross-env NODE_ENV=development webpack-dev-server --hot --config=webpack.dev.config.js",
        "build": "cross-env NODE_ENV=development webpack --config=webpack.config.js --progress --hide-modules",
        "watch": "npm run build -- --watch",
        "release": "cross-env NODE_ENV=production webpack --config=webpack.config.js --progress --hide-modules"
      },
      “依赖”：{
        "axios": "^0.16.2",
        "字体真棒": "^4.7.0",
        “材料设计图标”：“^3.0.1”，
        “速度动画”：“^1.5.0”，
        "vue": "^2.4.1",
        "vue-directive-tooltip": "^1.2.3",
        "vue-image-lightbox": "^5.5.3",
        "vue-images": "^1.0.10",
        "vue-js-modal": "^1.2.2",
        "vue-lazyload": "^1.0.6",
        "vue-router": "^2.7.0",
        "vue-select": "^2.2.0",
        "vue-touch": "^2.0.0-beta.4",
        "vue2-dropzone": "^2.3.5",
        "vuejs-datepicker": "^0.9.4",
        “vuetify”：“^0.13.1”，
        "vuex": "^2.3.1",
        “vuex-路由器同步”：“^4.2.0”
      },
      “开发依赖”：{
        "babel-core": "^6.0.0",
        "babel-loader": "^6.0.0",
        "babel-preset-env": "^1.5.1",
        "babel-preset-stage-2": "^6.24.1",
        “布尔玛”：“^0.4.3”，
        “跨环境”：“^3.0.0”，
        "css-loader": "^0.25.0",
        "cssnano": "^3.10.0",
        "提取文本 webpack 插件": "^2.1.2",
        "文件加载器": "^0.9.0",
        "html-webpack-plugin": "^2.29.0",
        "img-loader": "^2.0.0",
        "少": "^2.7.2",
        "less-loader": "^4.0.4",
        “节点萨斯”：“^4.5.0”，
        "优化-css-assets-webpack-plugin": "^2.0.0",
        "sass-loader": "^5.0.1",
        "vue-loader": "^13.0.2",
        “vue 模板编译器”：“^2.3.3”，
        "webpack": "^2.6.1",
        “webpack-dev-server”：“^2.4.5”
      }
    }
4

0 回答 0