SPA是单页面应用程序(single page application),通俗来讲就是在一个页面开发一个完整网站的功能
优点:
不需要跳转页面,局部更新页面内容
前端组件化
缺点:
首屏加载慢(第一次访问慢,按需加载)
开发复杂(所有的功能都在一个页面完成,可使用webpack模块化开发)
不利于SEO搜索引擎优化(使用服务端渲染)
2. 前端路由:
根据不用的URL标识符渲染不同的组件(不同的网页内容)
路由实现原理:
hash哈希(锚点) 通过hashchange监听URL标识符改变,显示不同的内容
<ul> <li><a href="#login" >鲁班</a></li> <li><a href="#home" >提莫</a></li> <li><a href="#list" >剑姬</a></li> </ul> <div></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