前端路由&webpack基础配置详解

时间:2020-05-17 Tx丶人气:0

1. SPA

SPA是单页面应用程序(single page application),通俗来讲就是在一个页面开发一个完整网站的功能

优点:

不需要跳转页面,局部更新页面内容
前端组件化

缺点:

首屏加载慢(第一次访问慢,按需加载)
开发复杂(所有的功能都在一个页面完成,可使用webpack模块化开发)
不利于SEO搜索引擎优化(使用服务端渲染)

2. 前端路由:

根据不用的URL标识符渲染不同的组件(不同的网页内容)
路由实现原理:
- hash哈希(锚点) 通过hashchange监听URL标识符改变,显示不同的内容

<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>
// 监听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

加载全部内容