从零开始实现 webpack + Vue全家桶项目框架（1）
本文将带你从零开始，逐步搭建一个基于 webpack 和 Vue 全家桶（包括 Vue.js 本身、Vue Router、Vuex 等）的项目框架。我们不仅会深入探讨 webpack 的配置和 Vue 组件的开发，还会涉及到如何集成 Vue Router 实现路由管理，以及如何利用 Vuex 进行状态管理。
通过本文的学习，你将能够掌握从零开始搭建 webpack + Vue 全家桶项目框架的技能，为你的前端开发之路增添一份强大的武器。无论你是前端新手还是有一定经验的开发者，相信本文都能为你带来不小的收获。
接下来，让我们正式开启这次探索之旅吧！
起步
1.首先我们创建一个目录
这里我们可以参考webpack官方文档（www.webpackjs.com/guides/gett…
mkdir webpack-vue-demo // 创建一个名字为webpack-vue-demo 的文件夹 手动也可以
cd webpack-vue-demo // 进入到当前文件夹
npm init -y // 使用npm 开始初始化
npm install webpack webpack-cli --save-dev // 安装我们的wepack 和 webpack脚手架 安装时如时间过长我们可以采用 cnpm
安装完成之后我们使用编辑器打开该文件
然后创建一些文件夹
2.文件都准备好创建第一个bundle
调整一下目录结构，打包的代码应该放入 dist文件夹
npm install --save lodash // 安装lodash
更改我们的index.js 和 index.html文件
index.js
import lodash from 'lodash';
function component() {
const element = document.createElement('div');
// 执行这一行需要引入 lodash（目前通过 script 脚本引入）
element.innerHTML = lodash.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
执行npx webpack
在浏览器中打开 dist 目录下的 index.html，如果一切正常就能看到以下文本：'Hello webpack'。
成功一小步，以上都是我们手动来实现，下面我们使用配置文件
新建一个名为webpack.config.js的js文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
执行 npx webpack --config webpack.config.js后效果和手动执行的结果一样，生成main.js 。
这时终端会有警告， 没事不必管，继续
添加npm 脚本命令
现在可以使用 npm run build 命令替代之前使用的 npx 命令。
配置一些管理资源的东西
要想在 JavaScript 模块中导入 CSS、less，图片，字体等文件，需要安装 style-loader和 css-loader等并在 module配置 中添加这些 loader：
npm install --save-dev style-loader css-loader less-loader
module: {
//创建模块时，匹配请求的规则数组。
// 这些规则能够修改模块的创建方式。
// 这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
rules: [
{
test: /.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /.less$/i,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource'
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource'
},
]
}
配置完成后我们再次执行 npm run build 能正常打开 dist 下面的 index.html
配置自动输出文件
如下图所示，目前为止，我们dist目录下的index.html是我们每次打包前要手动书写进去，里面的title和script也要根据我们的实际情况去手动修改，这样在每次删除dist文件夹后都要手动再写一次，而且要对框架结构非常熟悉才行，非常不利于程序的自动化扩展，在遇到页面需要引入很多*.bundle.js时就非常吃力。
接下来我们利用htmlwebpackplugin来设置html模版，每次执行npm run build时自动在dist文件夹下生成index.html
安装 HtmlWebpackPlugin插件并且调整webpack.config.js文件
npm install --save-dev html-webpack-plugin
然后 删除dist 继续 npm run build 会自动生成dist
通常比较推荐的做法是在每次构建前清理 /dist 文件夹，那么构建后就只会存在将要用到的文件。可以使用 output的 clean 配置选项实现这个需求。
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean:true
},
配置开发环境
添加 mode 区分，开发环境 ‘development'和生产环境'production'
使用source-map
为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps代码。如果一个错误来自于source map 就会明确的告诉你。
这里可以在index.js 故意写错一个东西 然后打包就可以看到效果
到这里一个基本的打包工具就配置差不多了，后面我们在继续完善