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同时支持commonjs模块化