小试牛刀

安装包
npm i webpack webpack-cli -g

切换到本地目录新建一个entry.js
```
webpack  entry.js  -o bundle.js  --mode=development4
```
-o 代表打包输出文件
-mode 选择版本模式
webpack4.x的打包已经不能用webpack 文件a 文件b的方式
创建index.html 导入bundle.js
demo.css引入到entry.js.
```
require('demo.css') 
```

生成package.json

npm init -y
npm i style-loader css-loader -d

配置webpack.config.js 再次运行命令

webpack  entry.js  -o bundle.js  --mode=development

image.png

渐入佳境

webpack+vue实现脚手架
1.创建根目录

|--src 项目的源代码目录
    |--main.js 项目的入口文件
    |--App.vue 根组件
|--package.json 项目配置文件
    npm init -y
|--webpack.config.dev.js 项目开发阶段的配置文件

App.vue (引组件一定要加后缀)

image.png

main.js

image.png

2.创建一个配置项webpack.config.dev.js

image.png

   npm install vue vue-loader

webpack-dev-server + html-webpack-plugin 实现热更新

   webpack-dev-server   打包生成bundle.js
   html-webpack-plugin  帮我们生成index.html并且自动导入bundle.js
   npm i webpack webpack-dev-server webpack-cli  html-webpack-plugin -D

4.创建一个参照template.html 并且配置
<div id="app"></div>