开发者学堂课程【前端自动化构建工具 Webpack：复习 - webpack 基本配置1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8220
复习 - webpack 基本配置1
项目的 js 入口文件
1.在文件中找到代码，新建一个01.webpack-study
点击终端：
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> npm init -y
如果你创建的根目录名称是中文名，不可以用-y，直接 npm 再回车，回车时会让你输入包的名字，当你输入包名时不要直接回车因为名字中带有中文，它会默认把项目的名称当做 name 放入。所以当你的项目名称是中文时，你需要手写你的项目名称。
2.包管理文件创建好之后创建一个 src 存放项目源代码，再创建一个 dist 这是项目打包之后输出的文件
3.在src下创建一个index.html和main.js（是项目的js入口文件）
4.在main.js下写
console.log(＇ok＇)
5.把main打包放入index.html中
点击终端:
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> webpack .\src\main.js.\dist\bundle.js
打包成功，点开dist，多了bundle.js。如果把dist删除，再打包一个，会自动生成一个dist。
6.在index.html导入src
＂../dist/bundle.js＂>右键点击浏览器查看
7. 自动进行打包要安装一个工具，在 main 下点击终端
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> cnmp i webpack-dev-server -D
8. 在src下新建一个webpack.config.js
在webpack.config.js下装 ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> cnmp i webpack -D
9.在webpack.config.js中写
var path=require(＇path＇)//由于 webpack 是基于 Node 进行构建的，所有webpack 的配置文件中，任何合法的 Node 代码都是支持的。
//如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
module.exports={
//当以命令形式进行 webpack 或 webpack-dev-server 的时候，工具会发现我们并没有提供要打包的文件的入口和出口文件，
此时，它会检查项目根目录中的配置文件，并读取这个文件就拿到了导出的这个配置对象，然后根据这个对象进行打包构建
entry：path.join(_dirname,＇./src/main.js＇),//入口文件
output：{//指定输出选项
path：path.join(_dirname,＇./dist＇),//输出路径
filename：＇bundle.js＇//指定输出文件的名称
}
10.在package.json添加一个脚本
＂scripts＂：{
＂dev＂:＂webpack-dev-server--open--port 3000--contentBase src--hot＂
}
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> npm run dev
右键检查有问题，证明 script 有问题，不能那样写
11.装工具
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> cnpm i html-webpack-plugin -s
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> cnpm i html-webpack-plugin -D
12.在webpack.config.js
var htmlWebpackPlugin=require(＇html-webpack-plugin＇)//在内存中，根据指定的模板页面生成一份内存中的首页，同时自动把打包好的 bundle 注入到页面底部
plugins：[//所有webpack 插件的配置节点
new htmlWebpackPlugin({
template:path.join(_dirname,＇./src/index.html＇),//指定模板文件路径
filename：＇index.html＇//设置生成的内存页面的名称
})
]
}
