前端路由&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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。