【webpack】高级篇

博主花神2023-12-26 13:47

webpack高级应用

安装流程

  • 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请求头
  • 配置请求头效果图
typescript 复制代码 
headers: {
      'X-Access-Token': 'huasheng',
    },
proxy开启代理
  • 当你含有对一些特定接口的网络请求，比如客户端地址是在http：//localhost：9000/下
  • 接口来自http：//localhost：3000/
  • 控制台报错跨域
  • 使用devServer的proxy功能
  • 当页面中使用"/api/getname"获取接口内容时候，会将/api替换成后面来请求
typescript 复制代码 
 proxy: {
      '/api': 'http://localhost:3000',
    },
https配置
  • 如何在本地将http服务变为https服务
  • 此时本地将不能使用http访问，https才行

http2配置
  • http2默认自带https自签名证书
historyApiFallback配置

  • 不配置，访问会报404

  • 配置了以后：当访问的是404响应的时候，响应会被替代为index.html

  • 如果还报404，可能是资源是相当路径，采取下面方法变绝对路径

typescript 复制代码 
 output: {
    publicPath: '/',
  },
开发服务器主机 host
  • 当你在开发环境中起了devserve服务，并期望同事访问，只需要配置
typescript 复制代码 
  host: '0.0.0.0', //目的让同事也能访问你的页面
  • 这样同事就能通过这个访问了
模块热替换与热加载
  • 模块热加载
  • 启用webpack 的热模块特性，需要配置devServe.hot参数
typescript 复制代码 
 devServer: {
    hot: true, //热替换
}
typescript 复制代码 
 devServer: {
    liveReload: true, //热加载，默认开启
}

eslint代码规范

  • 用来扫描我们所写的代码是否符合规范，用于多人协作开发
  • npm i eslint -D
  • npx eslint --init，创建文件








  • 这样，就会生成一个.eslintrc.json配置文件
  • 新建文件，写入代码，运行检查
  • npx eslint ./src，发现有错
  • 第一条，希望我们不要使用console
  • 解决
  • 如果想要具体看到哪行出现问题，安装插件
  • 如果不想使用插件还想实时报错
取消黑色背景弹窗提示


git-hooks与husky

  • 开发者一般不想边写边校验，想在上传代码时进行校验
  • 采取husky来协助进行代码eslint检验

模块和依赖


模块解析（resolve）下alias和extensions
  • webpack通过resolve实现了模块之间的依赖和引用
typescript 复制代码 
    resolve: {
      //配置解析,为防止写过多的../../
      alias: {
        // '@': path.resolve(__dirname, './src'),
        '@': path.join(__dirname, './src'),
        '@assets': path.join(__dirname, './src/assets'),
      },
      extensions: ['.js', '.json', '.css', '.vue'],
      //模块别名定义，方便后续直接引用别名，当同时出现文件名相同，扩展名不同的时候，优先请求的文件顺序
    },
第三方包起别名externals

  • 类似