webpackvuecli05

图片处理 url-loader
小于limit 时 编译为base64字符串形式
大于 file-loader进行加载，添加path路径
hash字符串展示在dist，不希望哈西 name:‘img/[name].[hash:8].[ext]’

将ES6转化为ES5 babel
npm install --SAVE-DEV Babel-core babel-preset-es2015

在webpack里配置vue
npm install vue --save
runtime-only 不能编译template
runtime-comperil 才能编译
webpack.config
resolve:
alias别名 ‘vue/dist/vue.es mi.js’
将only转换为comperil就可以选择版本

index.html一般是不改变的
改main.js中的template，vue源码会自动渲染到app中

把Vue中的内容全部抽离到组件中
把内容全部封装到app.js
然后在main.js中引入
将template methods全部剪切到vue.template中
还可以修改样式
npm install --save-dev vue-loader vue-template-compiler
在w.config里进行配置
test:/.vue$/,
use:[‘vue-loader’]
package.json
vue-loader:"^13.0.0"可以自动向后适配版本
14之后可能要plugin插件
组件树以app.vue为根组件，其他的会不停引入app.vue中形成组件树
去除拓展名 w.config extension:[’.js’,‘css’]

plugin插件 扩展器
loader转换器
BannerPlugin版权申明 导入webpack.config
plugins webpack.BannerPlugin

将html打包到dist里，用HtmlWebpackPlugin
npm install html-webpack-plugin --sav-dev
W.config
plugins newHtmlWebpackPlugin(template:‘index.html’)
按照index的格式模板进行生成

对js进行压缩 uglifyjs.webpack.plugin
npm install [email protected]–save -dev
引入插件 new

搭建本地服务器
npm install [email protected] --save-dev
w.config
devServe
contentBase:’./dist’
inline:ture
开发的时候就不需要了
web-dev-server不是在全局下载的，跳转到./bin
package.json
dev:webpack-dev-serve
测试的时候会自动测试
npm run build真实打包
自动打开浏览器
dev:webpack-dev-serve --open

配置文件的分离
base.config.js 公共的配置文件
prod.config.js
dev.config.js module.export
pro
npm install webpack - merge --save-dev
传入参数base.config
生产环境和开发环境最好进行分离
w.config
build:webpack --config ./build/prod.config.js
dev:webpack -dev -serve --open --config ./build/dev.config.js

webpack结束

Vue CLI脚手架 前提node 8.9以上版本 webpack
npm install -g @vue/cli
用脚手架3拉脚手架2
npm install @bue/cli-init -y
vue init webpack 项目名称 v2 英文名字
选择runtime-only运行效率更高
eslint 对js进行限制
unit tests单元测试
e2e 端到端测试 selenium 全自动测试

CLI2脚手架目录
build config都是对webpack的配置
package.json看这个根目录
npm run dev
node是使用C++V8引擎 chrome快速
js先生成字节码 二进制代码 V8可以直接翻译
主要看build dev
static静态资源，不会哈希编写，直接复制全部
.babelrc 把e6转e5 浏览器的适配 转化进行的配置
editorconfig对代码风格格式进行统一
eslintignore 不规范的代码进行忽略 eslint
gitignore忽视git有些不用上传
eslintrc.js 代码检测
postcelssrc.js css代码转换
package-lock.json 对于版本不同进行一个package的映射版本

安装CLI错误和ESlint错误npm-cache删除 如果脚手架安装不成功
V3 vue create 项目名称
preset配置
manually手动
public静态资源相当于V2的static
npm sun serve 跑起来
el和$mount#app差不多，没有区别，都会被render的内容替换掉el的挂载