前端路由&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是一个扩展器,配置插件