软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

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

这篇文章主要介绍了前端路由webpack基础配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1. SPA

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

优点:

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

缺点:

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

2. 前端路由:

根据不用的URL标识符渲染不同的组件(不同的网页内容) 路由实现原理: hash哈希(锚点) 通过hashchange监听URL标识符改变,显示不同的内容
ul  lia href="#login" rel="external nofollow" 鲁班/a/li  lia href="#home" rel="external nofollow" 提莫/a/li  lia href="#list" rel="external nofollow" 剑姬/a/li/uldiv id="app"/divscript// 监听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 -Dnpm install webpack-cli -D

通过webpack命令打包文件: 模块化转换,代码压缩合并

webpack.config.js

const path = require('path');// 下包并导入插件 npm i html-webpack-plugin -Dconst 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'},// 配置资源的加载器 loadermodule: {  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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。