webpack-001 介绍和安装

最新推荐文章于 2024-09-13 22:18:54 发布

虬川候

最新推荐文章于 2024-09-13 22:18:54 发布

阅读量81

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_39383675/article/details/117287394

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了Webpack的作用，包括压缩和优化资源、浏览器兼容性处理，以及将SASS/Less等扩展语言编译。讲解了其工作原理和基本概念，如树结构、模块、Chunk和Bundle，并指导了安装、版本查看和打包模式切换的方法。

摘要由CSDN通过智能技术生成

Webpack作用

压缩css js html,去除注释,兼容浏览器,把sass less能可扩展语言编译到浏览器识别

官网 webpack.js.org

中文文档 webpack.docschina.org

原理和概念

树结构: 在一个入口文件中引入所有资源,形成所有依赖关系树状图

模块: 各种文件, css js html 图片 less sass …

Chunk: 打包过程中被操作的模块文件叫做chunk,例如异步加载一个模块就是一个chunk

Bundle: 打包好的文件,最终文件可以和chunk长的一模一样,但是大部分情况下他是多个chunkd的集合

webpack安装

Npm init –y
Npm install webpack –D
Npm install webpack-cli –D

-D 表示安装在当前目录开发的依赖

查看安装版本

webpack -v

如果报错的话

就利用package.json运行命令

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpackv": "webpack -v",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0"
  }
}

webpackv 查看版本
dev 开发模式打包
build 生产模式打包