webpack基础使用步骤笔记（一）

1.首先创建一个项目文件夹例如：命名webpack-base
2. 打开编辑工具vs code (任意一款编辑器) F5打开命令行 npm init -y 初始化项目
生成 package.json文件

3.在webpack-base文件夹下新建src源代码文件和dist产品目录

4.在src目录下建立index.html文件/index.js文件
5.npm install -g cnpm --registry=https://registry.npm.taobao.org ）安装cnpm
6.使用cnpm 安装webpack
运行 cnpm install webpack webpack-cli -D
运行cnpm install webpack-dev-server -D （每次编译后自动打包）
7.package.json 中scripts中加 dev: ‘webpack-dev-serve’

8.webpack-base文件夹下建立webpack.config.js 配置文件

在webpack4.x版本以上，约定大于配置， 默认打包入口src => index.js ，打包路径dist => main.js
在src=>index.js 我们随意写一行console.log(‘ok’)
在src=>index.html中引入打包文件 /dist/main.js

9.命令行输入 npm run dev 运行项目进行自动打包
10. 打开浏览器访问 http://localhost:8080/ 出现下图 点击src 就会出现首页

如果控制台出现打印ok 则打包成功 可以进行其他配置了
11. 希望访问localhost:8080时直接打开页面 把index首页托管到内存中
运行 cnpm install html-webpack-plugin -D 下载插件
webpack.config.js中进行配置 再次运行npm run dev 可直接打开首页