前端路由&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');
          // 获取hashlet 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值