小试webpack | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

上次介绍到在简单项目开发中webpack打包工具的需求，接下来做一个简单的webpack小例子，进一步了解webpack在项目中的操作使用。

1. 案例测试 

正常同步的 JavaScript 代码是按照在页面上加载的顺序执行的，上面html文件先引用 inex.js （调用函数）文件，后引用 hello-world.js（定义函数）文件，由于两个文件的代码存在先定义后才能调用的顺序关系，所以浏览器运行后会报以下错误：

解决：调整 JS 文件的引用顺序=>正常输出=>若是文件多，工作量大=>webpack 安装webpack 

前提：已安装node.js； 需要安装webpack主包+webpack-CLI 

2. webpack安装

1. 一般都是本地安装 

npm install --save-dev webpack

或指定版本：

npm install --save-dev webpack@xxx

2. 全局安装

npm install --global webpack 

3. 卸载全局安装的webpack 

npm uninstall webpack webpack-cli --global 

• 是否使用 --save-dev 取决于你的应用场景。假设你仅使用 webpack 进行构建操作，那么建议你在安装时使用 - 

  注意：

  1. 项目本地安装webpack：

  npm init -y : 会生成一个package.json文件，配置

  npm install webpack --save-dev 

  npm install webpack-cli --save-dev :会导入node-modules包和package-lock.json文件

3. 对项目进行打包

1. 控制台执行：

   webpack npx webpack ：运行本地指令：会去观察本地文件夹内是否有这个要使用的命令，然后去执行

• 进行打包操作。会生成dist文件夹【以src/index.js为默认打包入口文件来生成dist/main.js】

2. 控制台执行：

   webpack --stats detailed ：查看详细操作

4. 自定义webpack配置

1. 控制台执行：

   npx webpack --help ：查看webpack-cli 提供的丰富的终端命令行指令 

   运行图如下：

2. 可是命令行不方便也不直观，而且还不利于保存配置的内容。因此，webpack 还给我们提供了通过配置文件，来自定义配置参数的能力。 

• 添加文件：webpack.config.js【文件名固定，webpack会自动读取】 
  • 文件会按照node.js的commonJS模块来读取所以用module.exports来定义 

在浏览器访问index.html【指定bundle文件的问题后续解决】，控制台成功输出