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

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

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

(0)

相关推荐

  • es6+angular1.X+webpack 实现按路由功能打包项目的示例

    需求来源 之前使用jspm来打包项目 但是有个最大的缺点,就是只能把项目打包成一个大的js,当项目开发到后期会很大,网上找了很久也没找到合理的jspm打包方式. 所以开始调研可以打包angular项目成多个文件的工具. 调研过程 过程中看了些 vue,react配合webpack按路由功能打包的demo,感觉webpack对于打包成多个文件比较擅长. 结果 第一步 核心模块依赖加载 #core.module.js //核心模块 import 'angular-route'; //官方路由依赖 i

  • 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

    windows下vue-cli及webpack 构建网站(一)环境安装 windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件 1.本篇文章是建立在以上三篇文章的基础上的. 2.安装 vue-router 插件,运行cmd进入到项目目录下面,运行以下命令: cnpm install vue-router --save-dev 3.在src文件夹下面新建一个文件夹page用于存放模板文件,然后

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

    1. SPA SPA是单页面应用程序(single page application),通俗来讲就是在一个页面开发一个完整网站的功能 优点: 不需要跳转页面,局部更新页面内容 前端组件化 缺点: 首屏加载慢(第一次访问慢,按需加载) 开发复杂(所有的功能都在一个页面完成,可使用webpack模块化开发) 不利于SEO搜索引擎优化(使用服务端渲染) 2. 前端路由: 根据不用的URL标识符渲染不同的组件(不同的网页内容) 路由实现原理: hash哈希(锚点) 通过hashchange监听URL标识

  • Cisco路由技术基础知识详解之一

    Cisco路由技术基础知识详解 路由器 <一> 最简单的网络可以想象成单线的总线,各个计算机可以通过向总线发送分组以互相通信.但随着网络中的计算机数目增长,这就很不可行了,会产 生许多问题: 1.带宽资源耗尽.     2.每台计算机都浪费许多时间处理无关的广播数据.     3.网络变得无法管理,任何错误都可能导致整个网络瘫痪.     4.每台计算机都可以监听到其他计算机的通信. 把网络分段可以解决这些问题,但同时你必须提供一种机制使不同网段的计算机可以互相通信,这通常涉及到在一些ISO网

  • Cisco路由技术基础知识详解

    Cisco路由技术基础知识详解 路由器 <一> 最简单的网络可以想象成单线的总线,各个计算机可以通过向总线发送分组以互相通信.但随着网络中的计算机数目增长,这就很不可行了,会产 生许多问题: 1.带宽资源耗尽.     2.每台计算机都浪费许多时间处理无关的广播数据.     3.网络变得无法管理,任何错误都可能导致整个网络瘫痪.     4.每台计算机都可以监听到其他计算机的通信. 把网络分段可以解决这些问题,但同时你必须提供一种机制使不同网段的计算机可以互相通信,这通常涉及到在一些ISO网

  • Vue-Jest 自动化测试基础配置详解

    目录 安装 配置 常见错误 测试前的工作 处理依赖 生成实例和 DOM 总结 引用 目前开发大型应用,测试是一个非常重要的环节,而在 Vue 项目中做单元测试可以用 Jest,Jest 是 facebook 推出的一款测试框架,集成了 Mocha, chai, jsdom, sinon 等功能,而且在 Vue 的脚手架中已经集成了 Jest,所以在 Vue 项目中使用 Jest 做单元测试是不二的选择,从提供的例子上看都很简单地配置并测试成功,然而在实际项目中有很多差异,我在测试自己的某个业务组

  • WebPack基础知识详解

    1.什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用. 2.为什要使用WebPack 今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 a:模块化,让我们可以把复杂的程序细化为小的文件; b:类似于TypeSc

  • Cisco路由技术基础知识详解之三

    路由器 <四> 四.路由 1.路由表 如果一个主机有多个网络接口,当向一个特定的IP地址发送分组时,它怎样决定使用哪个接口呢?答案就在路由表中.来看下面的例子: 目的 子网掩码 网关 标志 接口 201.66.37.0 255.255.255.0 201.66.37.74 U eth0 201.66.39.0 255.255.255.0 201.66.39.21 U eth1 主机将所有目的地为网络201.66.37.0内主机(201.66.37.1-201.66.37.254)的数据通过接口

  • Cisco路由技术基础知识详解之二

    路由器 <三> 三.IP地址 在可路由的网络层协议中,协议地址必须含有两部分信息:网络地址和主机地址.存贮这种信息最明显的方法是用两个分离的域,这样我们必须考虑到两个域的最大长度,有些协议(如IPX)就是这样的,它在小型和中型的网络里可以工作的很好. 另一种方案是减少主机地址域的长度,如24位网络地址.8位主机地址,这样就有了较多的网段,但每个网段内的主机数目很少.这样一来,对于多于256个主机的网络,就必须分配多个网段,其问题是很多的网络给路由器造成了难以忍受的负担. IP把网络地址和主机地

  • vue-router 路由基础的详解

    vue-router 路由基础的详解 今天我总结了一下vue-route基础,vue官方推荐的路由. 一.起步 HTML <div id="myDiv"> <h1>简单路由</h1> <router-link to="/foo">Go to foo</router-link> <router-link to="/bar">Go to bar</router-link&g

  • webpack中的代理配置详解

    目录 作用: 使用场景一: 使用场景二 使用场景三 使用场景四: 使用场景五: 解决跨域原理 vue-cli中proxyTable配置接口地址代理示例 更多参数 作用: 1.解决开发环境跨域问题(不用再去配置nginx和host) 2.如果你有单独的后端开发服务器API,并希望在同域名下发送API请求,那么代理某些URL会很有用 下面介绍一下五种经常使用的场景 使用场景一: 请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api

  • vue-router 前端路由之路由传值的方式详解

    路由传值 在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面与页面之前有时候需要做到传值 ,这个时候就需要进行路由传值,在VueRouter里面,两个路由之间做跳转的时候,如何进行传值呢? 普通跨页面传值: 1.通过localStorage setItem() getItem() 2.通过search(地址栏 ? 后面的参数) VueRouter的路由传值 VueRouter的路由传值有两种方式 jquery传值. 类似get传值 传值的路由 this.$router.push({

随机推荐