目录
webpack.config.base.js 配置文件中编写通用配置... 8
在webpack.config.dev.js编写开发配置... 9
在webpack.config.dev.js编写生产配置... 10
Vue3+与Vue2并存
目前大多数新项目都会采用Vue3+进行开发，然而在公司还需要维护一些之前使用老旧版本Vue2开发的项目，此时则需要我们在电脑上安装vue2与vue3+了
Vue依赖Node环境
现在本地安装Node.js 检测node是否安装成功 node –v
之所以能够在命令行直接使用node进入node环境 是因为在系统环境变量中已经配置了node.exe 所在的目录
先来说说npm安装命令的参数-g
-g参数可以将js包进行全局安装，即安装到当前用户目录下
比如使用命令 npm install -g @vue/cli 即可以安装最新版本vue到用户目录下
使用where vue 可以查看全局vue所在目录
E:\>where vue
C:\Users\Administrator\AppData\Roaming\npm\vue
C:\Users\Administrator\AppData\Roaming\npm\vue.cmd
之所以能够在任何位置都使用vue指令是因为在安装node是自动配置了npm 环境变量即目录C:\Users\Administrator\AppData\Roaming\npm
在指定目录安装vue2版本(使用局部安装)
比如在以下目录 D:\Program Files\vue2
- 先cd到D:\Program Files\vue2目录
- 使用非全局安装的命令npm install vue-cli即可将vue2的最新版本安装到该目录
此时即可在D:\Program Files\vue2\node_modules\.bin目录使用vue2相关指令
注意：目前脱离了D:\Program Files\vue2\node_modules\.bin目录vue2命令失效
- 将D:\Program Files\vue2\node_modules\.bin目录下的vue与vue.cmd重命名为vue2与vue2.cmd
- 将vue2配置环境变量，效果就是在任意目录都可以使用vue2相关指令
在win10中右键此电脑=>属性=>高级系统设置=>环境变量=>系统变量=>选path
=>选择编辑，然后新建将D:\Program Files\vue2\node_modules\.bin目录拷贝即可
5、 重启命令行
Vue2创建项目
vue2 init webpack vue2demo
Webpack的知识
Vue3+版本与之前的版本有了很大的变化，少了很多webpack的配置，这让我们关注与Vue的开发，不需要过多的关注webpack配置问题，然而webpack作为前端开发的利器，还是非常有必要掌握的
WebPack主要概念：
- 入口：webpack从哪些文件开始构建依赖关系，比如main.js，other.js
- 打包结果：webpack需要将构建好的文件放入哪个位置，比如dist目录，bundle.js
- 加载器：webpack可以将哪些类型文件，加载需要通过加载器加载对应类型文件，放入依赖，打包，比如home.vue，main.css
- 插件：webpack通过固定插件来实现自身功能，比如index.html 的自动生成和压缩需要使用到插件html-webpack-plugin
- 模式：开发模式（开发过程中使用）、生成模式（项目部署），一般开发模式和生产模式都会有独立的配置文件，依赖通用配置文件
Npm项目初始化
npm init –y
(需要不在中文目录)
安装webpack
npm install webpack webpack-cli --save-dev
使用webpack打包js
安装axios
npm install xios –S
新建目录结构
index.html 中引入最终会得到的包 main.js
<script src="main.js" type="text/javascript" charset="utf-8"></script>
在index.js中测试axios使用
// 测试axios
import axios from 'axios'
axios.get("https://yesno.wtf/api").then(res=>{
console.log(res.data);
})
使用npx webpack 打包index.js得到的main.js中既包含自己编写代码，又包含axios源码
同理可以打包 其他的js文件
Webpack的配置文件
const path = require('path');
module.exports = {
// 入口
entry: './src/index.js',
// 打包结果
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Npx webpack 可以使用该配置文件打包
注意配置文件名默认为webpack.config.js
创建npm指令
在package.json中script添加指令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
之后就可以使用 npm run build 编译打包
注意需要将index.html 中的引入的main.js内容换成 bundle.js
Webpack使用加载器加载对应资源
加载css
安装加载器
npm install --save-dev style-loader css-loader
配置加载器
在webpack.config.js 中rules中添加加载规则
{
// 加载文件类型
test: /\.css$/,
// 使用何种加载器
use: [
// 加载器列表 按顺序从又向左
'style-loader',
'css-loader'
]
},
在src目录下新建assets/css/main.css文件
编写样式
* {
color: red;
}
在main.js引入样式
// 测试样式css加载
import './assets/css/main.css'
重新打包 npm run build 页面中文件变红
加载图片
安装加载器
npm install --save-dev file-loader
配置加载器
// 配置图片类型加载器
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
新建src/assets/image目录 放入head.png
在index.html中编写元素
<div class="head"></div>
在main.css中编写样式
.head{
width: 100px;
height: 100px;
background-image: url('./image/head.png');
}
重新编译 npm run build
图片会被自动放入dist中，并且建立依赖关系
运行index.html即可看到图片
配置多个入口
在src文件夹新建other.js
将index.js中的内容复制到other.js
在index.js中编写测试输出
console.log("index入口");
修改配置的入口与出口内容
// 入口
entry:{
main:'./src/index.js',
other:'./src/other.js'
},
// 打包结果
output: {
// filename: 'bundle.js',
filename:'[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
此时重新打吧会生成多个bundle.js 注意修改index.html中的引入需要重新编写
配置动态html
安装生成htm插件
npm install --save-dev html-webpack-plugin
配置插件 在webpack.config.js中修改配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
title: '自动生成的html',
template: 'index.html',
inject: true
})
]
建立生成index.html的参考文件 在项目根目录新建index .html作为参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>
<div id="app">
vue
</div>
<div class="head"></div>
<!-- 自动生成的bundle会被自动注入在下方 -->
</body>
</html>
Dist自动清理插件
安装插件
npm install clean-webpack-plugin --save-dev
配置插件
const { CleanWebpackPlugin }= require('clean-webpack-plugin');
//在plugins中添加配置
new CleanWebpackPlugin(),
此时重新npm run build 则可以重新编译打包，并且清理dist内容
配置热更新
安装开发服务器
npm install --save-dev webpack-dev-server
修改配置文件
devServer: {
contentBase: './dist'
},
添加一个 script 脚本
"serve": "webpack-dev-server --open",
配置生产环境与开发环境配置分离文件
在根目录新建config文件夹 内创建配置文件
webpack.config.base.js、
webpack.config.dev.js、
webpack.config.prod.js
webpack.config.base.js 配置文件中编写通用配置
// 通用webpack配置参数
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
// 入口文件 将那个js文件作为包的入口文件
entry:{
main:'./src/index.js',
},
// 配置输出文件
output: {
// filename: 'bundle.js',
filename:'[name].bundle.js',
path: path.resolve(__dirname, '../dist')
},
// 配置加载器
module: {
rules: [
{
// 加载文件类型
test: /\.css$/,
// 使用何种加载器
use: [
// 加载器列表 按顺序加载
'style-loader',
'css-loader'
]
},
// 配置图片类型加载器
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: '自动生成的html',
template: 'index.html',
inject: true
})
],
};
在webpack.config.dev.js编写开发配置
const merge = require('webpack-merge');
const base = require('./webpack.config.base.js');
// 将 开发独有配置参数 与通用配置参数合并
module.exports = merge(base, {
entry:{
// other.就是是测试功能 仅在开发模式下需要
other:'./src/other.js'
},
devServer: {
contentBase: './dist',
port: 8088,
open:true
},
});
在webpack.config.dev.js编写生产配置
const merge = require('webpack-merge');
const base = require('./webpack.config.base.js');
// 将 生产独有配置参数 与通用配置参数合并
module.exports = merge(base, {
// 配置调试工具 资源映射 图 仅在生产模式下需要
devtool: 'eval',
});
修改npm配置，指定生产开发配置文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config config/webpack.config.prod.js",
"serve": "webpack-dev-server --config config/webpack.config.dev.js"
},
Webpack搭建vue工程
安装Vue
npm install vue
安装vue文件加载器
vue-loader版本采用此处采用15.9.2
npm install vue-loader vue-template-compiler –S
配置vue加载器
{
test: /\.vue$/,
use: [
'vue-loader'
]
}
配置插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
new VueLoaderPlugin(),
在main.js中编写vue实例
将index.js改名为main.js 作为Vue入口文件
在main.js同级目录新建App.vue
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:"#app",
render:h=>h(App)
})
重新打包编译即可
安装vue-router,vuex，之后使用流程略