1,了解导入和导出模块
导出函数或对象
//使用node语法来进行导出函数
module.exports = function(){
console.log('我是bar--node')
}
//使用ES6语法来进行导出函数 这里是导出默认成员 注意不能有多个default 只能有一个
export default function(){
console.log('我是bar--ES6')
}
//也可以用来导出对象
export default {
'name':'kevin',
'age':1233
}
//导出非默认成员
// Node 导出非默认成员
// exports.x = 'xxxx'
// exports.y = 'yyyyy'
//ES6导出非默认成员 可以导出多个非默认成员
export const x = 'xxxx'
export const y = 'yyyy'
export function add(a,b){
return a+b
}
导入函数或对象
//这里是node的导入语法
// var bar = require('./bar')
// bar();
//es6 导入函数 导入默认成员
// import bar from './bar'
// bar();
//ES6 导入对象
// import bar from "./bar";
// console.log(bar);
//ES6导入非默认成员
//通过 解构赋值 的方式 来加载成员
//x对应的是bar.js 中的成员函数
// import {x,y,add} from './bar'
// console.log(x,y,add(10,20))
//一次性导入所有的成员 会把默认成员和非默认成员全部导入
// import * as bar2 from './bar'
//将样式文件css以模块化引入 注意css文件需要 style-loader 及 css-loader 插件
import './css/style.css'
2,webpack基本命令
建议大家webpack在本地目录安装,不要全局安装。这样配置跟着目录走,别人用起来也方便,也避免了别人使用的时候跟你的版本不一致,出现一些无法预料的问题
1,npm init -y 生成配置文件 package.json
2,npm i --save-dev webpack 安装webpack
3,npm i -D webpack-cli 安装webpack-cli -D 代替了 --save-dev
4,webpack ./js/main.js -o ./js/bundle.js 来打包文件 node导入 ES6之前语法
3,package.json配置
在vscode控制台中,不能直接使用webpack -v等命令,需要在package.json中进行配置
"scripts": {
"show": "webpack -v",
"build": "webpack",
"watch": "webpack --watch",
"start": "node ./src/main.js"
},
key值为别名,值为需要执行的命令,比如说要执行打包命令 直接 npm run build
4,打包css资源和图片资源
1,安装插件
css-loader 是 将 css 装载到 javascript;
style-loader 是让 javascript 认识 css。
安装打包css插件 npm install --save-dev style-loader css-loader
安装打包文件插件 npm install --save-dev file-loader
注意这里style-loader插件最好版本不要过高,因为在实际使用中出现了与后边的一个file-loader冲突的情况,打包出来了两张图片,无法正常使用,建议使用npm i --save-dev style-loader@1.1.3
2,修改 webpack.config.js
//引入node中的path模块,处理文件路径的小工具
const path = require('path')
//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//导出一个webpack具有特殊属性配置的对象
module.exports = {
mode:'development', //development测试环境 "development" | "production" | "none"
//入口
entry:'./src/main.js', //入口模块文件路径
//出口
output:{
// path:'./dist/bundle', 错误的 要指定绝对路径
path:path.join(__dirname,'./dist/'),
filename:'bundle.js'
},
//配置插件
plugins:[
new HtmlWebpackPlugin({
//指定要打包的模板页面
//就会将index.html 打包到 与bundle.js 所在同一目录下面
//同时再 index 中会自动引入bundle.js
template:'./index.html'
})
],
module:{
rules:[ //配置转换规则
{
test:/\.css$/, //正则表达式匹配 匹配 .css 文件资源
use:[ //顺序不要写错 根据外国人 习惯来的顺序
'style-loader', //js识别css
'css-loader', //css 转换为js
]
},
{
test:/\.(png|svg|jpg|gif)$/, //正则表达式匹配 匹配 .css 文件资源
use:[
'file-loader'
]
}
]
}
}
5,文件目录结构及html-webpack-plugin使用
webpack-demo4
|— index.html
|- src
|- bar.js
|- main.js
|- webpack.config.js
|- package.json
如果直接访问根目录下的 index.html ,那么图片资源路径就无法访问到。
解决方案:就是把 index.html 放到 dist 目录中。
但是 dist 是打包编译的结果,而非源码,所以把 index.html 放到 dist 就不合适。
而且如果我们一旦把打包的结果文件名 bundle.js 改了之后,则 index.html 也要手动修改。
综合以上遇到的问题,可以使用一个插件: html-webpack-plugin 来解决
html-webpack-plugin的作用:
1,将index.html 打包到 bundle.js 所在目录中
2,同时也会在 index.html 中自动的引入bundle.js
html-webpack-plugin 的具体配置在上边第四步中已经贴出来了
6,webpack-dev-server
问题:每一次手动打包很麻烦,打包后还需要手动刷新浏览器。
解决:采用 webpack 提供的工具: webpack-dev-server ,它允许在运行时更新所有类型的模块后,而无需手动打 包和刷新页面,会自动打包和刷新页面。可以很大程度提高开发效率
1,安装依赖
npm install --save-dev webpack-dev-server
2,修改 webpack.config.js 配置,完整版webpack配置在文章最后
module.exports = {
//实时重新加载
devServer:{
//目标路径 注意 注意 高版本的webpack 不能使用contentBase而是要用static
// contentBase:'./dist'
//这里也可以这样写 static: './dist',
static:{
directory: path.join(__dirname, './dist'),
},
},
}
3,修改 package.json 的 scripts --open 选项打包成功,自动打开浏览器
"scripts": {
"show": "webpack -v",
"build": "webpack",
"watch": "webpack --watch",
"start": "node ./src/main.js",
"dev": "webpack-dev-server --open"
},
这里我命名为dev 所以执行到这一步,命令行中输入 npm run dev 就会自动打包且自己打开浏览器。这时候修改里边的css,js等,就会自动打包并刷新页面
7,安装 Bable
为了解决浏览器兼容性问题。安装后打包,会自动转换为ES5语法
1,安装
npm install -D babel-loader @babel/core @babel/preset-env
2,配置 webapck.config.js
module:{
rules:[ //配置转换规则
//解决兼容性问题 集成babel ES6转ES5
{
test: /\.m?js$/,
//排除这些目录下面的代码 不需要转换
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // preset-env babel中内置的转换规则工具
}
}
},
]
},
这时候执行 npm run dev 会发现ES6语法已经转为ES5
8,Vue-Loader 打包Vue单文件组件
1,安装 vue-loader 和 vue-template-compiler 依赖
npm install -D vue-loader vue-template-compiler
2,修改 webpack.config.js 配置
//引入 vue-loader 插件
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
//配置插件
plugins:[
//使用vue-loader 必须引入
new VueLoaderPlugin(),
],
module:{
rules:[ //配置转换规则
//处理.vue单文件组件
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
}
3,在 src 目录下创建 App.vue
<template>
<div>
<p>app根组件</p>
</div>
</template>
<script>
</script>
<style>
</style>
4,在 main.js 中导入 App.vue
//解决方式2 在webpack中进行配置 完整版vue.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
template:'<App />',
})
9,webpack与 Vue 单文件组件
1,创建项目
webpack
|- index.html // 单页面入口
|- src // 存放源文件目录
|- main.js // 打包入口文件
|- App.vue // 根组件,替换index.html中的 #app 处
|- router.js // 路由
|- components // 存放组件目录
|- webpack.config.js // webpack 配置
|- package.json // `npm init -y` 初始化项目
|- node_modules // 依赖目录
2. 安装 vue 模块
npm i vue
//我这里用的是vue版本,建议大家执行的时候加上版本号, 不然下载的会是最新版 npm i vue@2
3. index.html 单页面入口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
4. App.vue 根组件
<template>
<!-- 组件模板,.vue文件中可只出现 template 标签 -->
<div>
<h1>App 根组件</h1>
</div>
</template>
5, main.js 打包入口文件
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
template: '<App />',
components: {App}
})
6,打包构建 npm run build
无报错,但是打开浏览器发现并没有渲染出来
在node_modules目录,找到刚刚安装的vue目录,打开目录下的package.json文件,找到main属性
main": "dist/vue.runtime.common.js"
import Vue from 'vue' 导入的vue文件默认是 package.json 中的 main 属性指定的文件,可以发现它并 不是我们熟悉的 vue.js 完整版文件,import 的是运行时版本,不是完整版,参考vue官方文档:
- 完整版:同时包含编译器和运行时的版本。
- 编译器:用来将 template 的模板字符串编译成为 JavaScript 渲染函数的代码。
- 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。没有编译器功能,无法编译模板.
也就是说,template 渲染的字符串,运行时版本 vue 无法解析
解决办法:
第一种:import 导入完整版 vue
import Vue from 'vue/dist/vue.js'
第二种:
1. 依旧 import Vue from ‘vue’
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
template: '<App />',
components: {App}
})
2,webpack.config.js 增加一个属性
module.exports = {
// 解析完整版 vue.js
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
}
最优解办法
1. 以上两种方法都可以解决。但是完整版比运行时 vue 大,性能不如运行时 vue。
2. 官方更推荐运行时 vue,因为 vue-loader 可以编译 .vue 文件,所以事实上是不需要 vue 的编译功能的, 只需要渲染功能即可。
3. 而 template 自身没有渲染功能,最终渲染底层都是通过 render 函数够实现的。如果写 template 属性,则需 要编译成 render 函数,这个编译过程对性能会有一定损耗。
4. 所以使用运行时 vue 通过 render 函数来渲染组件即可。
最优解:Vue 实例中,不使用 template ,而是直接使用 render 函数来渲染组件即可,但是注意,上面方法 webpack.config.js 添加的配置记得取消掉
import Vue from 'vue'
import App from './App.vue'
// new Vue({
// el:'#app',
// //template 实质上没有编译和渲染功能,而当前编译功能 可以直接采用v-loader来进行编译
// //而渲染功能实质上是通过render 函数渲染组件
// // template:'<App />',
// // render:function(h){ //h是一个函数,这个函数用于要接收渲染的组件
// // return h(App) //函数的返回值就是渲染的结果
// // },
// // 箭头函数简写1
// // render: h =>{
// // return h(App)
// // }
// //箭头函数简写2
// // render: h => h(App)
// // components:{App}
// })
//最简单的写法
new Vue({
render: h => h(App)
}).$mount('#app')
单文件完整版App.vue
<template>
<div>
<p>app根组件</p>
<foo></foo>
<h2>{{property}}</h2>
</div>
</template>
<script>
//要使用某个组件 先导入再使用
import Foo from './components/Foo.vue'
//导出一个默认的成员对象 ,它就是当前组件对象。可以直接在对象中使用Vue的选项
export default{
data() {
return {
property: 'value',
};
},
//template:此选项不用写,因为上边的template标签代表的就是当前的组件模板
//引用子组件 Foo 缩写形式 Foo:Foo 不缩写
components:{
Foo
}
}
</script>
<style scoped >
/* scoped 只作用于当前的组件有效 不然会传递到其它父子组件中 */
h2{
color: aqua;
}
h3{
color: red;
}
h1{
color: green;
}
</style>
单文件完整版Foo.vue
<template>
<div>
<h1>这是第二个子组件111111</h1>
</div>
</template>
<script>
//如果不写js代码 可以不需要script
//一般采用的是导出一个默认的成员对象
export default {
}
</script>
<style scoped>
/* */
h1{
color: yellow;
}
</style>
10,模块热替换(HMR)
模块热替换无需完全刷新页面,局部刷新的情况下就可以更新,但是要注意对 js 文件是无效果的,如修改main.js不会热替换的
在这里请确保已经安装了 webpack-dev-server 模块
接下来就是webpack.config.js的配置,直接上前边所有步骤的完整版
//引入node中的path模块,处理文件路径的小工具
const path = require('path')
//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//引入 vue-loader 插件
const { VueLoaderPlugin } = require('vue-loader')
//1,导入webpack
const webpack = require("webpack");
//导出一个webpack具有特殊属性配置的对象
module.exports = {
mode:'development', //development测试环境 "development" | "production" | "none"
//入口
entry:'./src/main.js', //入口模块文件路径
//出口
output:{
// path:'./dist/bundle', 错误的 要指定绝对路径
path:path.join(__dirname,'./dist/'),
filename:'bundle.js'
},
//配置插件
plugins:[
new HtmlWebpackPlugin({
//指定要打包的模板页面
//就会将index.html 打包到 与bundle.js 所在同一目录下面
//同时再 index 中会自动引入bundle.js
template:'./index.html'
}),
//使用vue-loader 必须引入
new VueLoaderPlugin(),
//3,配置热模块加载对象
new webpack.HotModuleReplacementPlugin(),
],
//实时重新加载
devServer:{
//目标路径 注意 注意 高版本的webpack 不能使用contentBase而是要用static
// contentBase:'./dist'
//这里也可以这样写 static: './dist',
static:{
directory: path.join(__dirname, './dist'),
},
//2,开启热模块加载
hot: true,
},
module:{
rules:[ //配置转换规则
{
test:/\.css$/, //正则表达式匹配 匹配 .css 文件资源
use:[ //顺序不要写错 根据外国人 习惯来的顺序
'style-loader', //js识别css
'css-loader', //css 转换为js
]
},
{
test:/\.(png|svg|jpg|gif)$/, //正则表达式匹配 匹配 .css 文件资源
use:[
'file-loader'
]
},
//解决兼容性问题 集成babel ES6转ES5
{
test: /\.m?js$/,
//排除这些目录下面的代码 不需要转换
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // preset-env babel中内置的转换规则工具
}
}
},
//处理.vue单文件组件
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
//解析完整版的vue.js
// resolve:{
// alias:{
// 'vue$':'vue/dist/vue.js'
// }
// }
}