1.【webpack】初识及项目创建

た入场券 2022-01-11 05:55 256阅读 0赞

webpack是构建前端html的一个强大的脚手架工具，随着业务的增多，前端功能越来越复杂，单纯的写html已经不能满足我们的日常需要，随后，前端模块化变得越来越重要，但是模块化后，js之间的交互，引用，管理却变得复杂，然而一个好的前端脚手架工具能帮我们处理这些琐事

### 目录 ###

\---------------------------

[1.【webpack】初识及项目创建][1._webpack]

[2.【webpack】打包编译生成html][2._webpack_html]

### 1.认识package.json ###

package.json是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等

怎么生成package.json呢?

webpack中文学习网

[https://www.webpackjs.com/guides/][https_www.webpackjs.com_guides]

首先创建一个文件夹webpack-demo，并使用命令行cd到此目录下，然后执行以下命令

npm init

使用以上命令可以在当前目录生成一个package.json文件，文件内容如下：

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

### 2.安装webpack依赖 ###

使用以下命令可以在package.json中添加webpack依赖，学过java的同学应该知道，此时相当于在pom中添加了一个maven依赖库

npm install --save-dev webpack

同时还生成了node\_modules，这里不用管它，它就是你项目中所有的依赖项目的源文件，它是一个系统文件夹，一般我们不会去修改它

### 3.认识scripts ###

在package.json文件中有一个名字叫test的脚本，我们使用npm run命令来运行一下试试

npm run test

运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70][]

可以看到成功输出了Error: no test specified字符串，这里为我们的后续开启了一个美好的篇章

###    4.创建index.html文件 ###

在项目的根目录下创建index.html文件

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <title>demo</title>
      </head>
      <body></body>
    </html>

### 5.使用webpack命令编译 ###

首先我们使用webpack命令来打包测试一下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 1][]

出现以上错误提示，表示我们现在使用的是webpack4以上的版本，新版本需要安装webpack-cil依赖

npm install --save-dev webpack-cli

安装完成后，在项目的根目录下创建build文件夹，并在此文件夹中新建webpack.config.js文件，文件内容如下:

'use strict'
    const webpack = require('webpack')
    module.exports = {
      mode: 'development',
      entry: {
        index: './src/index.js'
      }
    }

然后在项目根目录创建src文件夹，代表我们的项目源码，并在此文件夹下创建index.js文件，文件内容如下:

function hello() {
      alert('hello')
    }
    hello()

然后我们再使用以下命令打包

webpack --config build/webpack.config.js

输出：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 2][]

这里看到已经对index.js文件进行了打包，生成的文件默认在当前项目根目录的dist目录下

此时，我们再使用以下命令试试

webpack --config build/webpack.config.js --progress

多运行几次，发现了什么？

在添加了--progress选项后，可以看到打包的进度，哈哈，是不是很有意思呢？

除此之外还有很多选项，我把常用的几个列举出来：

\--color                         显示颜色

\--display-module         显示打包模块

\--display-reason          显示打包原因

添加完这些选项后，我们发现这个命令已经很长了，怎么办？

按照第3步中的方法，我们添加一个script，打开package.json文件，编辑内容如下：

{
      "name": "webpack-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --config build/webpack.config.js --progress --color --display-module --display-reason"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.34.0",
        "webpack-cli": "^3.3.4"
      }
    }

接着，我们执行下面命令试试

npm run dev

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 3][]

哈哈，到这里是不是很爽呢？

这一篇主要分享webpack的简单使用，从webpack的初始化，项目创建到项目编译，在下一篇中为大家讲解webpack打包html

[1._webpack]: https://blog.csdn.net/cc_want/article/details/92840712
[2._webpack_html]: https://blog.csdn.net/cc_want/article/details/92844098
[https_www.webpackjs.com_guides]: https://www.webpackjs.com/guides/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70]: /images/20220111/38a88f5815374a38a3cb34cfaa555e08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 1]: /images/20220111/4c225193a2fc4fa6b1c5b39dd9a0fe1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 2]: /images/20220111/53e553b9680e4521a227b060838df9ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 3]: /images/20220111/176952d9d63a4022a776430fc31b0008.png