前言

就不多说定义,说明的废话了!

1.初始化一个新的项目
image.png
这时就会有了一个package.json文件
image.png

2.安装Webpack和命令行命令
image.png
ok安装完毕
image.png
现在你就可以运用webpack的命令了,比如:
image.png
来看看你的打包出来的东西吧!
image.png
好!我们继续
3.我们来配置config文件
(这里提一句,webpack 4 有默认配置 入口文件:默认是./src/index.js, 出口文件:默认是./dist/main.js)
image.png
然后建立脚本
image.png
现在我们就可以进行简单的打包了
image.png

4.配置插件
html的拷贝,js路径的添加
image.png
image.png
再此打包html会被拷贝过来了
image.png
还可以拷贝一些文件比如favicon.ico
image.png
再build一下就会将favicon.ico拷贝过去了
image.png
接下来将原有的dist文件清除掉
image.png
这样每次再拷贝文件前都会先进行清除了
5.为引入vue 做准备
image.png
现在webpack是无法解析vue的,所以我们要引入vue-loader 和模板编译器
image.png
image.png
6.在本地run起来就要加入devserver了

今天就写到这。。。有时间继续更新


九先生
48 声望3 粉丝

打工人,打工魂!