前端路由&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 this关键字使用分析
Oct 21 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
js实现无限瀑布流实例方法
Sep 16 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设计模式 Delegation(委托模式)
2011/06/26 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python 同时运行多个程序的实例
2019/01/07 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
实习期自我鉴定
2013/10/11 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
合作经营协议书
2014/04/17 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
职业规划实施方案
2014/06/10 职场文书
安全责任书范文
2014/08/25 职场文书
2014年科协工作总结
2014/12/09 职场文书
创卫工作总结2015
2015/04/22 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL