当前位置: 首页 > news >正文

webpack(二)webpack介绍与基础配置

什么是webpack

webpack最初的目标是实现前端项目模块化,旨在更高效的管理和维护项目中的每一个资源。
可以看做是模块打包机,分析你的项目结构,找到javascript模块以及其它一些浏览器不能直接运行的拓展语言(Scss、TypeScript等),并将其打包为合适的格式以供浏览器使用。

可以做什么

  • 代码转化:es6转为es5,scss、less转为css
  • 文件优化:压缩代码体积
  • 代码分割:路由懒加载
  • 模块合并
  • 自动刷新:热更新
  • 代码校验
  • 自动发布

2.基础配置文件

  • 入口文件
    默认是src/index.js,如果我们想要修改入口文件,可以在打包时使用命名npx webpack --entry ./src/main.js来进行打包
  • 出口文件
    默认是项目下的dist目录,如果想要修改npx webpack --output-path ./build

可以使用webpack配置文件进行配置(入口文件可以采用相对路径,出口文件只能采用绝对路径

// webpack.config.js 
const path = require('path')module.exports = {entry: './src/index.js',output: {filename: "build.js",// path: './dist'  //The provided value "./dist" is not an absolute path! 必须是绝对路径path: path.resolve(__dirname, 'dist') //path.resolve(__dirname)__dirname, 在所有情况下,该变量都表示当前运行的js文件所在的目录,它是一个绝对路径,在此路径下新建一个dist目录,存放打包文件}
}
  • 指定webpack配置文件
// package.json
"build":"webpack --config test.webpack.json"
http://www.lryc.cn/news/149055.html

相关文章:

  • RabbitMQ | 在ubuntu中使用apt-get安装高版本RabbitMQ
  • springboot集成es 插入和查询的简单使用
  • liunx下ubuntu基础知识学习记录
  • 基于Googlenet深度学习网络的螺丝瑕疵检测matlab仿真
  • keepalived + lvs (DR)
  • 微服务框架 go-zero 快速实战
  • mysql基础面经之三:事务
  • JavaScript基本数组操作
  • C#---第21: partial修饰类的特性及应用
  • SQL 语句继续学习之记录三
  • Nexus仓库介绍以及maven deploy配置
  • A Survey on Knowledge-Enhanced Pre-trained Language Models
  • SQL求解用户连续登录天数
  • 掌握逻辑漏洞复现技术,保护您的数字环境
  • windows系统服务器在不解锁屏幕不输入密码的前提下,电脑通电开机启动程序。
  • spring cloud seata集成
  • HTTP 常⻅的状态码有哪些,以及适⽤场景
  • 后端给前端传参数忽略空属性
  • SPSS教程:如何绘制带误差的折线图
  • 积分商城小程序如何精细化运营
  • 企业网络日志管理:EventLog Analyzer的卓越之处
  • Python算法——滑动窗口问题
  • 使用 MATLAB 和 Simulink 对雷达系统进行建模和仿真
  • Linux 中的 sysctl 命令及示例
  • Mybatis批量更新数据及其优化
  • 包含文心一言在内的首批国产大模型 全面开放
  • Linux运维工程师面试题集锦
  • 深度学习——感受野以及与图像修复的问题
  • 微服务容错 Resilience4j 接口服务-容错原理
  • OceanBase 4.x改装:另一种全链路追踪的尝试