前端路由&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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
在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
php a simple smtp class
2007/11/26 PHP
ajax php 实现写入数据库
2009/09/02 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
扩展String功能方法
2006/09/22 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
Json解析的方法小结
2016/06/22 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python中异常重试的解决方案详解
2017/05/05 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python用input输入列表的实例代码
2020/02/07 Python
车间班长岗位职责
2013/11/30 职场文书
商场消防管理制度
2014/01/12 职场文书
关于环保的宣传稿
2015/07/23 职场文书
任命书格式范文
2015/09/22 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书