关于Webpack的使用与介绍

最新推荐文章于 2023-08-22 14:01:04 发布

种一棵树吧

最新推荐文章于 2023-08-22 14:01:04 发布

阅读量350

点赞数

文章标签：前端 javascript webpack node.js

本文链接：https://blog.csdn.net/m0_68359121/article/details/125582124

版权

在实际开发中，项目上线：前端用webpack把我们项目代码进行打包，然后交给公司后台人员发布到服务器的过程

官网：webpack
1.什么是webpack
- webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具
  - 静态：项目中的静态资源如css、图片等文件
  - 模块: js文件（模块化开发中，一切js文件皆为模块）
  - 打包：主要帮你压缩代码，然后还会加密、混淆代码防止被人偷窥~
    - 打包还有一个意思：就是会把你项目中很多个文件压缩成一个文件
2.webpack作用
- 分析、压缩、打包代码
3.webpack好处
- 减少文件体积、减少文件数量
- 提高网页加载速度
Webpack基本使用流程
1.1-初始化npm : npm init -y
webpack是node环境中的一个工具类模块，它本身是基于nodejs的因此：要想使用webpack，前提是必须要安装node环境

1.2-使用node安装webpack

1.安装命令： npm i webpack webpack-cli -D
- -D含义：相当于 --save-d , 将webpack作为开发依赖。
  - 因为webpack只是一个代码压缩打包工具，只需要在开发阶段使用，而发布阶段用不上。因此一般放入开发依赖
- 本地包：不同的项目由于webpack版本不同，比如一些老版本项目可能用最新版的webpack无法打包。因此不建议将webpack作为全局包安装。
2.检测是否安装成功: npx webpack -v
- 这个命令其实就是检查你的node_module命令下面有没有webpack文件，有的话就读取这个文件里面的版本信息
- 1.3-在src文件夹中新建js文件(模块)
- webpack默认的打包文件入口目录是 ./src/index.js , 因此必须要有src这个目录，而且还要有index.js ，否则就会报错这个目录后期可以修改，但是我们需要先了解webapck默认是怎么操作的
- 1.4-在项目根目录下执行打包命令： npx webpack
- 1.webpack打包命名全称是: npx webpack js文件路径
  - 例如: npm webpack ./src/xxx.js
  - 如果没有写js文件路径,那么webpack就会自动打包项目根目录下的 ./src/index.js
- 2.当项目js代码发生变化时如何打包？
  - 重新执行打包命令即可
  - `webpack会把打包的js文件默认放入./dist/man.js` (1)为什么没有打包add.js 因为index.js文件中并没有去导入add.js （没有形成依赖关系） (2)如何才会打包add.js 在index.js中导入add.js即可 (3)使用commonJS规范导入模块,观察 ./dist/man.js 变化
  - webpack同时支持commonjs模块化规范与ES6模块化规范，所以使用ES6模块化也是可以识别的！
  - 03-Webpack配置文件
  - webpack配置文件作用：修改webpack默认的配置
    
    例如，webpack默认的配置如下
    
    打包命令： npx webpack
    
    入口文件: ./src/index.js
    
    出口文件: ./dist/main.js
    
    通过修改webpack配置文件，可以将上面的一些默认配置全部修改掉。
    
    如果把webpack比喻成一个人，那么配置文件就相当于人身上穿的衣服。不同的人穿衣搭配风格不同。（不同的项目webpack配置是不相同的）
    
    1.1-创建配置文件
    
    module.exports = {
    //自定义配置写在这里（对象键值对）
    
    }
  - 1.2-webpack常见配置作用
  - 1.mode : 打包模式
    - 默认值production : 生产模式（压缩，混淆，加密....... 不可读）
    - development :开发模式(代码不会压缩混淆)
  - 2.output: 出口文件(对象类型)
    - path : 设置出口文件夹（必须是绝对路径）
      - 默认值: ${__dirname}/dist
    - filename: 设置出口js文件名 (相对于path路径)
      - 默认值: main.js
  - 3.entry : 出口文件
    - 默认值(相当于项目根目录): ./src/index.js
- 1.3-webpack其他配置
  
  ==注意：这个配置是写在package.json文件中的script对象里面==
- "build" : "webpack"
  - 相当于是给你的当前项目新增了一个命令: npm run build
    - 这个命令等价于npx webpack, 只是额外新增了一个命令。原来的默认命令还是可以用
- "dev": "webpack --config webpack.dev.js"
  - 相当于给你的当前项目新增了一个命令： npm run dev
    - 这个命令将不再使用默认的配置文件webpack.config.js, 而是使用自定义配置文件 webpack.dev.js
- 注意点
  - 如果使用npm run build : 还是用默认配置文件来配置你的webpack
  - 如果使用npm run dev : 就会使用自定义配置文件来配置你的webpack
    - 这个命令相当于npx webpack --config webpack.dev.js
      - npx webpack --你的配置文件：用自定义配置文件打包webpack