webpack最基本的使用方式

注意：在cmd安装webpack时候要注意版本问题，不然出现打包环境问题
删除已安装的：npm uninstall webpack -g
再重新安装合适版本: npm install webpack@3.5.3 -g

webpack基本配置过程

1.在自主建立的名为webpack的主文件夹内创建两个文件夹，dist和src

2.webpack文件夹上点击右键打开终端

3.终端内输入 npm init -y 初始化项目，出现 package.json 文件

4.输入 npm i jquery -S ,安装jquery,生成一个 node_modules 文件夹

5.在终端输入webpack 要打包的文件的路径、打包的输出的文件的路径 —
“ webpack .\src\main.js .\dist\bundle.js ”，设置成功在dist文件内自动生成一个bundle.js文件

webpack-dev-server工具的配置

使用 webpack-dev-server这个工具，来实现自动打包编译的功能（储存到电脑内存是因为速度快，不消耗磁盘）

**1.**终端，运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
2.安装完毕后，这个工具的用法，和webpack命令的用法完全一样
3.由于，我们是在项目中，本地安装 webpack-dev-server，所以，无法把它当做脚本命令，需要在powershell终端中 直接运行（只有那些安装到全局-g 的工具，才能在终端中正常执行）
4.注意：webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中，必须安装webpack
5.webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘中，
而是直接托管到了电脑的内存中。所以，我们在项目根目录中，根本找不到这个打包好的 bundle.js。
6.我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了咋们项目的根目录中，虽然我们看不见它，但是可以认为和 dist、src、node_modules 平级，有一个看不见的文件叫做 bundle.js。安装完 webpack-dev-server 会后，在主文件夹内创建一个文件名为 webpack.config.js ，然后在里面输入配置文件代码。

当以命令形式运行 webpack 或 webpack-dev-server的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时，它会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建。

在 package.json 文件里面添加脚本，在 scripts 下面添加 “dev”:“webpack-dev-server” 或 “start:dev”:“webpack-dev-server”。

在终端输入安装 npm i html-webpack-plugin -D ，然后在 webpack.config.js 文件内导入在内存生成HTML页面的插件。

webpack-dev-server的常用命令参数（package.json修改参数）
// “start:dev”: “webpack-dev-server --open --port 3000 --contentBase src --hot”
// open:true, //自动打开浏览器
// port:3000, //设置启动时候的运行端口
// contentBase:‘src’, //指定托管的目录
// hot:true //热更新，不刷新页面，局部更新数据样式。不重新打包整个bundle.js文件，但是生成两个与修改位置相关补丁的文件。

或者在webpack.config.js内配置dev-server 命令参数
//这是配置dev-server 命令参数的第二种形式，相对来说，这种方式比较麻烦一些

module.exports = {
	devServer:{ 
	// --open --port 3000 --contentBase src --hot
	open: true,  //自动打开浏览器
	port: 3000,  //设置启动时候的运行端口
	contentBase: 'src',  //指定托管的目录
	hot: true  //启用热更新的第一步
	},
}

注意：
json文件里面不能写注释，否则npm run dev会报错。