# webpack 实践(0): 项目基础搭建
在 webpack 入门 一文中我们已经对 webpack
有一个基本的了解了,webpack
实践系列文章将从零开始一步步搭建一个基于 webpack5
和 vue3
的应用开发、生产环境。
# 项目初始化
为了方便对本系列博客相关实践代码进行分类,此次实践相关应用代码均在 app
目录中。
# 安装相关依赖
npm install webpack webpack-cli --save-dev
npm install vue@next
# 添加入口 html 文件
当用户访问 web 应用时,其实也就是获取服务端返回 html
,所以下面添加一个 index.html
作为应用入口。
文件内容如下。body
中有一个 id="app"
的 div
也就是用于挂载 vue
应用的根节点。
<!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>webpack-build-app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
# 添加入口 js 文件
index.js
内容如下。
import { createApp, h } from 'vue'
const app = createApp({
render() {
return h('h1', this.content)
},
data() {
return {
content: 'Hello webpack & vue.'
}
}
})
app.mount('#app')
# 添加基础配置
在 webpack 入门 中了解到,webpack
默认不能识别 html
文件,现在需要将指定的 js
文件构建后自动注入到指定的 html
中。
可通过 html-webpack-plugin (opens new window) 插件来实现。
# 安装 html-webpack-plugin
npm i --save-dev html-webpack-plugin
# 添加 webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const resolvePath = (...args) => path.resolve(process.cwd(), ...args)
module.exports = {
entry: './app/index.js',
output: {
filename: 'main.js',
path: resolvePath('app', 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: resolvePath('app', 'index.html')
})
]
}
配置中除了指定了 entry
、 output
之外,还使用了 HtmlWebpackPlugin
,插件的 template
选项用来告诉 HtmlWebpackPlugin
该使用哪个 HTML
模版文件来生成 HTML bundle
。
HtmlWebpackPlugin
的更多用法可查看 html-webpack-plugin (opens new window)。
# 添加 npm scripts 构建命令
修改 package.json
,添加如下 build:app
命令。
"scripts": {
...,
"build:app": "webpack --config webpack.config.js"
},
执行 npm run build:app
,可以看到生成的 dist
目录中输出了 html
文件,在浏览器打开该文件,可看见浏览器渲染了 h1
标题,内容为 Hello webpack & vue.
,至此基础配置完成。
本文实践代码可从 https://github.com/xuwenchao66/webpack-practice (opens new window) 中查阅。