项目准备
- 创建目录
- 使用Git Bash 打开命令行;
- 新建一个webpackText文件夹:mkdir webpackText
- ls:查看当前目录下所有文件
- 初始化:npm init -> package.json
- 创建业务目录
app -> js -> main, App.vue **
app -> css -> reset.scss
app -> views -> index.html
打开文件:
创建配置文件
创建webpack.config.js
配置webpack.config.js文件:
- 基础配置
- entry:入口,表示webpack要构建哪个文件
- module:配置各种loader,什么文件用什么loader去做解析构建
- plugins:提供插件的地方
- output:往哪里输出
- 进阶配置
- resolve:教webpack怎么去查询文件的时候用到
- devtool:比如source map 怎么去用啊
- devServer:开启服务
具体配置
配置入口和loaders
loader是从右往左解析,即先sass-loader,再css-loader,再style-loader
配置输出
文件名和存储位置:
其中[name]不能乱写,它是指app
path是Node提供的对path路径的一个对象,它允许你调用各种api去实现当前路径以及一些路径的变化等
先引用就可以使用:
const path = require('path');
path.resolve
表示相对路径
__dirname
:node提供的一个环境变量,表示当前路径
'dist'
:是我们自己起的文件名
配置devServe
查看文档 https://doc.webpack-china.org
直接把配置复制过来:
contentBase:需要提供一个静态文件的时候,这个静态文件在哪里输出
compress:整个服务要开启gzip压缩
port:服务要占用的哪个端口
安装:webpack-dev-server
安装各种loader
-D:表示开发依赖
丰富文件,测试能不能正常构建:
安装vue 和 vue-router
安装webpack
配置HtmlWebpackPlugin插件:帮我们自动化创建文件,
安装插件:
怎么添加#app?
成功
下载node-sass
出了错误,粘贴到下面这个网址里查找:
https://stackoverflow.com
真正应用中需要考虑的问题
怎么加入自适应js?
vue-loader:
js转rem 的loader
安装:
如何支持css module
把所有css提取到单个文件:
上线时才抽取:
可以传参数:
配置npm
配置eslint
每个目录下只支持一个配置文件,优先级从高到低;
文档:
插件:
代码格式化:
安装所需的插件: