前端路由&webpack基础配置详解
1.SPA
SPA是单页面应用程序(singlepageapplication),通俗来讲就是在一个页面开发一个完整网站的功能
优点:
- 不需要跳转页面,局部更新页面内容
- 前端组件化
缺点:
- 首屏加载慢(第一次访问慢,按需加载)
- 开发复杂(所有的功能都在一个页面完成,可使用webpack模块化开发)
- 不利于SEO搜索引擎优化(使用服务端渲染)
2.前端路由:
- 根据不用的URL标识符渲染不同的组件(不同的网页内容)
- 路由实现原理:
- hash哈希(锚点)通过hashchange监听URL标识符改变,显示不同的内容
3.前端模块化
- CommonJS
- 模块导出
- module.exports
- exports
- 模块导入
- require()
- 模块导出
- ES6Module
- 模块导出
- export
- 模块导入
- import
- 模块导出
4.webpack基础配置
初始化项目
npminit-y
安装依赖包
npminstallwebpack-D npminstallwebpack-cli-D
通过webpack命令打包文件:模块化转换,代码压缩合并
webpack.config.js
constpath=require('path');
//下包并导入插件npmihtml-webpack-plugin-D
constHtmlWebpackPlugin=require('html-webpack-plugin');
//npmiclean-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:[
newCleanWebpackPlugin(),
//动态生成html
newHtmlWebpackPlugin({
title:'测试标题',
template:'index.html'
})
],
//配置实时预览环境
devServer:{
contentBase:path.join(__dirname,'dist'),
port:5000
}
}
package.json文件配置
"scripts":{
"dev":"npxwebpack-dev-server--open"
}
5.判断如何配置webpack
- 指定源文件加入到构建流程中被webpack控制,配置entry
- 指定输出文件的位置和名称,配置output
- 自定义解析和转换文件,配置module,通常是配置module.rules里的Loader。(资源加载器)
- 配置插件通过plugins进行配置
- 寻找依赖模块时,配置resolve
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。