一.样式分离
1.文件目录
2.配置文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:'./src/app.js',
output:{
clean:true,
filename:'bundle.js'
},
mode:'development',
module:{
rules:[{
test:/\.css$/,
use:[{
loader: MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},
'css-loader'
]
}]
},
plugins:[
new MiniCssExtractPlugin({
filename:'[name].css',
chunkFilename:'[id].css',
}),
new HtmlWebpackPlugin({
scriptLoading:'blocking'
}),
]
}
二.问卷设计与postcss
1.文件目录
2.配置文件
(1).webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
clean: true,
filename: 'bundle.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.hbs$/,
use: ['handlebars-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader','postcss-loader']
},
]
}
}
(2).index.js
import './wj'
import './wj.css'
(3).wj.hbs
<form action="https://www.baidu.com">
<div class="wj">
<h1>{{ title }}</h1>
<ul class="content">
<li class="qst">
{{!-- 循环输出题目 --}}
{{#each timu}}
<div class="timu">{{ this.title }}</div>
<div class="option">
{{!-- 循环输出选项 --}}
{{#each this.option}}
{{!-- no 每个选项的序号,this 每次循环的内容 --}}
<div no="{{@key}}">{{ this }}</div>
{{/each}}
</div>
{{/each}}
</li>
</ul>
<button type="submit">提交</button>
</div>
</form>
(4).wj.json
[
{
"title":"题目1",
"option":["a","a","a","a","a"]
},
{
"title":"题目2",
"option":["a","a","a","a","a"]
},
{
"title":"题目3",
"option":["a","a","a","a","a"]
},
{
"title":"题目4",
"option":["a","a","a","a","a"]
}
]
(5).wj.css
.wj{
width: 400px;
margin: auto;
}
h1{
color: blue!important;
}
.timu{
list-style: none;
}
ul,li{
list-style: none;
}
.option{
color:var(--highlightColor);
display: flex;
}
.option div{
width: 50px;
height: 30px;
color: red;
}
三.数据表项目与入口分片
1.文件目录
2. 项目代码
(1).webpack.config.js
const HTMLwebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
lib: './src/sort.js',
index: './src/index.js',
},
output: {
clean: true,
filename: '[name].js'
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader',]
},
]
},
plugins: [
new HTMLwebpackPlugin({
scriptLoading: 'blocking'
})
]
}
(2).data.json
[
["序号", "学生姓名", "学号", "课程视频", "章节测验", "章节学习次数", "讨论", "作业", "考试", "综合成绩"],
["1", "谭丽君", "2020231101", "20.0", "0.0", "3.7", "0.0", "6.6", "0.0", "30.3"],
["2", "钱小龙", "2020231102", "15.83", "0.0", "1.53", "0.0", "4.8", "0.0", "22.16"],
["3", "李添", "2020231103", "17.5", "0.0", "2.8", "0.0", "6.6", "0.0", "26.9"],
["4", "夏伟昊", "2020231104", "0.83", "0.0", "0.2", "0.0", "1.8", "0.0", "2.83"],
]
(3).index.css
.dtb {
width: 1500px;
margin: auto;
}
.dl{
display: flex;
}
.dd{
width: 150px;
border: 1px solid #eee;
text-align: center;
}
.a{
background:url(./shang.png) no-repeat;
background-size: 15%;
background-position: 7px 0px;
}
.b{
background:url(./xia.png) no-repeat;
background-size: 15%;
background-position: 7px -8px;
}
(4).index.js
import data from './data.json';
import './index.css';
//import('./sort.js');
//表
let dtb = document.createElement('div');
dtb.className = 'dtb';
dtb.id = 'dtb';
let i = 0;//第几行
let id = 1;//第几列
window.arr=[];
window.num=0;
data.forEach(el => {
i++;
//行
let dl = document.createElement('div');
dl.className = 'dl';
el.forEach(ed =>{
//单元格
let dd = document.createElement('div');
dd.className = 'dd';
dd.innerText = ed;
//遍历第几行
if(i == 1){
dd.id = id;
dd.onclick=sort;
id++;
}
//给dl 添加一个子元素 dd
dl.appendChild(dd);
})
//给dtb 添加一个子元素 dl
dtb.appendChild(dl);
});
document.body.appendChild(dtb);
(5).sort.js
window.sort = function () {
if (this.id > 2) {
arr[num] = this.id;
if (arr.length > 1) {
if (arr[num - 1] != arr[num]) {
document.getElementById(arr[num - 1]).className = 'dd';
}
if (arr.length % 2 == 1) {
//2取得整个表数据
let dtb = document.getElementsByClassName('dl');
//3循环指定的列的所有行
for (let i = 1; i < dtb.length - 1; i++) {
for (let j = i + 1; j < dtb.length; j++) {
//比较指定列的行
//console.log(Number(dtb[i].children[this.id - 1].innerHTML))
//用冒泡排序
let a = Number(dtb[i].children[this.id - 1].innerHTML)
let b = Number(dtb[j].children[this.id - 1].innerHTML)
if (a > b) {
//交换两行的位置
let c = dtb[i].innerHTML;
dtb[i].innerHTML = dtb[j].innerHTML;
dtb[i].children[0].innerHTML = i;
dtb[j].innerHTML = c;
dtb[j].children[0].innerHTML = j;
}
}
} this.className = 'dd b';
} else if (arr.length % 2 == 0) {
let dtb = document.getElementsByClassName('dl');
for (let i = 1; i < dtb.length - 1; i++) {
for (let j = i + 1; j < dtb.length; j++) {
let a = Number(dtb[i].children[this.id - 1].innerHTML)
let b = Number(dtb[j].children[this.id - 1].innerHTML)
if (a < b) {
let c = dtb[i].innerHTML;
dtb[i].innerHTML = dtb[j].innerHTML;
dtb[i].children[0].innerHTML = i;
dtb[j].innerHTML = c;
dtb[j].children[0].innerHTML = j;
}
}
} this.className = 'dd a';
}
}
num += 1;
}
}
// window.sort = function () {
// arr[num]=this.id;
// //1按哪一列?
// let idd = document.getElementById(this.id).className;
// if (this.id > 2) {
// this.className += ' a';
// //2取得整个表数据
// let dtb = document.getElementsByClassName('dl');
// //3循环指定的列的所有行
// for (let i = 1; i < dtb.length - 1; i++) {
// for (let j = i + 1; j < dtb.length; j++) {
// //比较指定列的行
// //console.log(Number(dtb[i].children[this.id - 1].innerHTML))
// //用冒泡排序
// let a = Number(dtb[i].children[this.id - 1].innerHTML)
// let b = Number(dtb[j].children[this.id - 1].innerHTML)
// if (a > b) {
// //交换两行的位置
// let c = dtb[i].innerHTML;
// dtb[i].innerHTML = dtb[j].innerHTML;
// dtb[i].children[0].innerHTML = i;
// dtb[j].innerHTML = c;
// dtb[j].children[0].innerHTML = j;
// }
// }
// }
// this.className = 'dd b';
// if (idd == 'dd b') {
// let dtb = document.getElementsByClassName('dl');
// for (let i = 1; i < dtb.length - 1; i++) {
// for (let j = i + 1; j < dtb.length; j++) {
// let a = Number(dtb[i].children[this.id - 1].innerHTML)
// let b = Number(dtb[j].children[this.id - 1].innerHTML)
// if (a < b) {
// let c = dtb[i].innerHTML;
// dtb[i].innerHTML = dtb[j].innerHTML;
// dtb[i].children[0].innerHTML = i;
// dtb[j].innerHTML = c;
// dtb[j].children[0].innerHTML = j;
// }
// }
// }
// this.className = 'dd a';
// }
// }
// if (arr.length > 1) {
// if (arr[num - 1] != arr[num]) {
// document.getElementById(arr[num - 1]).className = 'dd';
// arr[0] = this.id;
// };
// }
// num += 1;
// }
//
// for(let id=3; id<=10; id++){
// document.getElementById(id).onclick = sort;
// }
四.异步加载(devserver)
需要安装webpack-dev-server
运行指令“npx webpack serve”
1.文件目录
2.配置文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
clean: true,
filename: 'bundle.js',
// chunKileName:'[name].js'
},
mode: 'development',
// mode: 'prodction',
devServer: {
static: {
publicPath: "/dist/",
directory: path.join(__dirname, 'dist'),
},
port: 3000
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
plugins: [
new HtmlWebpackPlugin()
]
};