webpack第一次使用

第一次听到webpack是在学习vue的过程中，自己后面也去看了一些视频，但是一直听不懂，直到现在才第一次使用webpack。

**

使用webpack的步骤

1.安装全局webpack

在终端下输入npm install webpack webpack-cli -g//只需要安装一次
我使用的是vs code，

和cmd的使用方式是一样的，demo是我用来存放项目的文件

2.包的初始化

安装完成之后，我们再终端输入npm init -y完成对包的初始化
完成之后我们会发现，目录下多了一个package.json的文件*

2.1在项目目录下安装局部webpack依赖

npm install webpack webpack-cli --save-dev*一样是在终端中
我在deom文件夹下，新建了src和dist两个文件夹，src用来存放我自己写的文件，dist用来存放打包后的文件。

3.入口文件

入口文件是打包时使用的文件，它相当于入口，可以通过它连接着其他所有文件。

这个是我写的一个简单的js文件，这里我把它当做入口文件。data。json中存放了一个简单的数据

4.打包

webpack有两种模式打包，
1.开发环境
wepack 入口文件目录 -o 生成的打包文件目录 --mode=development

2.生产环境
wepack 入口文件目录 -o 生成的打包文件目录 --mode=production
二者生成的文件是相同的，但是生产环境下文件更小，开发环境下文件中有注释
生成的文件

5.写一个HTML界面测试一下

看看调用bundleo.js是否能够使用入口文件中的方法。

这次虽然是一个小测试，但是总算让我了解了webpack的使用。

如果使用配置文件的方式来进行打包会更加的便捷和简单

6.新建配置文件

在项目根目录下新建一个文件为webpack.config.js
里面写入下面代码

let path = require('path');//获取当前文件路径
module.exports={    
entry:"./src/index.js",  
  output:{     
     filename:"mypack.js",        //路径为绝对路径        path:path.resolve(__dirname,'dist')    },  
       //开发模式    
       mode:'development'
       }

关于更多配置文件的信息可以查看官方文档

这个时候，我们要打包文件就十分简单了，直接在终端输入webpack即可