webpack config is trouble?

[archiewx]

not format.

[fisheva]

我看截图里有中文...我就中文回答了哈23333

截图的53行之前都是有样式的,53行后失去样式了, 是不是问题出现在53行到54行间的代码? 如果可以, 提供下这个配置文件啊, 没有文件光看截图, 难以找出问题(话说我还不会webpack =_=)

[archiewx]

这个配置文件使我们项目组都在用的配置文件，不会出错的。整体给你复制下来你看看

/*
 * @Author: Administrator
 * @Date:2016-11-18 09:53:21
 * @Last Modified by:   yw4295
 * @Last Modified time: 2017-04-14 14:15:08
 */

const webpack = require('webpack'),
    path = require('path'),
    yargs = require('yargs').argv,
    ssi = require('connect-ssi'),
    history = require('connect-history-api-fallback'),
    BrowserSyncPlugin = require('browser-sync-webpack-plugin');

// const pkg = require('./package.json');
const projects = require('./project.config.js');

let pdir = {},
    pitem, NODE_ENV;
let config, plugins = [],
    output;

if (yargs.d || yargs.p) {
    pitem = projects.filter(item => item.name === (yargs.d || yargs.p))[0];

    pdir.base = path.join(`${__dirname}/${pitem.name}`);
    pdir.host = pitem.host;
    pdir.port = pitem.port;
    pdir.src = path.join(`${pdir.base}/src`);
    pdir.asset = path.join(`${pdir.base}/asset`);
    pdir.dest = path.join(`${pdir.base}/dist/${pitem.version}`);

    NODE_ENV = yargs.p ? '"production"' : '"development"';
    config = {
        entry: {
            'app': path.join(`${pdir.src}/boot/app.js`)
        },
        output: {
            path: pdir.asset,
            // publicPath: pdir.asset,
            chunkFilename: '[name].js',
            filename: '[name].js'
        },
        resolve: {
            extensions: ['.js', '.vue', '.jsx', '.scss'],
            alias: {
                '@': pdir.src,
                boot: path.join(`${pdir.src}/boot`),
                c: path.join(`${pdir.src}/component`),
                js: path.join(`${pdir.src}/js`),
                img: path.join(`${pdir.src}/img`),
                v: path.join(`${pdir.src}/view`),
                css: path.join(`${pdir.src}/css`),
                sass: path.join(`${pdir.src}/sass`),
                less: path.join(`${pdir.src}/less`),
                tpl: path.join(`${pdir.src}/tpl`),
                media: path.join(`${pdir.src}/media`)
            },
            modules: ['modules', 'node_modules']
        },
        module: {
            // 各种加载器，即让各种文件格式可用require引用
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.less$/,
                    use: [
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: false,
                                config: {
                                    path: '.postcssrc.js'
                                }
                            }
                        }]
                },
                {
                    test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                    use: {
                        loader: 'url-loader?limit=10240&name=img/[name]-[hash:16].[ext]'
                    }
                },
                {
                    test: /\.(mp3|swf|wav|wma|mid|ogg|rm|rmvb|mpg|3gp|wmv|asf|mov|avi|mp4|mkv|flv|dat|mod)\??.*$/,
                    use: {
                        loader: 'url-loader?limit=10240&name=media/[name]-[hash:16].[ext]'
                    }
                },
                {
                    test: /\.tpl$/,
                    use: {
                        loader: 'text-loader'
                    }
                },
                {
                    test: /\.html$/,
                    use: {
                        loader: 'html-loader'
                    }
                },
                {
                    test: /\.vue$/,
                    exclude: '/node_modules/',
                    use: {
                        loader: 'vue-loader',
                        options: {
                            loaders: {
                                'css': ['vue-style-loader', 'css-loader']
                            }
                        }
                    }
                },
                {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader'
                    },
                    exclude: '/node_modules/'
                },
                {
                    test: /\.jsx$/,
                    use: {
                        loader: 'babel-loader'
                    },
                    exclude: '/node_modules/'
                }
            ],
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: '/node_modules/'
                },
                {
                    test: /\.jsx$/,
                    loader: 'babel-loader',
                    exclude: '/node_modules/'
                }
            ]
        },

        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV
                }
            }),
            new BrowserSyncPlugin({
                host: pdir.host,
                port: pdir.port,
                files: `${pdir.base}/**/*.html`,
                server: {
                    baseDir: [pdir.base, `${pdir.base}/../`],
                    index: 'index.html',
                    routes: {
                        '/modules': 'modules'
                    },
                    middleware: [
                        ssi({
                            baseDir: pdir.base,
                            ext: '.html'
                        }),
                        history({
                            index: '/index.html'
                        })
                    ]
                }
            })
        ]
    };

    // 生产环境
    if (NODE_ENV === '"production"') {
        plugins = [
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV
                }
            }),
            // new webpack.IgnorePlugin(/^lib\/rap-sodao(\.js)?$/),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    drop_console: true
                },
                exclude: /(node_modules|bower_components|web_modules)/,
                mangle: {
                    except: [
                        '$super', '$', 'exports', 'require', 'define', 'module',
                        'modules', '__webpack_require__', '_']
                }
            })
        ];
        output = {
            'path': pdir.dest,
            'chunkFilename': '[name]-[chunkhash:16].js'
        };

        Object.assign(config.output, output);
        Object.assign(config.plugins, plugins);
    }
}
module.exports = config;

