3月31号~4月25号 webpack学习日记

一.样式分离

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()
    ]
};