webpack4 + ejs 构建多页应用
目录结构
├─build webpack配置目录
│ ├─plugins.js
│ ├─rules.js
│ ├─transfromAssets.js //简单的一个插件，处理路径问题
│ └─webpack.config.js
└─src
├─components ejs公用组件目录
├─css
├─js
├─index.ejs 模板文件
└─about.ejs
源码地址：github
使用ejs模板
- 安装 ejs-loader、html-loader
- 在 src根节点创建ejs文件，作为html的模板
- 使用html-webpack-plugin引入ejs模板
index.ejs 需要向header.ejs传入htmlWebpackPlugin，否则html-webpack-plugin配置的title可能会不起作用
<%= require('./components/header.ejs')({path:'index',htmlWebpackPlugin}) %>
<div id="root">
内容
</div>
<%= require('./components/footer.ejs')() %>
header.ejs
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
webpack plugins，因为是多个页面，所以通过for循环插入HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const plugins = [];
...
nav.forEach(value => {
plugins.push(
new HtmlWebpackPlugin({
filename: `${value.path}.html`,
template: path.resolve(__dirname, '../src', `${value.path}.ejs`),
inject: true,
chunks: ['common', value.path],
favicon: './src/assets/img/favicon.ico',
title: 'title',
minify: {
collapseWhitespace: true
}
})
)
})
...
处理css
- 使用了less，所以需要安装loader：css-loader、less-loader
- 添加浏览器前缀，兼容不同版本浏览器，需要安装postcss-loader、autoprefixer
- 需要压缩生成的css文件，安装插件：optimize-css-assets-webpack-plugin、cssnano
- 将css分离成css文件，安装mini-css-extract-plugin
处理js
安装下babel-loader、@babel/core、@babel/preset-env，处理es6的语法。
webpack配置
plugins.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCss = require('optimize-css-assets-webpack-plugin');
const TransfromAssets = require('./transfromAssets');
const path = require('path');
const nav = require(`../src/data.js`).nav;
const plugins = [];
nav.forEach(value => {
plugins.push(
new HtmlWebpackPlugin({
filename: `${value.path}.html`,
template: path.resolve(__dirname, '../src', `${value.path}.ejs`),
inject: true,
chunks: ['common', value.path],
favicon: './src/assets/img/favicon.ico',
title: 'title',
minify: {
collapseWhitespace: true
}
})
)
})
const otherPlugins = [
new MiniCssExtractPlugin({
filename: '[name].[hash:8].css',
chunkFilename: '[id].css',
}),
new optimizeCss({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {
removeAll: true
}
},
canPrint: true
}),
new TransfromAssets()
];
plugins.splice(nav.length, 0, ...otherPlugins);
module.exports = plugins;
rules.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = [{
test: /\.(c|le)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer")
]
}
},
'less-loader'
]
},
{
test: /\.js$/, //js文件加载器
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
interpolate: true,
minimize: false
}
}]
}, {
test: /\.ejs/,
use: ['ejs-loader'],
}
]
transfromAssets.js 一个插件，作用：
- 将common.js删掉（common.js引入了公用的css，css有用但js无用所以就删啦）
- 将js、css存放至单独的目录，并将html里路径指向正确的路径
function TransfromAssets(options) {};//也可以是一个类
TransfromAssets.prototype.apply = function(compiler) {
compiler.plugin('emit', function(compilation, callback) {
for (var filename in compilation.assets) {
if (/common.*js$/.test(filename)) {
delete compilation.assets[filename];
continue;
}
if (/.*[js|css]$/.test(filename)) {
let type = /.*js$/.test(filename) ? 'js' : 'css';
let source = compilation.assets[filename].source();
let size = compilation.assets[filename].size();
compilation.assets[`${type}/${filename}`] = {
source: () => source,
size: () => size
}
delete compilation.assets[filename];
}
if (/html$/.test(filename)) {
let source = compilation.assets[filename].source();
source = source.replace(/\<script.*?<\/script>/ig, value => ~value.indexOf('common') ? '' : value);
source = source.replace(/href=\"\S+?.css\"/ig, value => value.slice(0, 6) + 'css/' + value.slice(6));
source = source.replace(/src=\".*?.js\"/ig, value => value.slice(0, 5) + 'js/' + value.slice(5));
compilation.assets[filename].source = () => source;
}
}
callback();
})
};
module.exports = TransfromAssets;
webpack.config.js
const path = require('path');
const plugins = require('./plugins');
const rules = require('./rules');
module.exports = {
entry: {
common: '@src/js/common.js',
index: '@src/js/index.js',
detail: '@src/js/list.js',
},
output: {
path: path.resolve(__dirname, '../dist/'),
filename: "[name].[hash:8].js"
},
devServer: {
inline: true,
historyApiFallback: true,
},
resolve: {
alias: {
'@': path.join(__dirname, '..'),
'@src': path.join(__dirname, '..', 'src')
}
},
module: {
rules
},
plugins
}
webpack4 + ejs 构建多页应用的更多相关文章
- React构建单页应用方法与实例
React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...
- Nodejs in Visual Studio Code 12.构建单页应用Scrat实践
1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...
- 通过Web Api 和 Angular.js 构建单页面的web 程序
通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...
- 用webpack4从零开始构建react脚手架
用webpack4从零开始构建react脚手架 使用脚手架 git clone git@github.com:xiehaitao0229/react-wepack4-xht.git` `cd reac ...
- vue2.0 构建单页应用最佳实战
vue2.0 构建单页应用最佳实战 前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...
- webpack4.0构建项目流程
webpack4.0构建项目流程,具体的就不一一唠叨了,这里给出构建流程步骤: 流程大图: 下载高清大图
- 使用 Vuex + Vue.js 构建单页应用
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...
- 使用 Vuex + Vue.js 构建单页应用【新篇】
使用 Vuex + Vue.js 构建单页应用[新篇] 在去年的七月六号的时候,发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章,文章主要是介绍 vuex 的基本使用方法,发现对大部 ...
- 构建单页Web应用
摘自前端农民工的博客 让我们先来看几个网站: coding teambition cloud9 注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情.它们的界面切换非常流畅,响应 ...
随机推荐
- asp中出现“错误 '80040e14' FROM 子句语法错误”原因
当你的sql语句中出现 “错误 '80040e14' FROM 子句语法错误.”错误时,请注意了,那有可能是你的表名的命名不规范造成的,比如你的表名是“user”那么这杨的表名是不行的,那么在sql语 ...
- ANSI转义序列
http://ascii-table.com/ansi-escape-sequences.php 制作控制台程序时, 要实现一些特殊效果, 需要了解一下 [ANSI转义序列] . ANSI转义序列是一 ...
- RabbitMQ 入门教程(PHP版) 第三部分:发布／订阅（Publish/Subscribe）
发布/订阅 在上篇第二部分教程中,我们搭建了一个工作队列.每个任务之分发给一个工作者(worker).在本篇教程中,我们要做的之前完全不一样——分发一个消息给多个消费者(consumers).这种模式 ...
- F5负载均衡 MIBs bigip oid
F5 MIBs 分组bigip-ltmpool-stat oid=".1.3.6.1.4.1.3375.2.2.5.2.3.1.1" name=&q ...
- ubuntu14.0.4安装kafka
1. 下载 zookeeper-3.4.12 zookeeper download 2 配置Zookeeper 进入 zookeeper 的 conf 目录下,找到 zoo_sample.cfg 文件 ...
- Java基础教程：多线程基础（6）——信号量(Semaphore)
Java基础教程:多线程基础(6)——信号量(Semaphore) 信号量 信号量(Semaphore)由一个值和一个指针组成,指针指向等待该信号量的进程.信号量的值表示相应资源的使用情况.信号量S≥ ...
- DevOps - DevOps精要 - 落地
1 - 关键问题 如何向不具备相关基础知识的人说明和解释DevOps? 如何在组织和团队中推广和实施DevOps? 2 - 在组织中实施DevOps 在全新的组织或服务开发中,没有既定规则和老旧的习惯 ...
- RabbitMQ官方教程一Hello World(GOLANG语言实现)
介绍 RabbitMQ是消息中间件:它接受并转发消息. 您可以将其视为邮局系统:将要发送的邮件放在邮箱中时, 可以确保邮递员最终将邮件传递给收件人. 以此类推,RabbitMQ是一个邮箱,一个邮局和一 ...
- 【作业】Kitchen Plates（拓扑排序）
题目链接:https://vjudge.net/contest/345791#problem/O [问题描述] You are given 5 different sizes of kitchen p ...
- Elasticsearch 全文搜索
1,匹配查询(match) match查询主要的应用场景是进行全文搜索: // 1,初始化数据 DELETE /my_index PUT /my_index { "settings" ...