webpack使用流程和配置

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

• 官网：https://webpack.docschina.org/

• 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 init -y

  • -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同时支持