webpack安装的两种方式
1. 运行`npm i webpack -g`全局安装webpack，这样就能在全局使用webpack的命令(不推荐，这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。)
2. 在项目根目录中运行`npm i webpack --save-dev`安装到项目依赖中(推荐)。局部安装cli，使用`npm i webpack-cli --save-dev`命令。
使用传统方式来打包单个文件流程
1.在工程根目录里通过`npm init -y`快速初始化，它会给我们创建一个package.json。接下来安装的东西，都基于这个package.json。
2.运行`npm i webpack --save-dev`安装webpack。
3.运行`npm i webpack-cli --save-dev`安装webpack-cli。
4.安装生成依赖和发布依赖，比如JQuery。使用命令`npm i jquery --save`。
5.在js文件里可以通过import来引入JQuery，如` import $ from 'jquery' `。
6.如果直接引入这个js文件，那么浏览器可能不识别这些高阶语法(如import)，就需要打包(打包js/json文件)。使用打包命令` webpack src/js/main.js --output dist/js/bundle.js --mode development `，src/js下的main.js文件，将其打包在dist/js下的bundle.js。(这是传统打包方式)。
使用NPX打包
npx的概念：npm v5.2.0引入的一条命令(npx) ，引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。npx会自动查找当前依赖包中的可执行文件，如果找不到，就会去PATH里找。如果依然找不到，就会帮你安装!
npx的作用：使用`npx webpack`命令会执行node_ modules对应的bin下的webpack.cmd。js文件需要放在src目录下。
主要特点
1、临时安装可执行依赖包，不用全局安装，不用担心长期的污染。
2、可以执行依赖包中的命令，安装完成自动运行。
3、自动加载node modules中依赖包， 不用指定$PATH。
4、可以指定node版本、命令的版本，解决了不同项目使用不同版本的命令的问题。
举例：打包多个JS/JSON文件
使用npx命令
使用配置文件
在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，所以 配置文件比在终端(terminal)中手动输入大量命令要高效的多。
新建 webpack.config.js 文件，写入相关配置信息，在终端直接执行webpack即可打包，如下图所示：
打包项目中的CSS/LESS/SASS/图片等文件
安装相关模块
安装并添加 style-loader、css-loader模块
npm install css-loader style-loader --save-dev
安装并添加less模块
npm i less -save
npm install less-loader --save-dev
安装并添加sass模块
npm i sass --save
npm install sass-loader node-sass --save-dev
安装并添加 file-loader 模块
npm install file-loader --save-dev
进入webpack.config.js中配置loader选项
图片文件需要在css文件中使用，css/less/sass文件需要在主js(index.js)文件中引入使用。
通过上面的操作，我们可以了解到，如果要加载其它的资源，只需要配置好相应的loader，然后统一打包到bundle.js文件中运行即可。
自动编译打包
webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
安装：npm install --save-dev webpack-dev-server
在webpack.config.js告诉开发服务器(dev server)，在哪里查找文件：
在package.json中增加 "start": "webpack-dev-server --open" 选项。
编译打包应用并运行：npm start
当功能开发完毕后，关掉服务器，执行webpack打包成本地文件即可。
HtmlWebpackPlugin插件的使用
该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。
安装： npm install --save-dev html-webpack-plugin
在webpack.config.js中配置：
使用：
删除掉原先打包编译生成的dist文件夹，重新执行webpack，该插件会自动根据指定的模板页面帮助我们创建index.html文件，并做好相关配置引入。
