从零开始实现 webpack + Vue全家桶项目框架（1）

本文将带你从零开始，逐步搭建一个基于 webpack 和 Vue 全家桶（包括 Vue.js 本身、Vue Router、Vuex 等）的项目框架。我们不仅会深入探讨 webpack 的配置和 Vue 组件的开发，还会涉及到如何集成 Vue Router 实现路由管理，以及如何利用 Vuex 进行状态管理。
通过本文的学习，你将能够掌握从零开始搭建 webpack + Vue 全家桶项目框架的技能，为你的前端开发之路增添一份强大的武器。无论你是前端新手还是有一定经验的开发者，相信本文都能为你带来不小的收获。

接下来，让我们正式开启这次探索之旅吧！

起步

1.首先我们创建一个目录

这里我们可以参考webpack官方文档（www.webpackjs.com/guides/gett...

arduino 复制代码

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文件夹

scss 复制代码

npm install --save lodash // 安装lodash

更改我们的index.js 和 index.html文件

index.js

javascript 复制代码

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

xml 复制代码

<!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文件

lua 复制代码

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：

css 复制代码

npm install --save-dev style-loader css-loader less-loader

bash 复制代码

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文件

css 复制代码

npm install --save-dev html-webpack-plugin

然后删除dist 继续 npm run build 会自动生成dist

通常比较推荐的做法是在每次构建前清理 /dist 文件夹，那么构建后就只会存在将要用到的文件。可以使用 output的 clean 配置选项实现这个需求。

lua 复制代码

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 故意写错一个东西然后打包就可以看到效果

到这里一个基本的打包工具就配置差不多了，后面我们在继续完善