学习 webpack+vue.js （3、多页面）-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

最终文件夹结构如下

前面有说过主页面，但是我们还有很多页面，如果说一个文件夹对应一个页面，我们还有一个blog文件夹，同样也要生成页面和js。

home/index.html
home/index.js
blog/index.html
blog/index.js

修改配置文件

webpack.config.js


/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');
//引入一个插件，可以根据规则和模板自动生成html文件
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
     devtool: 'source-map',//配置生成Source Maps.可以不要
    /* 入口文件，从这里开始装载 */
    entry: {
        //每个文件夹有自己的入口js. 因为ouput只有一个，我们生成的index.js文件如果要到不同的文件夹，
        //那么需要特殊的name(带有文件夹的特性)
        // name：xx.js
        "webapp/home":__dirname+'/webapp/home/webpack/home.js',
        "webapp/blog":__dirname+'/webapp/blog/webpack/blog.js',
    },
    output: {
        /* 输出目录，没有则新建 */
        path: __dirname,//基础目录
        /* 文件名 可以在名字上加上[hash],根据文件内容得到的hash值，保证每次修改后的文件名都不一样，避免浏览器缓存问题*/
        filename: '[name]/index.js'//这里的name就是入口的key
    },
    module: {
        rules: [
            /* 用来解析vue后缀的文件 */
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
             {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
           
            /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
            {
                test: /\.js$/,
                loader: 'babel-loader',
                /* 排除模块安装目录的文件 */
                exclude: /node_modules/
            }
        ]
    },
    plugins:[
        //不同的页面需要不同的HtmlWebpackPlugin。每个页面需要一个吧。
        new HtmlWebpackPlugin({
        filename:__dirname+"/webapp/home/index.html",//将会输出的index.html
        template: __dirname + "/webapp/home/webpack/template.html",//模板文件.默认会生成index.html文件。你也可以自己制定filename
        chunks:['webapp/home']
    }),
    new HtmlWebpackPlugin({
        filename:__dirname+"/webapp/blog/index.html",
        template: __dirname + "/webapp/blog/webpack/template.html",//模板文件.默认会生成index.html文件。你也可以自己制定filename
        chunks:['webapp/blog']
    }),
   
    ]
}

这样子也是可以的，就是如果页面太多了，可能会忘记写htmlWebpackPlugin.或者要修改的时候会很麻烦，每个都需要独立修改。

我们让它自动生成plugin和entry。就是手动修改module.export.entry...

因为这个配置文件就是个js。改变plugins和entry的代码还是很容易的.主要是要读文件夹（nodejs）

webpack.config.js

/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');
//引入一个插件，可以根据规则和模板自动生成html文件
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'source-map',//配置生成Source Maps.可以不要
    /* 入口文件，从这里开始装载 */
    entry: {
        //每个文件夹有自己的入口js. 因为ouput只有一个，我们生成的index.js文件如果要到不同的文件夹，
        //那么需要特殊的name(带有文件夹的特性)
        // name：xx.js
        // "webapp/home":__dirname+'/webapp/home/webpack/home.js',
        // "webapp/blog":__dirname+'/webapp/blog/webpack/blog.js',
    },
    output: {
        /* 输出目录，没有则新建 */
        path: __dirname,//基础目录
        /* 文件名 可以在名字上加上[hash],根据文件内容得到的hash值，保证每次修改后的文件名都不一样，避免浏览器缓存问题*/
        filename: '[name]/index.js'//这里的name就是入口的key
    },
    module: {
        rules: [
            /* 用来解析vue后缀的文件 */
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },

            /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
            {
                test: /\.js$/,
                loader: 'babel-loader',
                /* 排除模块安装目录的文件 */
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        //不同的页面需要不同的HtmlWebpackPlugin。每个页面需要一个吧。
        //     new HtmlWebpackPlugin({
        //     filename:__dirname+"/webapp/home/index.html",//将会输出的index.html
        //     template: __dirname + "/webapp/home/webpack/template.html",//模板文件.默认会生成index.html文件。你也可以自己制定filename
        //     chunks:['webapp/home']
        // }),
        // new HtmlWebpackPlugin({
        //     filename:__dirname+"/webapp/blog/index.html",
        //     template: __dirname + "/webapp/blog/webpack/template.html",//模板文件.默认会生成index.html文件。你也可以自己制定filename
        //     chunks:['webapp/blog']
        // }),

    ]
}

//获取所有的页面入口文件。这个参考了网上的一些代码
//主要知识点在 nodejs读取文件夹。其他的和普通js代码没什么区别
function getEntry() {
    var fs = require("fs");
    var entries = {
    };
    var dirPath = __dirname + "/webapp";
    var files = fs.readdirSync(dirPath);
    files.forEach(function (file) {
        //获取home,blog等
        var curPath = dirPath + "/" + file;//当前文件
        var info = fs.statSync(curPath);//获取文件信息
        if (info.isDirectory()) {//如果是文件夹，作为一个页面
            var key = "webapp/" + file;
            entries[key] = dirPath + "/" + file + "/webpack/" + file + ".js";
        }
    });
    return entries;
}

var entries = getEntry();
//自动生成 entry 和 html plugin
Object.keys(entries).forEach(function (name) {
    // 每个页面生成一个entry，如果需要HotUpdate，在这里修改entry
    module.exports.entry[name] = entries[name];

    // 每个页面生成一个html
    var plugin = new HtmlWebpackPlugin({
        // 生成出来的html文件名
        filename: __dirname + "/" + name + "/index.html",
        // 每个html的模版，这里多个页面使用同一个模版
        template: __dirname + "/" + name + "/webpack/template.html",
        // 自动将引用插入html
        inject: true,
        // 每个html引用的js模块
        chunks: [name]
    });
    module.exports.plugins.push(plugin);
})

修改之后有了多个入口。我们的页面地址有了一些变化。

http://localhost:7080/webapp/home

前面多了webapp.不知道webpack-dev-server是否能指定webapp为根路径，直接访问

http://localhost:7080/home

我们之前的header.vue也要改下路径

                    {text:'首页',href:"/webapp/home"},
                    
                    {text:'博客',href:"/webapp/blog"},

其他文件

blog.vue

<template>
    <div>
        <ul>
            <li v-for="li in lis">
                {{li}}
            </li>
        </ul>
    </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    lis: [
                        "最新推荐",
                        "今日热门", "本周热门", "每日一博", "最新文章"
                    ]
                }
            }
        }
    </script>


blog.js


//这个js作为首页的打包入口
import Vue from 'vue';//npm 安装过vue.可以直接import

import blog from '../../blog/vue/blog.vue';
import '../../base.css';
import header from '../../home/vue/header.vue';


// 创建根实例
new Vue({
    el:'#header',//这个是在模板文件中需要替换的div ID.
    //这个div将本vue进行重新渲染
    // render:function(createElement){
    //    return createElement(header);
    // }
    render:x=>x(header)
})

// 创建根实例
new Vue({
    el:'#blog',//这个是在模板文件中需要替换的div ID.
    //这个div将本vue进行重新渲染
    // render:function(createElement){
    //    return createElement(header);
    // }
    render:x=>x(blog)
})

就到这里了

转载于:https://my.oschina.net/daluobo/blog/844923