01 webpack 基础配置

webpack 4.3x
4.x以后打包和名款
1.快速初始化项目 cnpm init -y

2. 在项目根目录创建src 源代码目录 和 dist产品目录
   3.在src目录下创建 index.html
   4.使用 cnpm 安装 webpack ，运行 cnpm i webpack webpack-cli -D
   全局运行 npm i cnpm -g

5.注意 webpack4 x 提供了 约定大于配置的概念，目的是为了建设配置文件的体积。
-- 默认约定了：
-- 打包入口是 src -> index.js
--出口文件是 dist - > main.js
-- 4.x 中新增了 mode 选项 这是必须项 可选值为：development / production

//webpack-dev-server 打包好后会在根目录下生成一个打包好的 main.js保存在内存中。所以 在 目录里面看不见

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --open Safari --port 3000 --hot --host 127.0.0.1"
// webpack-dev-server 启动服务器
// --open 默认打开 chrome --open Safari 指定Safari
----port 3000 端口3000
-hot 热更新
--host 127.0.0.1 指定域名
},

cnpm i html-webpack-plugin -D
把 index.html在内存中使用