增加html模块功能

This commit is contained in:
cebgcontract 2022-09-28 19:11:14 +08:00
parent d6e8f999ed
commit 00299a78cf
27 changed files with 393 additions and 2340 deletions

36
README.md Normal file
View File

@ -0,0 +1,36 @@
# cebg-site
使用webpack来发布静态页面
## webpack plugin
| plugin名 | 说明 |
| ---------------------------------- | ---------------------------------------- |
| html-webpack-plugin | |
| mini-css-extract-plugin | |
| optimize-css-assets-webpack-plugin | 用于压缩css, 替换webpack默认的功能 |
| terser-webpack-plugin | 用于压缩生成的html,替换webpack默认的功能 |
## webpack loader
| loader名 | 说明 |
| ------------------- | ---------------------------- |
| css-loader | |
| style-loader | |
| file-loader | |
| html-loader | |
| url-loader | |
| template-ejs-loader | 用于在页面中引入其他页面组件 |

View File

@ -12,20 +12,15 @@
"author": "",
"license": "ISC",
"devDependencies": {
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"glob": "^8.0.3",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"html-webpack-tags-plugin": "^3.0.2",
"html-withimg-loader": "^0.1.16",
"jsdom": "^20.0.0",
"mini-css-extract-plugin": "^2.6.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"raw-loader": "^4.0.2",
"style-loader": "^3.3.1",
"template-ejs-loader": "^0.9.4",
"terser-webpack-plugin": "^5.3.6",
"url-loader": "^4.1.1",
"webpack": "^5.74.0",

46
src/comp/footer.html Normal file
View File

@ -0,0 +1,46 @@
<section class="join">
<div class="join-inner">
<a href="https://discord.gg/8dWX6jpcME">
<img src="img/home/join1@2x.png" />
</a>
<a href="https://t.me/CEBG_official">
<img src="img/home/join2@2x.png" />
</a>
<a href="https://twitter.com/CEBG_GAME">
<img src="img/home/join3@2x.png" />
</a>
</div>
</section>
<section class="footer">
<div class="footer-inner">
<dl>
<dt>Product</dt>
<dd><a href="./index.html">Home</a></dd>
<dd><a href="./gameplay.html">Gameplay</a></dd>
<dd><a href="./tokenomic.html">Tokenomic</a></dd>
<dd><a href="./nft.html">NFT</a></dd>
<dd><a href="javascript:alert('Comeing soon')">Marketplace</a></dd>
</dl>
<dl>
<dt>Resources</dt>
<dd><a href="https://whitepaper.cebg.games/">Whitepaper</a></dd>
</dl>
<dl>
<dt>About</dt>
<dd><a href="./team.html">Team</a></dd>
<dd><a href="./roadmap.html">Roadmap</a></dd>
</dl>
<dl>
<dt>Policies</dt>
<dd><a href="./terms.html">Terms of use</a></dd>
<dd><a href="./privacy.html">Privacy Policy</a></dd>
</dl>
<dl>
<dt>Contact us</dt>
<dd><a href="mailto:contact@cebg.games">contact@ecbg.games</a></dd>
</dl>
</div>
<div class="footer-bottom na-he">
COPYRIGHT &copy; CEBG.ALL RIGHTS RESERVED.
</div>
</section>

5
src/comp/jslib.html Normal file
View File

@ -0,0 +1,5 @@
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"
></script>

30
src/comp/walletModal.html Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

109
webpack.desktop.dev.js Normal file
View File

@ -0,0 +1,109 @@
const path = require('path')
const glob = require('glob')
var webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const entryFiles = glob.sync(path.join(__dirname, './src/desktop/*.html'))
const htmlWebpackPlugins = []
// entryFiles.map((entryFile) => {
// const matchRes = entryFile.match(/src\/desktop\/(.*)\.html$/)
// const pageName = matchRes && matchRes[1]
// console.log(pageName)
// htmlWebpackPlugins.push(
// new htmlWebpackPlugin({
// template: path.join(__dirname, `./src/desktop/${pageName}.html`),
// filename: `${pageName}.html`,
// inject: 'body',
// }),
// )
// })
module.exports = {
mode: 'development',
entry: './src/desktop/js/app.js',
output: {
path: path.resolve(__dirname, 'dist/desktop'),
filename: 'js/[name]-[hash].js',
publicPath: './',
assetModuleFilename: 'img/[hash][ext][query]',
},
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
// type: 'asset/resource',
dependency: { not: ['url'] },
loader: 'url-loader',
options: {
name: '[hash].[ext][query]',
limit: 1024 * 10,
outputPath: 'img',
},
},
{
test: /\.(woff|ttf|svg|eot|ico)$/,
use: ['url-loader'],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }],
},
{
test: /.html$/,
use: [
{
loader: 'html-loader',
options: {
esModule: false,
sources: {
list: [
'...',
{
tag: 'a',
attribute: 'data-bigimg',
type: 'src',
},
{
tag: 'a',
attribute: 'data-imgdetail',
type: 'src',
},
],
},
},
},
'template-ejs-loader',
],
},
// {
// exclude: /\.(css|js|html|json|less|png|jpg|gif|woff|ttf|svg|eot)$/,
// loader: 'file-loader',
// },
],
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, `./src/desktop/index1.html`),
filename: `index.html`,
inject: 'body',
}),
new MiniCssExtractPlugin(),
].concat(htmlWebpackPlugins),
optimization: {
splitChunks: {
chunks: 'all',
},
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: false,
}),
new OptimizeCssAssetsPlugin(),
],
},
}

View File

@ -55,30 +55,31 @@ module.exports = {
},
{
test: /.html$/,
loader: 'html-loader',
options: {
esModule: false,
sources: {
list: [
'...',
{
tag: 'a',
attribute: 'data-bigimg',
type: 'src',
use: [
{
loader: 'html-loader',
options: {
esModule: false,
sources: {
list: [
'...',
{
tag: 'a',
attribute: 'data-bigimg',
type: 'src',
},
{
tag: 'a',
attribute: 'data-imgdetail',
type: 'src',
},
],
},
{
tag: 'a',
attribute: 'data-imgdetail',
type: 'src',
},
],
},
},
},
'template-ejs-loader',
],
},
// {
// exclude: /\.(css|js|html|json|less|png|jpg|gif|woff|ttf|svg|eot)$/,
// loader: 'file-loader',
// },
],
},
plugins: [new MiniCssExtractPlugin()].concat(htmlWebpackPlugins),

View File

@ -56,30 +56,31 @@ module.exports = {
},
{
test: /.html$/,
loader: 'html-loader',
options: {
esModule: false,
sources: {
list: [
'...',
{
tag: 'a',
attribute: 'data-bigimg',
type: 'src',
use: [
{
loader: 'html-loader',
options: {
esModule: false,
sources: {
list: [
'...',
{
tag: 'a',
attribute: 'data-bigimg',
type: 'src',
},
{
tag: 'a',
attribute: 'data-imgdetail',
type: 'src',
},
],
},
{
tag: 'a',
attribute: 'data-imgdetail',
type: 'src',
},
],
},
},
},
'template-ejs-loader',
],
},
// {
// exclude: /\.(css|js|html|json|less|png|jpg|gif|woff|ttf|svg|eot)$/,
// loader: 'file-loader',
// },
],
},
plugins: [new MiniCssExtractPlugin()].concat(htmlWebpackPlugins),

875
yarn.lock

File diff suppressed because it is too large Load Diff