NodeJS、npm、webpack（4）

1、下载NodeJS进行安装

2、npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

3、webpack安装（命令行安装）：

全局安装：npm install webpack -g；安装在项目：npm install webpack --save-dev（首先要切换到项目的盘符里再执行此命令）。还有一点注意的是：现在安装的webpack已经是webpack4版本的，webpack已经将命令行的相关内容迁移到webpack-cli，所以除了安装webpack，还要安装webpack-cli（执行：npm install webpack-cli -g即可），安装完成后可以通过命令行webpack -v、webpack-cli -v查看是否安装成功

注：如安装很慢可以使用淘宝镜像，此时需要将npm命令切换至cnpm（在我看来其实是相当于安装了cnpm，然后就可以使用cnpm命令进项相关依赖包的安装）

4、webpack例子（通过命令行创建）

（1）执行：mkdir webpack-demo
（2）执行：cd webpack-demo
（3）执行：npm init -y 生成package.json文件（这里加上-y会一次性生成package.json文件，否则你会多次按回车进行创建）
（4）在项目中安装webpack和webpack-cli，此时就是在项目中安装，依次执行npm install webpack --save-dev、npm install webpack-cli --save-dev
（5）编辑package.json文件，在scripts中添加build命令

"scripts": {
    "build": "webpack"
}

由于现在使用了webpack-cli命令，所以经过我测试，这里需要写成"build":"webpack-cli"才不会报错
（6）由于webpack4 会尝试在./src中寻找入口文件，而以前我们是在webpack.config.js中定义入口（entry），所以我们在根目录下新建src文件，然后新建一个index.js文件，否则会报错：ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-demo'
（7）执行：webpack命令进行打包，会在根目录下生成dist/main.js 文件
（8）在根目录下新建index.html文件，并引入dist/main.js（此时打开页面什么也没有）
（9）webpack4还会报一种错误：The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.意思是未设定mode，这是 webpack 4 引入的，有两种模式，development 与 production，一个用于development环境，一个用于生产环境。此时我们需要修改package.json文件，在scripts中添加：

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
}

同样，由于现在使用了webpack-cli命令，所以经过我测试，这里的webpack要写成webpack-cli才不会报错

5、实时刷新

经过上边的9步之后页面种什么也没有，那么如何做到页面实时刷新呢？我们需要解决两个问题：
（1）入口文件index.js发生变化，包括它所引用的其他模块的变化时如何通知给webpack，以便重新构建dist/main.js
（2）dist/main.js 文件重新构建后，浏览器中的页面如何自动刷新？
解决方案：
（1）问题一：监控文件——利用webpack 监控文件变化，当入口文件index.js文件发生变化时，就重新构建。但默认情况下，watch 选项是禁用的。我们可以通过命令：webpack --mode development --watch 启用它，此时我们修改index.js文件就会重新构建dist/main.js文件
（2）问题二：自动刷新浏览器——需要通过webpack 提供 webpack-dev-server 来解决，因此需要安装webpack-dev-server，安装命令是：** npm install webpack-dev-server --save-dev ** ，这只是在项目中安装而已，经过我测试，只安装在项目中运行时会报错：webpack-dev-server 不是内部或外部命令，也不是可运行的程序或批处理文件，解决办法就是在全局中也安装执行：webpack-dev-server 进行全局安装，安装成功之后在浏览器中打开http://localhost:8080/即可浏览文件（index.html），此时继续修改入口文件index.js，会发现webpack重新构建了dist/main.js文件，但是网页没有刷新，这是因为我们在执行命令webpack-dev-server --mode development之后输出了这样一行webpack output is served from /，这是因为webpack-dev-server 构建的 main.js 其实是在 http://localhost:8080/main.js 的位置，而不是 http://localhost:8080/dist/main.js，而且它存在于内存中，并不写入磁盘。而我们在 index.html 页面中引用的是 dist/main.js。所以我们可以在运行 webpack-dev-server 时指定 output.publicPath：命令是：webpack-dev-server --mode development --output-public-path dist，这样运行之后就会输出webpack output is served from /dist，此时再修改入口文件index.js 文件，就可以在浏览器控制台看见[WDS] App updated. Reloading...，即页面自动刷新了，而且重新构建了dist/main.js