初识Webpack

Posted 2022-03-21 橘猫吃不胖～

初识Webpack

• 1 Webpack是什么
• 2 安装Webpack
• 3 项目实例

1 Webpack是什么

webpack是一个前端构建工具。

前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则足为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如，开发环境的代码，要通过混淆压缩后才能放在线上运行，这样代码体积更小，而且对代码执行也不会有任何影响。一般需要构建工具处理的几种情况：

• 代码压缩：将JS、CSS代码混淆压缩，让代码体积更小，加载更快
• 编译语法：编写CSS时使用Less、Sass，编写JS时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建T具编译，例如使用Babe1编译ES6语法。
• 处理模块化：CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、
  Rollup等处理JS模块化。

2 安装Webpack

第一步：安装Node.js
       下载地址：https://nodejs.org/zh-cn/download/

第二步：创建配置项，新建一个项目目录demo（目录名随便起），进入目录后，打开该目录下的cmd窗口



在弹出的cmd窗口中执行以下命令：

npm init

按照提示输入项目的名称、版本、描述、作者等信息，如果你不准备在npm中发布你的模块，一路回车默认就行

之后在该目录下会出现一个package.json文件，打开可以看到刚才输入的信息


第三步：安装Webpack

# 全局安装
npm install webpack -g
# 安装开发版
npm install webpack --save-dev

这时当前目录下的文件如下所示：

其中package.json文件夹也改变了：

  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \\"Error: no test specified\\" && exit 1"
  ,
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "webpack": "^5.70.0" // 版本号
  

npm安装注意两点：
（1）安装时如未指定版本号，则按最新的版本安装，这里webpack安装的是最新的5.70.0的版本
（2）npm install --save和npm install --save-dev的区别：
         --Save 会把依赖包名称添加到package.json文件dependencies键下
         --save-dev 则添加到package.json文件devDependencies键下
dependencies是发布后还依赖的，devDependencies是开发时的依赖。

第四步：安装webpack-cli

# 全局安装
npm install webpack-cli -g
# 安装到devDependencies
npm install webpack-cli --save-dev

package.json中增加了webpack-cli：

  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \\"Error: no test specified\\" && exit 1"
  ,
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2" // 新增
  

3 项目实例

1、创建相关文件
      在项目目录下创建src文件夹，在其中创建app.js文件作为入口文件（入口文件用来引入真正写页面的JS文件，CSS文件），再创建work.js文件作为真正写页面的文件，项目目录结构如下：

在work.js文件中写入一行代码，示例如下：

document.write("<h2>橘猫吃不胖</h2>");

在app.js文件中引入work.js文件，代码如下：

var dt = require("./work");

2、打包文件
      在cmd窗口输入以下命令，来打包文件：

webpack ./src/app.js

打包完成后，当前项目目录下自动生成了一个文件夹dist，文件夹中的main.js文件就是打包的文件，里面有很长的一串代码：

在demo项目下新建文件夹html，该文件可以专门放置html文件，在该文件夹下新建文件001.html，在该文件中引入刚刚生成的main.js文件

<script src="../dist/main.js"></script>

在浏览器中打开001.html文件，就可以看到效果：