webpack 安装
1、webpack 的安装有两种方式
1、全局安装 【 不推荐 】
2、局部安装 【 推荐 】
全局安装
1、安装 webpack v4+ 版本时，需要额外加安装 webpack-cli
npm install webpack webpack-cli -g
2、检查版本
webpack -v
3、卸载
npm uninstall webpack webpack-cli -g
说明
1、webpack-cli 是执行 webpack 的工具
2、webpack 4.x 版本以后，剥离出了 webpack-cli ，所以这里我们需要单独下载它
3、全局安装 webpack ，这会将你项目中的 webpack 锁定到指定版本
4、不同的项目中因为 webpack 依赖不同版本而导致冲突，构建失败
局部安装
1、初始化 npm 配置文件
npm init -y
2、安装核心库
npm install --save-dev webpack
3、安装命令行工具
npm install --save-dev webpack-cli
4、安装最新到 4.x稳定版本
npm i -D webpack@4.44.0
5、 安装指定版本
npm i -D wenpack@<version>
6、yarn 安装
yarn add webpack webpack-cli -D
基于 webpack 从零构建 vue3.x 项目 构建流程示例
第一步 基础流程 配置
1、新建项目文件夹
2、在 文件下 执行
npm init -y 【 -y 可以跳过提问 自动生成】
此时 会生成一个 只有 package.json 文件的项目
3、安装 webpack 和 webpack-cli
yarn add webpack webpack-cli -D
4、在 文件下 新建 src 文件夹
5、在 src 里 新建 main.js
6、在 文件夹 下 新建 index.html + webpack.config.js
7、添加 webpack.config.js 的相关基础配置项
webpack.config.js 配置如下
const path = require('path')
module.exports = {
mode: 'development', // 环境模式
entry: path.resolve(__dirname, './src/main.js'), // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'js/[name].js' // 打包完的静态资源文件名
}
}
8、修改 package.json 的 script 属性
"scripts": {
"dev": "webpack --config ./webpack.config.js"
}
9、运行命令 yarn dev 成功 生成 dist 文件夹 打包成功
基础 webpack.config.js 配置
const path = require('path')
module.exports = {
mode: 'development', // 环境模式
entry: path.resolve(__dirname, './src/main.js'), // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'js/[name].js' // 打包完的静态资源文件名
}
}
第二步 添加 html-webpack-plugin 插件 并配置
1、html-webpack-plugin 的作用
当使用 webpack 打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中
2、html-webpack-plugin 的安装
yarn add html-webpack-plugin -D
3、html-webpack-plugin 在 webpack.config.js 下引入 并 配置 使用 【 示例 基础配置 】
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./index.html"), // 要使用的 html 模板地址
filename: "index.html", // 打包后输出的文件名
title: "从零开始搭建 vue 开发环境", // index.html 模版内 通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量
}),
]
}
4、html-webpack-plugin 更多配置
1、html-webpack-plugin 默认将会在 output.path 的目录下创建一个 index.html 文件， 并在这个文件中插入一个 script 标签，标签的 src 为 output.filename
2、在实际的项目中，需要自定义一些 html-webpack-plugin 的配置， 像指定生成目录和文件， 使用指定模版生成文件， 更改 document.title 信息等， 这就更改默认配置来实现
第三步 引入 Vue 3.x 进行配置
1、安装 vue3.x
yarn add vue@next -S
1、这里要使用 vue@next 才能成功引入 Vue 3.x，否则就会引入 2.x 的最高版本
2、这里 -S 是指生产环境需要用到的包 — dependencies
3、同理 -D 表示开发环境需要的依赖
2、我们在 src 目录下新建 App.vue 组件
3、配置 main.js 文件
把 App.vue 挂载到 index.html 的 <div id="caix"></div> 节点上
import { createApp } from 'vue' // Vue 3.x 引入 vue 的形式
import App from './App.vue' // 引入 APP 页面组建
const app = createApp(App) // 通过 createApp 初始化 app
app.mount('#caix') // 将页面挂载到 root 节点
4、执行 yarn dev 报错
1、需要适当的 loader 程序来处理 .vue 文件类型，当前没有配置任何 loader 来处理此文件
2、必须让它变成浏览器认识的语言，那就是 js ，于是需要添加下面几个插件
1、vue-loader
它是基于 webpack 的一个的 loader 插件，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 loader 去处理如 style-loader 、 less-loader 等，核心的作用就是 提取
2、@vue/compiler-sfc
Vue 2.x 时代，需要 vue-template-compiler 插件处理 .vue 内容为 ast ， Vue 3.x 则变成 @vue/compiler-sfc
安装的时候注意 vue-loader 需要通过 yarn add vue-loader@next 安装最新版本。
5、webpack.config.js 配置 VueLoaderPlugin
1、VueLoaderPlugin 的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块
2、例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块
3、代码示例如下
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 最新的 vue-loader 中，VueLoaderPlugin 插件的位置有所改变
const { VueLoaderPlugin } = require('vue-loader/dist/index')
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.vue$/,
use: [
'vue-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './index.html'),
filename: 'index.html',
title: '手搭 Vue 开发环境'
}),
// 添加 VueLoaderPlugin 插件
new VueLoaderPlugin()
]
}
6、App.vue 文件 添加 样式
<style>
h1 {
color: red;
}
</style>
执行 yarn dev 报错
少 loader 了，我们还需增加下面几个插件
1、style-loader
将 css 样式插入到页面的 style 标签中
2、css-loader
处理样式中的 url ，如 url('@/static/img.png') ，这时浏览器是无法识别 @ 符号的
注意 vue-style-loader 是服务端渲染的时候，需要的 loader，包括 less-loader、sass-loader 都是在用到的时候，才去添加
7、安装 style-loader 和 css-loader 并 配置
module: {
rules: [
...
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
...
]
}
8、添加一个必备小插件 clean-webpack-plugin
clean-webpack-plugin 插件的作用是每次打包的时候，都会把 dist 目录清空，防止文件变动后，还有残留一些老的文件，以及避免一些缓存问题
webpack.config.js 配置如下
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new CleanWebpackPlugin()
]
构建流程总结
基于 webpack 从零构建 vue3.x 项目
1、新建项目文件夹，初始化 【 npm init 】生成 package.json 文件
2、安装 webpack 和 webpack-cli
3、建立项目相关文件 【 src 文件夹 index.html main.js】
4、进行基础 webpack.config.js 配置
5、添加 html-webpack-plugin 插件 并配置
6、添加 vue3.x yarn add vue@next -S
7、建立 App.vue 文件 配置 main.js 并挂载 到根节点
8、添加 vue-loader 、@vue/compiler-sfc 、style-loader 、css-loader 并配置
9、添加 clean-webpack-plugin 插件
基于以上配置的 webpack.config.js 配置文件
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index"); // 最新的 vue-loader 中，VueLoaderPlugin 插件的位置有所改变
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "development", // 环境模式
entry: path.resolve(__dirname, "./src/main.js"), // 打包入口
output: {
path: path.resolve(__dirname, "dist"), // 打包出口
filename: "js/[name].js", // 打包完的静态资源文件
},
module: {
rules: [
{
test: /\.vue$/,
use: ["vue-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./index.html"), // 要使用的 html 模板地址
filename: "index.html", // 打包后输出的文件名
title: "从零开始搭建 vue 开发环境", // index.html 模版内 通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量
}),
new CleanWebpackPlugin(),
new VueLoaderPlugin(), // 添加 VueLoaderPlugin 插件
],
};