webpack 的基本使用

webpack简介

webpack 是一款基于项目的打包JavaScript 应用程序的静态模块打包器,当 webpack 处理应用程序时它会将所有模块打包成一个或多个 bundle。它解决了网页请求时出现的二次请求及依赖的复杂关系，提高了网页显示的效率。

webpack 安装

1. webpack 是基于node程序编写的打包器。在使用之前需要先安装node. 直接在cmd 中输入npm install -g webpack 即可。这个-g 是全局安装，安装一次以后，之后使用不需要在进行安装。

2. 当安装完成以后我们还需要安装一个webpack-cli 的依赖 。直接全局安装即可，如果安装过程中出现问题，尝试使用管理员打开cmd进行安装。

webpack简单使用

1. 当我们安装完成以后，可以在项目中简单的使用进行尝试。可以先创建一个项目文件，在里面创建src/dist 两个文件夹和main.js文件，在src中创建index.html 。

2. 在终端进入到项目目录下进行项目初始化，输入 npm init -y 进行项目初始化，然后在main.js中编写js简单代码。在项目中如果使用jquery 可以通过 npm i jquery -D 进行在项目中安装，如果没有安装直接打包会出现一些错误打包失败。

3. 当编写js代码时，准备打包之前需要安装一个依赖，输入 npm i webpack-dev-server -D 进行安装。 然后 通过 webpack 需要打包的js文件路径 -o 输出的位置路径 进行打包。在webpack之前的版本中是不需要加参数 -o 的。但是最新的版本中不加会出现一些错误。然后在index页面中引入打包后的js文件成功的话可以显示如二图

webpack.config.js简单使用

webpack.config.js是webpack中的一个配置文件，当我们想直接输入webpack就可以自动打包或者做一些其他配置的时候可以在配置文件中定义，entry: 需要打包的js文件，output输出的文件

当我们想在输入指令后可以直接打开浏览器可以并且自动帮我们打包可以通过webpack-dev-server 实现，

如果出现下面这种问题检查你的package.json文件中配置是否出现问题

这三个依赖必须都配置安装，这个提示的是找不到webpack,可以通过在项目中安装进行解决