前端路由&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 25 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
在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+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
js简单抽奖代码
2015/01/16 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
Python 实现随机数详解及实例代码
2017/04/15 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
24式加速你的Python(小结)
2019/06/13 Python
Python如何使用字符打印照片
2020/01/03 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
用Python实现职工信息管理系统
2020/12/30 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
UNIX特点都有哪些
2016/04/05 面试题
拖鞋店创业计划书
2014/01/15 职场文书
个人简历自我评价
2014/02/02 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
合作协议书范本
2014/04/17 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
学习经验交流会策划书
2015/11/02 职场文书
导游词之桂林
2019/08/20 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
Python实现视频自动打码的示例代码
2022/04/08 Python