项目准备
![](https://img.haomeiwen.com/i3865021/220300ac7b6b656e.png)
mkdir 创建一个新目录(目录名字不能为常见的包名,如webpack这类)
cd xxx 切换到xxx目录
ls/ll 查看当前目录下的所有文件
然后第二步初始化:
npm init 目的是通过npm安装很多安装包,自动化创建这个文件package.json
第三步创建业务目录:
比如说放在app里,分js/css/views 然后对应的目录下放对应的文件
![](https://img.haomeiwen.com/i3865021/d7a61c9ab8429fd8.png)
创建配置文件
![](https://img.haomeiwen.com/i3865021/820fbc4b13e34835.png)
###基础配置
entry 入口,webpack要构建哪个文件
module 配置各种loader,比如css-loader
plugins 插件,不是必选项,但是离不开
output 输出
###进阶配置
resolve 教webpack怎么去查询文件
devtool sourceMap有用到
devServer 开启服务
![](https://img.haomeiwen.com/i3865021/be6e33d57434682e.png)
![](https://img.haomeiwen.com/i3865021/93a3f8ca90f973cb.png)
![](https://img.haomeiwen.com/i3865021/96251122f7d45b7a.png)
path
是node
提供的path路径的对象。resolve
表示相对路径,这句话的意思是,在你的当前路径下,创建一个dist目录,然后构成的文件输出在dist目录下。
![](https://img.haomeiwen.com/i3865021/0009f21881605429.png)
![](https://img.haomeiwen.com/i3865021/af1c02c4b46afb67.png)
contentBase 是如果需要提供一个静态文件时,静态文件在哪输出。
compress:整个文件开启gzip压缩
port:在哪个端口开启
让devServer跑起来
![](https://img.haomeiwen.com/i3865021/3c299f73eef1dac1.png)
-- open是自动打开
出现这种错误的时候
检查Vue的问题:
![](https://img.haomeiwen.com/i3865021/84695313eed0137a.png)
![](https://img.haomeiwen.com/i3865021/f0a2c969338b5aea.png)
![](https://img.haomeiwen.com/i3865021/ec0837031afcd5fe.png)
网友评论