前端路由&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 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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
php中计算时间差的几种方法
2009/12/31 PHP
php修改时间格式的代码
2011/05/29 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
js数组去重的方法总结
2019/01/18 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
为什么python比较流行
2020/06/19 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
weblogic面试题
2016/03/07 面试题
银行催款通知书
2015/04/17 职场文书
庆七一主持词
2015/06/29 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技