1. 添加 index.html 模板
由于 vue 需要一个 div 元素来挂载所有内容，所以 html-webpack-plugin 需要使用模板自动生成 index.html 。
1.1 创建模板文件
- 在
src路径下创建public文件夹 - 将之前
dist自动生成的 index.html 文件，拷贝过来 - 编辑 index.html 文件，内容如下所说
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>7. 支持 vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<!-- vue 挂载元素 -->
<div id="app"></div>
</body>
</html>
1.2 修改 webpack.config.js 文件
plugins: [
// 输出路径下所有文件都将被清除
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
//指定模板路径
template: path.resolve(process.cwd(), 'public/index.html')
}),
],
2. 安装 vue 包
- vue：2.7.10 （2.x 最新版）
- vue-template-compiler：2.7.10（编译器的版本必须和基本的 vue 包保持同步）
- vue-loader：15.8.3（15.x 最新版）
- vue-style-loader: 4.1.3
yarn add vue@2.7.10
yarn add vue-template-compiler@2.7.10 -D
yarn add vue-loader@15.8.3 -D
3. 添加入口文件 main.js
import Vue from "vue";
import "./index.css"
import App from "./App.vue";
new Vue({
render: h => h(App),
}).$mount('#app');
4. 添加入口文件 App.vue
<template>
<div class="hello">
Hello webpack !
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
.hello {
color: red;
/*引用字体*/
font-family: "MyFont";
}
</style>
5. 修改 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
// 指定打包模式：development、production
mode: "development",
// entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串。
entry: './src/main.js',
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
// 开启HMR
hot:true,
open:true
},
plugins: [
// 输出路径下所有文件都将被清除
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
//指定模板路径
template: path.resolve(process.cwd(), 'public/index.html')
}),
// 这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。
// 例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。
new VueLoaderPlugin()
],
// 输出文件配置
output: {
// 文件名称
filename: '[name].bundle.js',
// 文件路径
path: path.resolve(process.cwd(), 'dist')
},
module: {
rules: [
//添加 vue 支持
{
test: /\.vue$/,
loader: 'vue-loader'
},
//添加 css 支持
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
//添加 图片 支持
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
//添加 字体 支持
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
use: [
'file-loader'
]
}
]
}
};
6. 启动项目
yarn start 后自动打开页面，可以看到红色的 Hello webpack !
