美文网首页
vue中如何配置多页面配置

vue中如何配置多页面配置

作者: ybrelax | 来源:发表于2018-12-16 00:15 被阅读0次

    webpack 有个特性,基本的功能都是可以用配置去实现的,所以就造成一个特点“很容易忘记它”,所以就很有必要记录一下
    简述一下
    webpack 分为

    • Entry:入口
    • Output: 出口
    • Module 模块
    • Plugin 插件
    • DevServer 服务器配置
    /*
      title: 多页面输出配置
      auth: yaobo
      date: 2018/10/19
      */
    
    const path = require('path')
    
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const merge = require('webpack-merge');
    const glob = require('glob');
    const pathSrc = path.resolve(__dirname, '../src');
    
    
    // 指定开发模式下运行某模块;多个加载,可能会加载偏慢
    /**
     * index: 个人中心;  active 活动; product 产品; policyManager 保单管理; all  有此字段为加载全部
     */
    const devMolues = ['policyManager']
    
    exports.getEntrys = function(suffix, polyfill) {
        // 自动获取
        let entryHtml = glob.sync(pathSrc + '/views/**/app.js');
    
        let entries = {};
        entryHtml.forEach((filePath) => {
            // views/product/app.html
            let _chunk = filePath.split(pathSrc.replace(/\\/g, '/'))[1];
            _chunk = _chunk.substring(0, _chunk.lastIndexOf('/'));
            _chunk = _chunk.substring(_chunk.lastIndexOf('/') + 1, _chunk.length);
            
            if (process.env.NODE_ENV !== 'production') {
                let flag = false;
                for (let item of devMolues) {
                    if (item === _chunk || item === 'all') {
                        flag = true;
                    }
                }
    
                if (flag) {
                    if (suffix == 'html') {
                        entries[_chunk] = filePath.replace(/.js/g, '.html');
                    }
                    if (suffix == 'js') {
                        entries[_chunk] = filePath;
                    } 
                }
    
            } else {
                if (suffix == 'html') {
                    entries[_chunk] = filePath.replace(/.js/g, '.html');
                }
                if (suffix == 'js') {
                    entries[_chunk] = filePath;
                }
            }
            
        })
        return entries;
    }
    
    exports.htmlPlugins = () => {
        let entryHtmls = this.getEntrys('html');
        let arrPull = [];
        for (let _chunk in entryHtmls) {
            let conf = {};
            if (process.env.NODE_ENV === 'production') {
                conf = {
                    filename: _chunk + '.html',
                    template: 'index.html', // entryHtmls[_chunk]  // 引入同一个文件
                    inject: true,
                    minify: {
                        removeComments: true,
                        collapseWhitespace: true,
                        removeAttributeQuotes: true
                            // more options:
                            // https://github.com/kangax/html-minifier#options-quick-reference
                    },
                    chunks: ['manifest', 'vendor', _chunk]
                }
            } else {
                conf = {
                    filename: _chunk + '.html',
                    template: 'index.html',
                    inject: true,
                    chunks: [_chunk]
                }
            }
            arrPull.push(new HtmlWebpackPlugin(conf));
        }
        return arrPull;
    }
    

    实现这个主要是整合了 HtmlWebpackPlugin插件, 这个插件是webpack,用来生成对应的html文件的

     plugins: [
            new webpack.DefinePlugin({
                'process.env': require('../config/dev.env')
            }),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
            new webpack.NoEmitOnErrorsPlugin(),
            // https: //github.com/ampedandwired/html-webpack-plugin
            // new HtmlWebpackPlugin({
            //     filename: 'index.html',
            //     template: 'index.html',
            //     inject: true,
            //     chunks: ['app']
            // }),
    
            // copy custom static assets
            new CopyWebpackPlugin([{
                from: path.resolve(__dirname, '../static'),
                to: config.dev.assetsSubDirectory,
                ignore: ['.*']
            }])
        ].concat(mutiplePageConfig.htmlPlugins())
    

    相关文章

      网友评论

          本文标题:vue中如何配置多页面配置

          本文链接:https://www.haomeiwen.com/subject/khgzhqtx.html