1小时入门，手把手教你学会用webpack打包，隔壁王大爷看了都说小伙子细！

---

webpack

新建站点：⭐

这里的文件路径最好是英文

注意：站点文件名不可以起名叫webpack

为什么呢？

我们在 https://www.npmjs.com/ 中搜索 webpack模块是可以搜到的

在nodejs中我们通常是下载别人的模块再引用，当别人已经使用webpack上传，我们是不可以再用这个名字的。

下面，我们在站点文件内，右键git bash here

先进行初始化 ⭐

cnpm init -y

初始化成功：

初始化成功，站点自动生成package.json 文件

下载： ⭐

npm i webpack@4 -D

下载成功：

注意：此时的下载要小心版本，webpack版本5及其以上，出来时间不长，但不兼容以前的对应插件，而现在项目中所使用的版本是4，所以需要下载版本5之前的版本。

npm i webpack-cli@3 -D

下载成功：


终于下载成功了哈哈：

在站点新建文件src： ⭐
创建html和css、js文件

webpack的使用跟gulp一样，需要先创建一个文件：webpack.config.js
写打包配置
所有配置在这个文件中是以一个导出的形式写的
webpack跟gulp一样，是基于nodejs的

module.exports = {
所有配置都写在这里面  
    // 必须要有一个入口文件和出口文件
    // 配置入口文件(主文件)
    // 主文件就是要将其他所有的文件导入到这里，打包这个文件
    }

我们想要运行一下main.js
需要在package.json 中添加指令

package.json文件中的scripts键，可以配置自定义的命令，scripts中的键代表自定义的命令：npm run 自定义的命令 - 运行的真实命令其实是，这个键对应的值

package.json中配置的命令的时候，有4个默认命令（start/test/restart/stop），是可以在运行的时候省略run， npm start

注意：添加逗号， 指令名自拟

使用

node ./src/js/main.js

我们在这webpack.config.js中配置 ⭐

在这个文件中配置好选项之后，在命令执行webpack命令就能完成打包。
配置好了以后，在命令行运行命令：webpack
默认情况下，这个命令是运行失败的，因为从来没有安装过这个命令 - 安装了webpack和webpack-cli两个模块，命令就从这两个模块中来

但是没有全局包的话，执行这个命令会报错，可以在package.json文件中配置命令来解决这个问题：

"start":"webpack"

以后就可以使用npm start来代替webpack这个命令了

在这个配置文件中，首先是将所有配置导出：

module.exports = {
   
    
}