前端路由&webpack基础配置详解


Posted in Javascript onJune 10, 2019

1. SPA

SPA是单页面应用程序(single page application),通俗来讲就是在一个页面开发一个完整网站的功能

优点:

  • 不需要跳转页面,局部更新页面内容
  • 前端组件化

缺点:

  • 首屏加载慢(第一次访问慢,按需加载)
  • 开发复杂(所有的功能都在一个页面完成,可使用webpack模块化开发)
  • 不利于SEO搜索引擎优化(使用服务端渲染)

2. 前端路由:

  • 根据不用的URL标识符渲染不同的组件(不同的网页内容)
  • 路由实现原理:
    • hash哈希(锚点) 通过hashchange监听URL标识符改变,显示不同的内容
<ul>
  <li><a href="#login" rel="external nofollow" >鲁班</a></li>
  <li><a href="#home" rel="external nofollow" >提莫</a></li>
  <li><a href="#list" rel="external nofollow" >剑姬</a></li>
</ul>
<div id="app"></div>
<script>
// 监听hash值的不用,让页面显示不同的内容
window.onhashchange = function() {
  let app = document.getElementById('app');
  // 获取hash值
  let hash = location.hash.substr(1);
  // 根据标识展现不同的内容 局部更新
  switch(hash) {
    case 'login':
      app.innerHTML = '托马斯回旋...';  
      break;
    case 'home':
      app.innerHTML = '正在路上...';
      break;
    case 'list':
      app.innerHTML = '华尔兹...';
      break;
    }
  }
</script>

3. 前端模块化

  • CommonJS
    • 模块导出
      • module.exports
      • exports
    • 模块导入
      • require()
  • ES6 Module
    • 模块导出
      • export
    • 模块导入
      • import

4. webpack基础配置

初始化项目

npm init -y

安装依赖包

npm install webpack -D

npm install webpack-cli -D

通过webpack命令打包文件: 模块化转换,代码压缩合并

webpack.config.js

const path = require('path');
// 下包并导入插件 npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');
// npm i clean-webpack-plugin -D 清除目录中的内容
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
// 配置打包选项 development开发环境
mode: 'development', // production 生产环境
// 指定入口文件:要打包的文件
entry: './src/js/index.js',
// 指定输出文件:打包之后的文件
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'main.min.js'
},
// 配置资源的加载器 loader
module: {
  rules: [
  // 配置js的加载器(把ES6转化为ES3/5代码)
  {
    test: /\.jsx?$/,
    loader: 'babel-loader',
    //打包除这个文件之外的文件
    exclude: path.join(__dirname, './node_modules'),
    //打包包括的文件
    include: path.join(__dirname, './src')
  },
  // 配置css的加载器
  {
    // 匹配.css结尾的文件
    test: /\.css$/,
    // 配置css文件的加载器,处理顺序:从右向左
    use: ['style-loader', 'css-loader']
  },
  // 配置less的加载器
  {
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
  }
  ]
},
// 配置插件
plugins: [
  new CleanWebpackPlugin(),
  // 动态生成html
  new HtmlWebpackPlugin({
  title: '测试标题',
  template: 'index.html'
  })
],
// 配置实时预览环境 
devServer: {
  contentBase: path.join(__dirname, 'dist'),
  port: 5000
}
}

package.json文件配置

"scripts": {
  "dev": "npx webpack-dev-server --open"
}

5 .判断如何配置webpack

  • 指定源文件加入到构建流程中被webpack控制, 配置entry
  • 指定输出文件的位置和名称,配置output
  • 自定义解析和转换文件,配置module,通常是配置module.rules里的 Loader。(资源加载器)
  • 配置插件通过plugins进行配置
  • 寻找依赖模块时,配置resolve

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
利用vscode编写vue的简单配置详解
Jun 17 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 #Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 #Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 #Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 #Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 #jQuery
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 #Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
js中判断控件是否存在
2010/08/25 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
实习证明格式范文
2014/10/14 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL