安装流程
- npm init -y，自动建立package.json
- npm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D
- npm install babel-loader @babel/core @babel/preset-env -D
- 新建app.js和webpack.config.js
- 运行npx webpack serve
- 基本环境已搭建
提高开发效率与完善团队开发规范
devtool属性
- 内置属性，一般只要安装webpack-dev-server这个就行
- 代码行数的锁定，第三个属性不能锁定
- 开发环境下，推荐使用最后一个
- 生产环境下，一般不配置
devServer属性下
compress属性
- 设置是不是在服务端进行代码压缩，使传输过程中减少传输大小
port属性
- 配置端口号 port: 9000
headers请求头
- 配置请求头效果图
headers: {
'X-Access-Token': 'huasheng',
},
proxy开启代理
- 当你含有对一些特定接口的网络请求，比如客户端地址是在http：//localhost：9000/下
- 接口来自http：//localhost：3000/
- 控制台报错跨域
- 使用devServer的proxy功能
- 当页面中使用"/api/getname"获取接口内容时候，会将/api替换成后面来请求
proxy: {
'/api': 'http://localhost:3000',
},
https配置
- 如何在本地将http服务变为https服务
- 此时本地将不能使用http访问，https才行
http2配置
- http2默认自带https自签名证书
historyApiFallback配置
-
不配置，访问会报404
-
配置了以后：当访问的是404响应的时候，响应会被替代为index.html
-
如果还报404，可能是资源是相当路径，采取下面方法变绝对路径
output: {
publicPath: '/',
},
开发服务器主机 host
- 当你在开发环境中起了devserve服务，并期望同事访问，只需要配置
host: '0.0.0.0', //目的让同事也能访问你的页面
- 这样同事就能通过这个访问了
模块热替换与热加载
- 模块热加载
- 启用webpack 的热模块特性，需要配置devServe.hot参数
devServer: {
hot: true, //热替换
}
devServer: {
liveReload: true, //热加载，默认开启
}
eslint代码规范
- 用来扫描我们所写的代码是否符合规范，用于多人协作开发
- npm i eslint -D
- npx eslint --init，创建文件
- 这样，就会生成一个.eslintrc.json配置文件
- 新建文件，写入代码，运行检查
- npx eslint ./src，发现有错
- 第一条，希望我们不要使用console
- 解决
- 如果想要具体看到哪行出现问题，安装插件
- 如果不想使用插件还想实时报错
取消黑色背景弹窗提示
文章来源：https://www.toymoban.com/news/detail-766147.html
git-hooks与husky
- 开发者一般不想边写边校验，想在上传代码时进行校验
- 采取husky来协助进行代码eslint检验
模块和依赖
文章来源地址https://www.toymoban.com/news/detail-766147.html
模块解析（resolve）下alias和extensions
- webpack通过resolve实现了模块之间的依赖和引用
resolve: {
//配置解析,为防止写过多的../../
alias: {
// '@': path.resolve(__dirname, './src'),
'@': path.join(__dirname, './src'),
'@assets': path.join(__dirname, './src/assets'),
},
extensions: ['.js', '.json', '.css', '.vue'],
//模块别名定义，方便后续直接引用别名，当同时出现文件名相同，扩展名不同的时候，优先请求的文件顺序
},
第三方包起别名externals
- 类似
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
//为引用包起别名
externals: {
// 全局变量
jquery: 'jQuery',//它本身还有个$别名
vue: 'Vue',
'vue-router': 'VueRouter',
},
- externalsType用于指定externals的类型
依赖图(dependdency graph)
- 如何查看项目的依赖关系
- npm i webpack-bundle-analyzer
- npm webpack serve
扩展功能
PostCSS和CSS模块
Postcss模块
- Postcss模块是一个用JavaScript工具和插件转换css的工具，将最新的css语法转换成大多数游览器能够理解的语法
- 安装相关插件：npm i autoprefixer -D
- 新建postcss.config，用来专门配置css的插件
- 还得在这里指定一下游览器的版本
Css模块
- Css模块能让你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行
- 目的，就是当引用的css名相同的时候，他们不会冲突，原因是css名在渲染的时候编译为一串字符，
- npm i postcss-nested -D
web Works
- 当我们想在客户端进行大量的运算的时候，又不想阻塞js主线程的运算怎么办？
- 方法一：异步，但运算量过大还是会造成假死状态
- 方法二：web Works,html5的新特性，允许我们将复杂的运算放在后台，不会影响js的主线程
- 如何定义works？
到了这里，关于【webpack】高级篇的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
