常用指令
- npm install == npm i
- npm install --save == npm i -S
- npm insall --save-dev == npm i -D
两者的区别：-D只在开发环境中使用，如loader,babel等；-S在生产环境和开发环境中都要使用，如Vue,jquery等。
配置流程
初始化
(1)新建一个空项目，然后初始化
npm init
然后会生成一个package.json文件
配置webpack
(1)在项目本地安装webpack,webpack4需要webpack-cli,一起安装
npm i -D webpack webpack-cli
npm为5.x版本以上的话，会生产node_modules文件夹和package.lock.json文件。
webpack.config.js配置文件，打包入口文件默认为src/index.js文件，考虑到后续配置方便，在根目录下创建相关文件夹和文件，项目结构如图所示：
我们手动来配置一下。打开webpack.config.js文件，写入：
index.html和index.js里写一些测试代码
package.json文件,在script里添加一条：
webpack.config.js。然后在终端输入命令npm run dev.可以看到打包完成信息，同时在项目目录中多出来一个dist文件夹，里面有打包生产的main.bundle.js文件
配置webpack-dev-server
(1)为方便在开发时查看编译效果，安装webpack-dev-server,它可以在开发环境中提供很多服务，如开启一个服务器、热更新、接口代理。首先，在本地局部安装：
npm i -D webpack-dev-server
然后将package.json中的script更改为：
--open指打包成功后自动开启浏览器。注意
webpack-dev-server打包后生成的文件保存在内存(根目录llocalhost:8000/下)中而不是本地项目的dist目录中，所以在
index.html通过src="dist/main.bundle.js"的方式引入失败，应该改为scr="./main.bundle.js"src="http://localhost:8000/main.bundle.js"的方式引入（2）在
webpack.config.js的output中添加一条
src="assets/main.bundle.js"的形式引入 (2)webpack-dev-server的热更新功能只适用于更改了静态文件，当修改配置文件时还是需要重新运行，所以安装nodemon来监听配置文件的改动，实现热更新。
安装nodemon,
npm i -D nodemon修改package.json:
"dev": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --mode development\"",
"build": "webpack --config webpack.config.js --mode production"
清除dist
因为要多次修改代码进行构建，多次生成的dist会很多余，所以在每次构建前先删除之前的dist,安装插件clean-webpack-plugin:
npm i -D clean-webpack-plugin
安装成功后在webpack.config.js文件中添加2句：
自动生成html
手动创建的html文件需要我们手动添加js文件等资源路径，很不方便，所以使用html-webpack-plugin来自动生成html文件。
(1)安装npm i -D html-webpack-plugin
(2)配置webpack.config.js
