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-server2，修改 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-env2，配置 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-compiler2，修改 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@23. 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'
// }
// }
}
1538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
