webpack4搭建详解——SME-Router

Posted 2022-08-26 勇敢*牛牛

webpack基础配置

注意新的webpack 5在2020年10月发布，但是企业应用比较少因此我们使用webpack4
打包，懒加载，服务代理

打包

将es6转化为es5,使用了babel插件，压缩合并，压缩
建立一个client项目：
初始化npm init -y

配置package.json

脚本执行命令行配置执行压缩使用webpack打包使用：
那么多文件的连锁引入就可以压缩为一个引入了。

"dev": "webpack",
"start": "webpack-dev-server"

开发依赖：
"devDependencies": 
        "webpack": "^4.46.0",/* 版本 */
        "webpack-cli": "^3.3.12",/* 版本启动命令  */
        "html-webpack-plugin": "^4.5.2",/* 注入插入插件 */
        "webpack-dev-server": "^3.11.3",/* 通过这个服务打开目标文件index.html */
        "clean-webpack-plugin": "^3.0.0",/* 用于清除因配置hash名而产生上次生成的同样文件 */
        "copy-webpack-plugin": "^6.4.1"/* webpage拷贝插件 */
		"style-loader": "^1.3.0",/* css载入js */
        "css-loader": "^5.0.2",/* css载入js */
        "sass-loader": "^7.2.0",/* 这三个是针对sass载入js */
	    "sass": "^1.22.10",
	    "node-sass": "^5.0.0",
	    "sme-router": "^0.12.8",/* 前端路由渲染 */
	    "art-template-loader": "^1.4.3",/*前端渲染模板，需要用到这两个*/
	    "art-template": "^4.13.2"
,

建立webpack.config.js

详解插件的使用以及注释

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin")/* 引入注入插件 */
var CleanWebpackPlugin = require("clean-webpack-plugin")/* 删除原来数据hash文件名的插件 */
var CopyWebpackPlugin = require("copy-webpack-plugin");/* 将项目需要的css等copy到打包文件夹下 */
module.exports = 
    mode:"development",/* 开发模式 */
    devtool: "source-map",/* 映射文件(可以找报错) */
    // entry:"./src/app.js",/* 入口 */
    entry:
        "js/app":"./src/app.js"/* 前(保存在什么路径下)<——后(源文件地址):src下面的app.js压缩后放在./distjs/[js/app]-[hash:6].js*/
    ,
    output:/* 输出 */
        path:path.join(path.resolve(),"./dist"),/* 自动生成打包后文件的目录下 */
        filename:"[name]-[hash:6].js"/*[根据原来的js名字换成最后生成的js名称][根据当前的毫秒数生成6位的字符串] 修改后改名 */
        // filename:"app-[hash:6].js"/*[根据当前的毫秒数生成6位的字符串] 修改后改名 */
    ,
    plugins: [
        new HtmlWebpackPlugin(/* 注入 */
            template:path.join(path.resolve(),"public/html/index.html"),/* 需要注入网页源目录 */
            app:"index.html",/* 目标文件名 并且放在了dist这个目录下*/
            inject:true,/* 表示注入  */
        ),
        new CopyWebpackPlugin(/* 项目使用的一些css样式等拷贝到这个项目下 */
            patterns:[
                /* 把这个路径下的css复制到打包的项目底下去 */
                 "from":path.join(path.resolve(),"./public/css"), "to": path.join(path.resolve(), "./dist/css/") ,
                /*  配置art-template-loader模块，用于加载所有.art的文件并且根据需求加载完成后解析 */
                "from":path.join(path.resolve(),"./public/html"), "to": path.join(path.resolve(), "./dist/html/") ,

            
            ]
        ),
        new CleanWebpackPlugin(),/* 删除因为hash产生的上次文件名 */
    ],
    module:/* 载入模块配置，在生成js的阶段就可以载入 */
        rules:[
            /* 在遇到什么什么时就可以载入，并且使用什么插件来解决 */
             /* 使用 */
            test:/\\.art$/i,use:loader:"art-template-loader",
            test:/\\.s[ca]ss$/i,use:["style-loader","css-loader",/* 在遇到后缀名为css或者sass的时候，使用这两个顺序的插件 */
                loader: "sass-loader",/* 针对sass的一些配置对象 */
                options: 
                    implementation: require("sass"),
                ,
            ]
        ]
    ,
    devServer:
        contentBase:path.join(path.resolve(),'./dist'),/* 环境基础，指的是这个文件下的执行这个index.html文件 */
        port:3500,/* 没写的话默认服务器端口 */
        proxy:/* 设置网路通信代理，自己设置跨域问题,首先访问自己的服务代理IP和端口号 */
            "/a":/* 请求的路径开始的第一位是/a，辨识代理路由 */
                target:"http://localhost:4005",/* 然后代理去访问真正目标的端口号 */
                pathRewrite:"^/a":""/* 覆盖这个字段 */
            
        
    

---

SME-Router

这是一款纯js轻量级前端路由
下载

npm i sme-router -S

基础

使用smeRouter必须依赖于webpack，先通过webpack配好整个结构再开始继续使用

• 跳转页面
• 历史记录

/router/index.js文件

import Router from "sme-router";
var app=new Router("app");//这个app就是div的id,渲染的就是指定的id的div盒子里的内容
app.route("/index/",function(req,res,next)
    res.render(“index”);
)
app.route("/a",function(req,res,next)
    res.render("a");
)
app.route("/b",function(req,res,next)
    res.render("b");
)
export default app;

app.js文件

import app  from "./router/index";
app.go("/b");
app.go("/"+txt+"/1?a=1&b=2",a:10,b:20);
++++++++++++++++++++++++++++
伪代码：
++++++++++++++++++++++++++++
import aTemplate from "../views/a.art";/*渲染模板*/
app.route("/index/:a",function(req,res,next)
    console.log(req.body);//go的第二个参数传出
    console.log(req.query);//地址中search部分
    console.log(req.params);//路由中/:a 这个位置值

    res.render(aTemplate(list:[1,2,3,4,5]));/*这里的aTemplate是一个函数，返回渲染好的模板*/
)