5 Vue（webpack+插件+cli2+cli3）

webpack
webpack插件
cli2
cli3

webpack：在命令行输入命令，将src文件打包到dist

步骤

1. 安装npm+node+webpack
2. 创建package.json文件，（1）设置运行快捷键（2）包之间依赖关系
3. 创建webpack.config.js文件，设置入口/入口位置

定义：简单任务用gulp，模块化开发项目需要用webpack

安装node+webpack

//1.安装node
命令行：查看当前node版本  `node -v`
//2.安装npm
命令行： 全局安装 
（1）`npm install  webpack@3.6.0 -g`
命令行： 按项目安装 
（1）cd 项目的根目录
（2）`npm install  webpack@3.6.0 --save-dev`

package.json
来源1：命令行：npm init （node初始化，创建依赖关系文件）
来源2：如果别人的项目发package.json文件后，可下载依赖包：命令行：npm install
作用1：设置运行webpack快捷命令
作用2：存储开发/运行时依赖的文件包版本

"srcipt":{
"build" :"webpack"  //执行时，build在本地查找，webpack在全局查找
}
//这和下载插件时npm install -seve -dev 的关系
"devdependencies" :{"webpack :3.6.0"}//开发时依赖
"dependencies":{各种插件的名称和版本}//运行时依赖

webpack.config.js
来源：手动创建
作用1：设置webpack命令的入口/出口文件
作用2：配置loader+plugin插件

//（1）引用path模块设置绝对路径
let path = require("path")
//（2）设置入口文件地址和出口文件地址
module.exports = {
    entry: "src入口文件地址",  //入口
    output: {    //出口 
        path: path.resolve(__dirname, "dist"),   //绝对路径
        filename: "文件名称"  //名称
    }
}

node_modules
来源：npm下载后自动生成
作用：存储webpack文件
package-lock.json
src
dist
html文件

webpack插件（loader+plugin）

loader
（1）npm下载对应loader
（2）webpack.config.js配置文件

loader名称	解释	地址
style-loader	css	地址
css-loader	css	地址
less-loader	less	地址
url-loader	图片大小	地址
file-loader	图片大小	地址
babel-loader	es6转化成es5（p81）	地址
vue-loader	p81
vue-template-compiler	p81

//webpack.config.js配置文件  举例

//（1）引用path模块设置绝对路径
let path = require("path")
//（2）设置入口文件地址和出口文件地址
module.exports = {
    entry: "src入口文件地址",  //入口
    output: {    //出口 
        path: path.resolve(__dirname, "dist"),   //绝对路径
        filename: "文件名称"  //名称
    }
    module: {           //从此处举例
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
  
}

plugin
（1）npm下载插件
（2）webpack.config.js配置文件

功能	解释	地址
	声明版权的插件
	将根目录的html文件打包进dist的插件
	压缩 JS代码
	搭建本地服务器

//webpack.config.js配置文件  举例

//（1）引用path模块设置绝对路径
let path = require("path")
//（2）设置入口文件地址和出口文件地址
module.exports = {
    entry: "src入口文件地址",  //入口
    output: {    //出口 
        path: path.resolve(__dirname, "dist"),   //绝对路径
        filename: "文件名称"  //名称
    }
    plugins：[new  HTMLwebpackplugin（ {
        template:“index.html（根目录的html文件）”
    }）,其他配置代码]
  
}

cli2

查看安装的脚手架版本   vue  --version 
下载cli2            npm install -g @vue/cli-init
创建项目 cli2        vue init webpack 项目名称
打开本地服务器(在package.json内查看)  npm run dev
打包                npm run build

创建项目弹出内容	解析
project name[]	创建项目名字
project description	项目描述
author	作者
vue build	runtime +compiler或者runtime only（和组件的写法有关）
install vue-router	下载路由
Use ESlink	规范js代码，否则编译器报错（空格，分号，双引号）
set up unit tests	单元测试
set up e2e	端到端测试（测试的活）

生成文件结构	解析
src	开发代码
node_modules	第三方模块
index.html	入口html文件，最后会打包到dist
package.json	包的信息，大概的版本
package-lock.json	包的真实信息，可能差距小版本
config文件夹	webpack的配置
build文件夹	webpack的配置（webpack.config.js）
static文件夹	静态文件， 原封不动复制到dist文件夹内
babelrc文件	es6转化成es5， 不好理解
deitorconfig	代码统一， 字符集，空格
eslintignore	不用检测哪些文件是否有格式问题
gitignore	传递到git时，这些文件不需要上传
eslintrc	代码检测配置
post css	转化css时用的
readme	文档

cli3

查看安装的脚手架版本   vue  --version 
下载cli3            npm install -g@vue/cli
创建项目 cli3        vue creat 项目名称
打开本地服务器(在package.json内查看)  npm run dev
打包                npm run build

创建项目弹出内容	解析
选择配置	自动配置 / 手动配置， 空格为选中， 把eslintrc可以关掉
包的配置信息存储在	新建文件夹（一般选择这个）或者package.json
是否将上面的配置保存成【自动配置】
取个名字
选择npm

生成文件结构	解析
src	开发代码
node_modules	第三方模块
package.json	包的信息，大概的版本
package-lock.json	包的真实信息，可能差距小版本
public文件夹	静态文件， 原封不动复制到dist文件夹内，index.html 放在这
browserslistrc	配置浏览器相关内容， 大于1%， ie8以上等
gitignore	传递到git时，这些文件不需要上传
babelrc文件	es6转化成es5， 不好理解
post css	转化css时用的
readme	文档

修改配置文件

方式1：启动配置服务器 vue ui

1.任何目录的cmd ：vue ui
2.点击导入【用命令创建的li3项目】
3.点击插件，查看有哪些插件
4.项目配置：输出目录，静态资源，启动运行时编译（runtime +compiler/runtime only），编译css的文件
5.任务：在ui这里运行一些任务

方式2:
打开node_modules
找@vue
cli-service
webpack.config.js
根据require慢慢一层层的找
或者在目录文件下新建一个配置文件， vue.config.js  打包的时候会添加到webpack中，里面写modules.exports即可