Library的打包//库文件夹
第一步初始化
npm init -y
创建一个package.json文件
创建一个文件夹 src 在src文件夹下创建。
创建一个文件math.js //写入函数加减成除
创建一个文件string.js //写入关于字符串的处理函数
创建一个index.js文件 //引入上边的两个文件,并导出,这就是一个库
webpack对于刚才的库打包
需要配置:webpack.config.js
output:{
//添加三个配置
filename:'library.js',
library:'library',//自己定义的变量名
libraryTarget:'umd'//node下可以改为global,一般为umd
}
如果项目中重复引入使用lodash
module.export={
//添加一个配置,意思是遇到lodash不对它进行打包。忽略这个库
externals:["lodash"]
}
module.export={
//另一种配置
externals:{
root:"_",//引入使用script标签
//文件名必须是lodash
lodash:{
commonjs:'lodash'
}
}
}
progressive Web Application
PWA //比较新的前端技术
webpack配置保留最常用的配置。
传统方式
//安装http-server是为了让打包好的项目在服务器上运行
安装 npm i http-server --save-dev
在package.json中配置
“scripts”:{
//添加配置,让dist目录运行http-server的命令
“start”:"http-server dist"
}
PWA方式
//安装插件
npm i workbox-webpack-plugin --save-dev
//只有要上线的代码才需要PWA,所以只需要改webpack.prod.js文件就好
//引入插件,服务器关了也有之前缓存的数据
const WorkboxPlugin = require("wrokbox-webpack-plugin")
plugins:[
//添加
new WorkboxPlugin.GenerateSW({
clientsClaim:true,
skipWaiting:true
})
]
在
if('serviceWorker' in navgator){
window.addEventListener('load',()=>{
navigator.serviseWorker.register('/servise-worker.js').then((registration)=>{console.log('servise-workwe registed'}).catch((error)=>{console.log('servise-worker register error')})
})
}
重新打包,然后npm run start,让服务器运行起来。这样就缓存起来了,当服务器挂掉的时候,我们依然有之前的数据。
TypeScript的打包配置,提升后期维护能力,代码约束规范。
//配置支持TypeScript语法
//初始化一个package.json文件//npm init -y
//新建一个webpack.config.js文件
//安装 npm i webpack webpack-cli --save-dev
//创建一个文件 index.tsx TypeScript文件
//进入官网:https://www.typeScriptlang.org
//进入Playground,基本的TypeScript语法
//打包编译配置
module.export={
entry:'./src/index.tsx',
output:{
filename:'bundle.js',
path:path.resolve(__diranme,'dist')
},
module:{
rules:[{
test:/\.tsx?$/,
use:'ts-loader',//官方提供的loader
exclude:/node_modules/ //如果是node_modules里的tsx文件就不进行打包,
}]
}
}
//安装 npm i ts-loader typescript --save-dev
//在根目录下创建一个 tsconfig.json文件
//在里边添加配置
{
"compileOptions":{
"output":'./dist',
"module":'es6',//使用es6模块引入方式
"target":"es5",//打包成es5格式
"allowJs":true,//允许引入js文件
}
}
//运行打包命令 npm run build
//打包完成
总结:TypeScript好处,代码更严谨,每个声明出的变量更具体,比如String,Number……,代码更好维护。
//需要一些报错信息需要按装
npm i @type/lodash --save-dev
//引入格式
import *as _ from 'lodash';
//使用某种文件都需要安装
https://github.com
//可以搜索 types 可以安装 @types/node。
//搜索相应的类型,找到可以安装的相对应的文件。
//如果前边有 DEPRECATED 说明即将要废弃了。
使用WebpackDevServer 实现请求转发。
//npm run start 启动的是 webpack-dev-server
//需要ajax请求的话需要按装 npm i axios --save-dev
//在react中可以在生命周期函数 componentDidMount(){}中进行数据请求
//如果有跨域,在webapck.config.js文件中进行配置
//只有在开发环境下有用
devServer:{
proxy:{ //进行判断某个接口之后转发请求
'/react/api ':{
target:'http://www.dell-lee.com'//跨域地址当我们改了配置要重启服
//如果对于https进行转发需要配置
secure:false,
pathRewrite:{
'header.json':'demo.json'
},
changeOrigin:true,//有些网站防止外部爬虫爬取内容就阻止我们访问,配置这个配置项就是突破限制 , 平时带着就行
}
}
}
WebpackDevServer 单页面路由的问题
npm i react-router-dom --save
//安装后引入
import {BrowserRouter , Route } from "react-router-dom";
组件中返回路由
render(){
return(
//使用路由根标签
//路由配置,点击进入对应的详情页
)
}
//webpack.config.js中配置
devServer:{
//添加配置项,加载的都是首页内容,只要没有匹配的路由的时候
historyApiFallback:true,//也可以改成{[中间是正则]}
}
//官网地址 https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback
//路由可以正常使用了
EsLine 在webpack中的配置
//EsLine和webpack其实关系不大
//代码是否规范,引入规范,EsLint代码规范,可以自定义。
npm i eslint --save-dev
npx eslint --init //快捷生成eslint规范 选择第一项 之后选择 第一项 之后选择是否使用react 一路y 回车 就初始化好了
新建一个.eslint.js文件,然后在里边配置规范
module.exports={
"extends":"airbnb",//使用规范
//使用前按装 npm i babel-eslint --save
"parser":"babel-eslint",
}
//安装好之后怎么使用
如果想对src文件夹下判断是否符合规范
命令 npx eslint src //然后返回结果
//如果想要方便的解决问题,可以使用Vscode编辑器安装Eslint插件。
//参考官网地址: https://webpack.js.org/loader/eslint-loader/