前端路由&webpack基礎配置,原理

1. SPA

• 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 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

6. webpack打包原理

• 識別入口文件,分析代碼,獲取模塊依賴,而且將代碼轉換爲瀏覽器可識別的代碼
• 做用:
  • 能夠把多個js文件打包成一個文件,較少服務器壓力
  • 將擴展語言轉換爲普通js語言,讓瀏覽器順利運行
  • 能夠對代碼進行優化和性能的提高

7. webpack與gulp的區別

• webpack是文件打包工具,能夠把項目的各類js,css文件等打包合併成一個或者多個文件,主要用於模塊化方案,預編譯模塊的方案
  • 打包工具
  • 模塊識別
• gulp是構建工具,能夠配合各類插件作js壓縮,css壓縮,less編譯替代手工實現自動化工做
  • 構建工具
  • 自動化

8. webpack中 loader和plugin區別

• loader是文件資源加載器,可以加載資源文件,並對這些文件進行一些處理
  • 處理一個文件可使用loader,loader的執行順序是和自己的順序是相反的,即最後一個loader最早執行.第一個最後執行
  • 第一個執行的loader接受源文件內容做爲參數,其餘loader接受前一個執行loader的返回值做爲參數,最後執行loader會返回此模塊的js源碼
• plugin是一個擴展器,配置插件