1. SPA

SPA是單頁面應(yīng)用程序(single page application),通俗來講就是在一個頁面開發(fā)一個完整網(wǎng)站的功能

優(yōu)點:

缺點:

2. 前端路由:

<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>// 監(jiān)聽hash值的不用,讓頁面顯示不同的內(nèi)容window.onhashchange = function() {  let app = document.getElementById('app');  // 獲取hash值  let hash = location.hash.substr(1);  // 根據(jù)標識展現(xiàn)不同的內(nèi)容 局部更新  switch(hash) {    case 'login':      app.innerHTML = '托馬斯回旋...';        break;    case 'home':      app.innerHTML = '正在路上...';      break;    case 'list':      app.innerHTML = '華爾茲...';      break;    }  }</script>

3. 前端模塊化

4. webpack基礎(chǔ)配置

初始化項目

npm init -y

安裝依賴包

npm install webpack -Dnpm install webpack-cli -D

通過webpack命令打包文件: 模塊化轉(zhuǎn)換,代碼壓縮合并

webpack.config.js

const path = require('path');// 下包并導(dǎo)入插件 npm i html-webpack-plugin -Dconst HtmlWebpackPlugin = require('html-webpack-plugin');// npm i clean-webpack-plugin -D 清除目錄中的內(nèi)容const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {// 配置打包選項 development開發(fā)環(huán)境mode: 'development', // production 生產(chǎn)環(huán)境// 指定入口文件：要打包的文件entry: './src/js/index.js',// 指定輸出文件：打包之后的文件output: {  path: path.resolve(__dirname, 'dist'),  filename: 'main.min.js'},// 配置資源的加載器 loadermodule: {  rules: [  // 配置js的加載器（把ES6轉(zhuǎn)化為ES3/5代碼）  {    test: //.jsx?$/,    loader: 'babel-loader',    //打包除這個文件之外的文件    exclude: path.join(__dirname, './node_modules'),    //打包包括的文件    include: path.join(__dirname, './src')  },  // 配置css的加載器  {    // 匹配.css結(jié)尾的文件    test: //.css$/,    // 配置css文件的加載器,處理順序：從右向左    use: ['style-loader', 'css-loader']  },  // 配置less的加載器  {    test: //.less$/,    use: ['style-loader', 'css-loader', 'less-loader']  }  ]},// 配置插件plugins: [  new CleanWebpackPlugin(),  // 動態(tài)生成html  new HtmlWebpackPlugin({  title: '測試標題',  template: 'index.html'  })],// 配置實時預(yù)覽環(huán)境 devServer: {  contentBase: path.join(__dirname, 'dist'),  port: 5000}}