webpack（v4.7.0版本）的安装使用（适合初学者）

淩亂°似流年 2022-05-25 02:08 478阅读 0赞

最新的webpack版本是v4.7.0

（注意：因为是针对初学者，所以很多知识并没有引入进来，避免越看越糊涂，后续还会对webpack知识持续更新，希望能帮到初学的你）

先简单认识一下webpack吧

Webpack可以看作是模块打包器，做的事情就是，分析项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Sass，TypeScript），并将其转换和打包为合适的格式以供浏览器使用，在3.0出现以后，Webpack还肩负了优化项目的责任（只有自己不断的练习使用，才会真正的理解webpack的作用，所以，最重要的是多动手，多动脑）

所以接下来就是我们今天的重点喽！

一、使用webpack，需要一个配置文件

所以我们需要新建一个js文件，命名为webpack.config.js（后续会说为什么叫这个名字），这个文件需要导出一个对象，我们使用module.exports=\{\}（这个对象就是webpack的配置），这个对象描述了webpack会以怎样的形式去打包，以及打包过程中它会干什么事情，全部依赖这个对象去描述

这个对象至少要有两个属性，程序的入口和出口，看我的代码

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

注意：entry可以是字符串、数组和json对象，三种格式都可以

解释一下：entry，就是我们说的程序的入口，告诉webpack，我们的项目的入口是谁，（本例中app.js即是项目的入口，是相对路径，相对于我们前面提到的配置文件的位置，即相对于webpack.config.js）只有当我们告诉了项目的入口是谁，它才能从这个入口中去分析出你整个应用需要用到什么样的依赖，分析出你整个依赖树，然后去帮你打包，打包之后，它会输出一个新的文件，所以我们需要告诉webpack以怎样的方式输出，所以我们给它一个输出的属性output，output接收一个对象

output:{
            path:path.resolve(__dirname,'dist'),
            filename:'main.js'
        }

我们能够看到上面有一句代码

const path = require('path');

这句话是引入path模块，它是node.js的一个内置模块，使用path帮助我们处理路径问题（这个node.js我也没学，所以不是特别懂，海涵）

path :必须是绝对路径，这和entry中的路径不同（可以是相对路径），\_\_dirname:代表文件所在的根目录，（注意是两个英文状态的下划线），dist,打包后的文件要存放的文件夹（这个是自己建的），所以就是告诉path就是告诉webpack，打包后的文件放在根目录的dist文件夹中

然后我们要告诉打包后的文件叫什么名字，所以就需要用到filename这个属性了，我们上面的代码：指打包后的文件叫main.js

总结一下就是，告诉webpack，打包后的文件放在根目录的dist文件夹中，名字叫main.js

二、准备了上面的之后，我们要安装webpack（因为浏览器不能处理模块化的东西，所以我们需要交给webpack处理）

1、安装webpack前先初始化package.json文件，因为我们需要用npm来管理我们项目的依赖，所以首先用到的命令是：npm init  -y（执行完之后会生成一个package.json文件）

2、在命令行执行npm i -D webpack（安装webpack，如果只是webpack，会安装当前最新版本的webpack，现在的是v4.7.0）,（此处执行完之后，会生成一个node\_modules文件）注意：webpack放在-D前面和后面都是可以的，后面其他的也是类似的

解释一下，后续你会发现有的是npm i -S，那与npm i -D的不同是，-D代表的是安装项目开发的依赖，而-S是代表项目生产的依赖（i是 install的简写  -S是--save 的简写，-D是--save -dev的简写）

3、回到package.json中，声明处理要运行的命令，看我下面的代码

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --mode development"
      }

因为想要进行打包，就要运行webpack命令，而运行webpack命令要在scripts中声明要运行谁，以及要运行的命令，所以，看上面的代码，我们加入了"build":"webpack --mode development",build：是我们起的名字（随意起，运行时使用），webpack:是运行的命令，即处理哪个文件夹，使用哪一个webpack配置，默认运行webpack.config.js，所以如果我们的配置文件是webpack.config.js，则只需要使用"build":"webpack"，如果，我们的配置文件不是webpack.config.js,那么此处应该为："build":"webpack --config  配置文件名"，,假如我们的配置文件为webpack.dev.js,那么我么这里就应该是："build":"webpack --config  webpack.dev.js"。\--mode development也是这个版本必须要加的(用于消除警告)，反正我不加这句代码的时候，它就总是有警告，加上之后就好了。

4、npm i -D  webpack-cli（这个在3版本的时候是不需要的，到了4版本必须加，否则会报错），执行完之后，会在package.json的devDependencies中加入"webpack-cli":"^2.1.2"，如下所示（当然，其实我们不需要管这些，只需执行命令即可）

"devDependencies": {
        "webpack": "^3.11.0",
        "webpack-cli": "^2.1.2"
      }

5、在配置文件（webpack.config.js）中加入

mode:'development'

（如果不加，当我们进行webpack打包的时候，会有警告，让加入mode为development或production，因为webpack是在开发中使用的，所以就使用development即可）

6、npm  run   build（进行一次打包，打包后，会在dist中生成一个main.js文件），注意这里的build就是我们上面起的名字，起什么名字，run什么

嗯、先到此结束，然后补充一些小的问题

有时候我们可能是看的视频学习的webpack，像我一样，而这些视频可能使用的webpack是3版本的，据说，3版本和4版本没什么大的不同，（想要了解更多可以到webpack官网看看，英语好的去原版的，英语不好的去中文版看，此处就不再发链接了，网上搜一下就出来了），但是如果我们想要使用webpack的3版本的话，在安装webpack时可以这样安装npm i -D webpack@3，对就是多一个版本号而已，然后还要注意的是，使用3版本的话，就不需要执行npm i  -D webpack-cli这条命令了

好了，基本的先说这么多了，后续会持续更新的