前端路由&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