[vue]webpack3最佳实践篇
vue-render:
https://www.cnblogs.com/iiiiiher/articles/9465311.html
es6模块的导入导出
https://www.cnblogs.com/iiiiiher/p/9060206.html
复习
webpack作用:
1.处理依赖
2.转换语法
// 注意： webpack, 默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件；
// 如果要处理 非JS类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器；
// 1. 如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D
// 2. 打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做 module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules 属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；
// 注意： webpack 处理第三方文件类型的过程：
// 1. 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则
// 2. 如果能找到对应的规则， 就会调用 对应的 loader 处理 这种文件类型；
// 3. 在调用loader 的时候，是从后往前调用的；
// 4. 当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到 bundle.js 中去
// 回顾 包的查找规则：
// 1. 找 项目根目录中有没有 node_modules 的文件夹
// 2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
// 3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
// 4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】
// 注意： 在 webpack 中， 使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式；
// 复习 在普通网页中如何使用vue：
// 1. 使用 script 标签 ，引入 vue 的包
// 2. 在 index 页面中，创建 一个 id 为 app div 容器
// 3. 通过 new Vue 得到一个 vm 的实例
// 总结梳理： webpack 中如何使用 vue :
// 1. 安装vue的包： cnpm i vue -S
// 2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
// 3. 在 main.js 中，导入 vue 模块 import Vue from 'vue'
// 4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
// 5. 使用 import login from './login.vue' 导入这个组件
// 6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
// 7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；
// 注意： export default 向外暴露的成员，可以使用任意的变量来接收
// 注意： 在一个模块中，export default 只允许向外暴露1次
// 注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员
// 注意： 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
// 注意： export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义
// 注意： 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收；
// 注意： 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；
- vue-router使用
// 1. 导入 vue-router 包
// 2. 手动安装 VueRouter
// 3. 创建路由对象
4. 将路由对象挂载到 vm 上
login
account
goodlist
// 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去；
npm i webpack@3 -g //全局安装webpack
webpack手动使用
先创建个目录, npm初始化下
npm init -y
目录如下
然后webpack手动编译
webpack src/main.js dist/bundle.js
会自动生成dist目录和dist/bundle.js
可见webpack命令核心使命是编译.
配置webpack的配置文件,使得执行webpack更加便利
webpack.conf.js
let path = require('path');
module.exports = {
entry: path.resolve('./src/main.js'), //输入
output: {
path: path.resolve('./dist'), //产出
filename: 'bundle.js'
}
};
自此执行webpack即可编译了
webpack
webpack-dev-server实现自动编译
每次修改代码,无需在手动执行webpack了
npm i webpack@3 webpack-dev-server@2 --save-dev
let path = require('path');
module.exports = {
entry: path.resolve('./src/main.js'), //输入
};
pakage.json
"dev": "webpack-dev-server --open --hot --port 3000"
1.自动打开浏览器
2.代码更新后热刷新
自动插入bundle.js
npm i html-webpack-plugin --save-dev
webpack.confg.js配置
let path = require('path');
//1.导入
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve('./src/main.js'),
//2.配置个模板
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
]
};
注意: 本质上预览的index.html和bundle.js路径在项目根目录下, 而非src下.
解析css
npm i style-loader css-loader --save-dev
npm i less less-loader --save-dev
解析图片和字体文件
npm i url-loader file-loader --save-dev
// 在js中引入图片需要import,或者写一个线上路径
import page from './01.jpg';
console.log(page); // page就是打包后图片的路径
let img = new Image();
img.src = page; // 写了一个字符串 webpack不会进行查找
document.body.appendChild(img);
- webpack.config.js
// 转化base64只在8192字节一下转化。其他情况下输出图片
{test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},
{test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'},
解析js高级语法
npm i babel-loader babel-core babel-plugin-transform-runtime --save-dev
npm i babel-preset-env babel-preset-stage-0 --save-dev
- webpack3对接babel加一下版本号:
npm i babel-loader@7.1.5 babel-core@6.26.3 babel-plugin-transform-runtime@6.23.0 --save-dev
npm i babel-preset-env@1.7.0 babel-preset-stage-0@6.24.1 --save-dev
.babelrc
{
"plugins": [
"transform-runtime"
],
"presets": [
"env",
"stage-0"
]
}
webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
// output: {
// path: path.resolve('./dist'),
// filename: 'bundle.js'
// }
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
{test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},
{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
{test: /\.vue$/, use: 'vue-loader'}
]
}
};
main.js
console.log('ok1111');
import './index.css';
class People {
name = 'maotai'
}
console.log(People.name);
index.css
body {
background-color: palegoldenrod;
background-image: url('./01.jpg');
}
babel补课
.babelrc
{
"plugins": [
"transform-runtime"
],
"presets": [
"env",
"stage-0"
]
}
// 注意： 如果要通过路径的形式
import './css/index.scss'
// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'
// 在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中
// 通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法
// 1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则：
// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
// 2.2 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
// 2.2.1 如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
// 2.2.2 哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
// 3. 在项目的 根目录中，新建一个 叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号
// 3.1 在 .babelrc 写如下的配置： 大家可以把 preset 翻译成 【语法】 的意思
// {
// "presets": ["env", "stage-0"],
// "plugins": ["transform-runtime"]
// }
// 4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法
支持vue-render渲染一个组件
npm i --save-dev vue-loader@13 vue-template-compiler@2
webpack.conf.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve('./src/main.js'),
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
module: {
rules: [
{test: /\.js/, use: "babel-loader", exclude: /node_modules/},
{test: /\.css/, use: ['style-loader', 'css-loader']},
{test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=8192'},
{test: /\.vue$/, use: 'vue-loader'}
]
}
};
main.js
import Vue from 'vue';
import App from "./App.vue";
let vm = new Vue({
el: "#app",
render: c => c(App),
});
App.vue
<template>
<div>app</div>
</template>
<script>
</script>
<style>
</style>
支持vue-render渲染多个组件
App
login
register
sumcom/login.vue
<template>
<div>login</div>
</template>
<script>
</script>
<style>
</style>
sumcom/register.vue
<template>
<div>register</div>
</template>
<script>
</script>
<style>
</style>
App.vue
<template>
<div>
<h1>account</h1>
<router-link to="/login">login</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from "./App.vue";
import login from "./subcom/login.vue";
import register from "./subcom/register.vue";
let routes = [
{path: '/login', component: login},
{path: '/register', component: register},
];
let router = new VueRouter({
routes
});
let vm = new Vue({
el: "#app",
render: c => c(App),
router
});
vue-router子组件
subcom/login.vue
subcom/register.vue
main/Account.vue
<template>
<div>
<h1>account</h1>
<router-link to="/account/login">login</router-link>
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
main/GoodList.vue
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from "./App.vue";
// 注入2个组件
import Account from "./main/Account.vue";
import GoodList from "./main/GoodList.vue";
//注入两个子组件
import login from "./subcom/login.vue";
import register from "./subcom/register.vue";
let routes = [
{path: '/GoodList', component: GoodList},
{
path: '/account',
component: Account,
children: [
{path: 'login', component: login},
{path: 'register', component: register},
],
},
];
let router = new VueRouter({
routes
});
let vm = new Vue({
el: "#app",
render: c => c(App),
router
});
附: package.json
{
"name": "01.webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-component": "^0.10.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
},
"dependencies": {
"bootstrap": "^3.3.7",
"mint-ui": "^2.2.9",
"vue": "^2.5.2",
"vue-resource": "^1.3.4",
"vue-router": "^3.0.1"
}
}
附webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
// output: {
// path: path.resolve('./dist'),
// filename: 'bundle.js'
// }
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
{test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},
{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
{test: /\.vue$/, use: 'vue-loader'}
]
}
};
需要理解的点
使用render渲染,App是根组件
所以搞清楚子组件的写法.
App.vue里的写法
子组件进阶
第一步: 用componet渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<login></login>
</div>
<template id="login">
<div>login</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let login = {
name: 'login',
template: "#login"
};
let vm = new Vue({
el: "#app",
data: {
msg: "maotai"
},
components: {
login
}
})
</script>
</body>
</html>
第二阶段: 用router渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/login">/login</router-link>
<router-view></router-view>
</div>
<template id="login">
<div>login</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
let login = {
name: 'login',
template: "#login"
};
let routes = [
{path: '/login', component: login}
];
let router = new VueRouter({
routes
});
let vm = new Vue({
el: "#app",
data: {
msg: "maotai"
},
router,
})
</script>
</body>
</html>
第三阶段: 用render渲染. 改变根组件
https://www.cnblogs.com/iiiiiher/articles/9465311.html
组件的scope属性实现原理: 外层div上,加css属性选择器
vue-cli使用
