常用指令

• 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文件。

(2) webpack在打包时，会默认寻找根目录下的webpack.config.js配置文件，打包入口文件默认为src/index.js文件，考虑到后续配置方便，在根目录下创建相关文件夹和文件，项目结构如图所示：

我们手动来配置一下。打开webpack.config.js文件，写入：

在index.html和index.js里写一些测试代码(3) 开始打包，打开package.json文件,在script里添加一条：即使用webpack打包，配置文件为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"
解决办法如下： （1）通过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

然后就会自动在dist目录下生成已经引用好静态资源的index.html