webpack mint-ui

webpack 常用包

1.新建webpack发布.js（抽离，压缩在publish中进行）
webpack.pub.config.js
在package.json中配置
pub:“webpack --config webpack.pub.config.js”
2.实现实时更新依赖的包： webpack-dev-server
3.创建一个内存中的html 文件：html-webpack-plugin
4.删除已经生成的包，安装clean-webpack-plugin --dev
在配置文件中 导入
const cleanWebpackPlugin = require(‘clean-webpack-plugin’)
在plugins中配置
plugins : [new cleanWebpackPlugin([‘dist’])]
5.loader加载器
npm i style-loader css-loader -D
npm i less-loader -D
npm i sass-loader -D
npm i url-loader file-loader -D
npm i bootstrap -S

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
7.分离第三方包
1.在配置文件中导入webpack
const webpack = require(‘webpack’)
2.entry中配置一个对象
entry：{//app和vendors任意取名
app: path.join(__dirname,’./src/main,js’),
vendors : [‘jquery’,‘vue’]
}
3.在plugins 中配置
new webpack.optimize.CommonsChunkplugin({
name:‘vendors’,//指定要抽离的入口名称
filename: ‘js/venders.js’
}
8.压缩js/压缩html文件
9.抽取css文件,压缩

Vue结合webpack

scoped(style 中控制范围） lang（用的是那种样式 less或者scss 普通的style)

//在webpack中配置.vue 组件页面的解析
1.将npm i vue -s将vue安装为运行依赖
2.运行npm i vue-loader vue-template-compiler -D
3.运行npm i style-loader css-loader -D 将解析转换css的包安装为开发依赖，因为.vue 文件中会
css样式
4.webpack.config.js中添加module规则{test:/.vue$/,use:‘vue-loader’}

//node中向外暴露成员的形式

module.exports 和 exports
在es6 中通过规范的形式，规定了es6中如何导入和导出模块
import 模块名称 from ‘模板字符串’
export default和export想外暴露成员：
export default {name:‘zs’,age: 20}

import mm from ‘/test.js’
console.log(mm)
注意：1. export default 向外暴露成员，可以使用任意的变量来接收
2. 在一个模板中，export default 只允许向外暴露1次
export var title = '小星星’
import {title as ‘title123’} from ‘/test.js’
注意： 使用export向外暴露的成员，只能使用{} 来接收，按需导出，导出的名称

//Vue vue-router
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

//npm i vue-router -s

mint UI
#Vue 1.x
npm install mint-ui@1 -s
#Vue 2.0
npm install mint-ui -S
//引入全部组件
import Vue from ‘vue’
import Mint from ‘mint-ui’
Vue.use(Mint);

//按需引入
npm install babel-plugin-component -D