Webpack静态模块打包工具(介绍及简单打包)

拼搏现实的明天。 2022-12-28 07:21 267阅读 0赞

> webpack中文文档：[https://www.webpackjs.com/][https_www.webpackjs.com]

# 1.概念 #

从本质上讲，webpack是一个现代的Javascript应用的静态打包工具，我们从两点来解释：模块和打包。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70][]

### 前端模块化： ###

开发时使用模块化开发（ 前端模块化方案：AMD、CMD、CommonJS、ES6）打包以后的代码是没有模块化代码的。比如开发时使用CommonJS开发，打包以后是没有CommonJS代码的。

在ES6之前，我们要想进行模块化开发，就必须要借助其他的工具完成，并且在通过模块化开发完成项目后，还需要处理模块之间的各种依赖，并将其打包。而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是js文件，我们的CSS、图片、JSON文件等等在webpack中都可以被当作模块来使用。

### 打包： ###

理解了webpack可以帮助我们进行模块化，并且处理了模块之间复杂的关系后，打包就很好理解了。就是将webpack中的各种资源进行打包合并成一个或多个包。并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转换成css、ES6转换成ES5、Typescript转换成js等。

# 和grunt/gulp对比 #

###     grunt/gulp的核心是Task ###

我们可以配置一系列的task，并定义task要处理的事务（如ES6、ts转化，压缩图片，scss转css），之后让grunt/gulp 来以此执行这些task，而让整个流程自动化。所以grunt/gulp也被称为前端自动化任务管理工具。

###     grunt/gulp和webpack的不同点 ###

grunt/gulp 更加强调的是前端流程的自动化，模块化不是他的核心。

webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能是他附带的功能。

# 2.webpack的安装 #

> webpack必须依赖于Node环境。首先需要安装node。node环境为了可以正常执行很多代码，必须其中包含各种依赖的包。
> 
> npm工具为了管理这些包而存在的。（node packages managen）

webpack的安装首先需要安装Node.js，Node.js自带了软件包管理工具npm

查看自己的node版本：

node -v

当前文件目录下输入

npm init

来到这里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 1][]

先起个名字，这里我们默认这个名字好了，最好不要带中文。然后一路回车，最后生成一个package.json

![20201215153431980.png][]

### 1.安装webpack ###

全局安装webpack:

npm -install webpack -g  //最新版本

npm install webpack@版本 -g     //指定版本

局部安装：

cd 目录
    npm install webpack --save-dev

cd 目录
    npm install webpack@版本 --save-dev    // 指定版本

### 2. 简单打包代码 ###

以下方目录为例：

![20201215151606170.png][]

将main.js打包至dist文件夹内，在webpack文件目录下输入

webpack src/main.js dist/main.js  //webpack2
    
    webpack src/main.js -o dist/main.js //webpack4

在dist文件夹内会自动生成一个打包文件 main.js  此时打包完成。

# 3.配置 #

### webpack.config.js ###

每次打包都需要输入一大行代码webpack src/main.js -o dist/main.js ，很麻烦。为了使用简单的命令语句进行打包，需要写个配置文件webpack.config.js

根目录下创建webpack.config.js，写入以下神秘代码实现输入webpack直接打包

const path = require('path')
    
    module.exports = {
        entry:'./src/main.js',
        output:{
            path:path.resolve(__dirname,'dist'),
            filename:'bundle.js',
            publicPath:'dist/'
        },

此时在控制台直接输入webpack直接就会打包。

### 将webpack命令映射到npm run ###

打开package.json,在scripts中添加build元素即可。

{
      "name": "webpacks",
      "version": "1.0.0",
      "description": "",
      "main": "bundle.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
        "build":"webpack"
      "author": "",
      "license": "ISC"
    }

此时打包命令就是 npm run build

参考文献：[https://www.bilibili.com/video/BV15741177Eh?p=105&t=60][https_www.bilibili.com_video_BV15741177Eh_p_105_t_60]

[https_www.webpackjs.com]: https://www.webpackjs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70]: /images/20221120/3e34610705f84bbf9320e22a7a9398f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 1]: /images/20221120/2dba3a5f8d264ef1ad358a5c123506a0.png
[20201215153431980.png]: https://img-blog.csdnimg.cn/20201215153431980.png
[20201215151606170.png]: https://img-blog.csdnimg.cn/20201215151606170.png
[https_www.bilibili.com_video_BV15741177Eh_p_105_t_60]: https://www.bilibili.com/video/BV15741177Eh?p=105&t=60