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
-
{{li}}
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)
})
就到这里了