构建工具

项目准备

• 创建目录
  • 使用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

每个目录下只支持一个配置文件，优先级从高到低；
文档：

插件：

代码格式化：

安装所需的插件：