【Webpack】简单上手使用

1. 初始化项目

npm init -y

执行命令初始化，生成文件 package.json，该文件的作用是记录文件夹的信息和包的作用等

2. webpack安装

npm i webpack webpack-cli -D

• webpack：webpack 的核心指令
• webpack-cli: 包含后续操作webpack的指令

我们可以发现，package.json文件中多了一个devDependencies的属性字段；项目目录下也多了一个文件夹node_modules，文件 npm_config.txt 和 package-lock.json

3. 创建入口文件

新建目录src，以及文件index.js

4. 打包命令（指定mode）

webpack ./src/index.js -o ./dist --mode=development

• ./src/index.js ：入口文件
• -o : 输出
• ./dist ：输出文件位置
• --mode=development：设置模式（development -> 开发模式）

观察后，我们可以看到根目录新增了一个“dist”文件夹。main.js就是我们打包后的文件

已知，webpack 默认识别 JS 和 JSON文件，接下来我们载创建一个JSON文件打包看看效果是怎样的：

• src下新增文件data.json

  {
      "name": "张三",
      "age": "24",
      "xingbie": "人"
  }
  

• index.js 文件中引入 data.js

  import data from "./data.json";
  

• 执行打包命令 npm run dev

  • 打包的文件体积变大了：

    

  • main.js 中有 index.js 和 main.js这两个文件的信息

    

报错异常

执行这个命令的时候可能会报如下错误：

解决方案:

• 在package.json文件中，scripts 新增字段命令："dev": "webpack ./src/index.js -o ./dist --mode=development"
• 执行命令: npm run dev

原因分析：局部安装的webpack并不会在系统环境变量里面注册，在控制台里打webpack自然会找不到命令；npm run dev 系统可以找到注册在系统中的npm, 自然可以运行，与全局安装webpack也有一定道理的