这一章节的代码位于 01_init_version

webpack安装

  • yarn init -y 或者 npm init 初始化项目
  • 安装本地webpack: yarn add webpack webpack-cli -D

直接使用webpack

  • 新建src文件夹, 创建一个js文件并随便写点代码
  • 运行: npx webpack (npx的作用是可以直接运行webpack, 不用全局安装)
  • webpack将自动生成一个打包压缩过的代码, 位于dist文件夹, main.js 文件
  • image.png

手动配置webpack

  • 在工程目录下创建名为webpack.config.js 的文件, 这是webpack默认的配置文件
  • webpack会从node_modules下找到webpack-cli中的config-yargs.js中获取默认配置文件名
  • image.png
  • 运行时, 可以通过命令行传入不同参数改变配置文件
  1. webpack --config webpack.config.js
  • 将命令写入 package.json 文件中作为脚本, 方便以后运行

image.png

  • 对配置文件进行书写

  • image.png

  • 之后再运行npx webpack即可在dist文件夹下看到一个打包但未压缩过js文件 bundle.js