[archiewx]

你的主题很好看。我一直使用着，就是这里有点问题，我也不清楚主题是如何解析js代码高亮的。您看看是不是和es6里面的文本模板有关。

[fisheva]

尴尬了...您的配置文件 我复制进我在VSCode新建的js文件, 显示全部正常, 您再看下?

[fisheva]

另外制作/修改主题的代码渲染颜色机制也并不复杂. 按下Ctrl+Shift+P(Windows) 或 Cmd+Shift+R(Mac), 打开VSCode的指令窗口, 输入scope, 选中图中这个命令, 回车, 就可以检查文件中所有代码的scope值. 每个代码的scope值不是唯一的, 越往上, 代表锁定范围越小越精确.

最后在主题的json文件里以下图格式设置各种scope值的代码字体样式/颜色.

这就是制作/修改主题的全过程, 现在您的文件在我电脑上显示正常, 您可以以这种方式自查下.

[archiewx]

谢谢。很感谢。良心主题。

[archiewx]

话题结束了不知道是否能继续提？

这是我最近发现的问题。尴尬了。js中使用了flow

[archiewx]

这是我最近准备测试一下。随便写了一下。在flow 里面包含了一个限定对象类型语法是{| |} ，我看到eva似乎不能正确识别语法高亮。您可以看看

[archiewx]

按照您说的，我这里查看了一下，发现两边位置找到的scopes不一样啊。

[fisheva]

我照你的图片打了遍

图上问题出的有点多: 右侧的 }) 及 左侧的 return [ex, option]、export default throttle 显示颜色都不正常(即此时它们的Scope值是不正常的)。

我没用过flow, 但我把鼠标放在 |} 中间, 选中符号只是 }, 所以我猜flow里限定对象类型的语法是 | | , 如果语法是 {| |}, 那么选中的会是 |} , 我尝试着在 |} 中间输了个空格(并不是一次试成, 在其它地方也试了), 显示就正常了。

这说明VSCode在这里把 |} 这种写法视为了语法错误(因此还影响了后面字符的识别)。通常这种大面积字符显示错误都是语法或书写格式错误(上次webpack问题也是), 具体为什么会这样, 这就是VSCode识别字符的算法问题了, 制作主题的过程并没有深入到这个层面。也许你可以就这个问题去VSCode下提个issue: js flow代码如下XXXX, 问 为什么这里少个空格会导致后面字符识别错误, Scope值分配错误?

很刁钻的问题哦(:з」∠)

而且我觉得VSCode的字符识别算法并不清晰高明, 同样的字符在不同语言、不同位置分配的Scope值非常混乱和不同, 制作主题的过程就是一个查漏补缺把理应颜色相同的字符Scope值全部归到一起, 比如

按理4种括号, 每种括号一个Scope值就够了吧?但实际就是这么多这么混乱。

上次webpack问题, 因为我复制你的配置文件显示完全正常, 说明问题不出在主题插件上, 在详细回复完后, 等了二天没看到你的回复, 我认为问题解决了, 就关了issue。之后的一段时间 我也每隔几天来打开这个issue看你有没有回复。以后有新问题可以继续在这下面留言(才发现有留言我就会收到邮件), 或者开新issue, 在问题解决后记得关闭issue。

[fisheva]

另外告诉你如果是主题显示错误, 大概率是某些字符在特定环境下的Scope值未被囊括在任何一个已有的Scope集合里, 如下图

少数部分是字符显示颜色不符合语义化。

如果你遇到这二种情况, 非常欢迎提交给我 !

[archiewx]

好的。感谢回复。这个主题我一直在用。也推荐给朋友了。good。