面试官：了解Webpack吗，能不能基于Webpack手动搭建简易Vue项目

oversize的前端男孩
188 阅读7分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

image.png

回望过去的自己

使用 Vue 的掘友们，回想一下之前自己使用框架写项目的时候，是不是：

  • 在大佬搭建好的项目基础上写业务
  • 直接用Vue CLI工具去搭建一个项目的

大佬们的带飞和工具的使用确实会使我们的开发效率更快。但是长此以往，会导致自己的思想固化，对代码的把控能力越来越差，说是搬砖也无可厚非。现在让我们代入一个场景：

假使我们去面试。面试官问你：

  • 是否了解Webpack?
  • 是否手动搭建过Vue项目

如果这个时候对流程、配置一问三不知，是不是结果就可想而知了。本文着重为大家讲解从0到1搭建Vue3开发环境的过程

提前说明：本文侧重使用过vue，但是不清楚vue基于webpack是如何搭建的，这方面的新手，主要是让大家了解一下这样的一个过程，是一篇入门级别的文章

配置 Webpack 环境

因为是基于Webpack的，所以让我们先抛开Vue，基建做好，用Webpack先搭建一个项目的的雏形：

第一步

//  在终端输入：

// 创建文件夹
mkdir handler_vue
// 进入 handler_vue 文件
cd handler_vue
// 初始化项目
npm init -y

先不说继续搭建，这时候你可能会产生一个疑问：

  • -y 是干嘛的？

-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json

好！接着看

第二步

此时看向你的目录，你会得到一个package.json文件项目，接下来我们安装webpack和webpack-cli，命令如下：

// 安装 webpack
npm install webpack

// 安装 webpack 脚手架
npm install webpack-cli -D

这时！你是不是又有疑问了！（我不管，你就是有）

  • -D 是干嘛的？

-D的含义： 即--dev（生产） 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器

注意：webpack-cli 是执行 webpack 的工具。webpack 4.x版本以后，剥离了 webpack-cli，所以这里我们需要单独下载它

第三步

接下来在根目录添加src文件夹，并且在src文件夹内添加main.js文件，里面的内容暂且不谈。再在根目录添加index.html和webpack.config.js，添加完后目录结构如下所示：

image.png

然后在刚刚创建的 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",   // 打包完的静态资源文件
    }
}

再修改一下 package.json和scripts属性

"scripts": {
      "dev": "webpack --config ./webpack.config.js"
    }

终端运行打包指令npm run dev，如下所示代表成功：

image.png

上图中的js/main.js就是我们通过webpack将main.js打包完后的代码，打开之后你发现里面啥也没有。

第四步

好！接下来我们给index.html添加内容，然后通过！html-webpack-plugin这个插件！将！index.html作为模板，打出到dist文件夹里。

  • 通过指令添加html-webpack-plugin插件
npm install html-webpack-plugin -D
  • 在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",   // 打包完的静态资源文件
    },
      plugins: [
    // new ConsoleLogOnBuildWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"), // 要使用的html模板
      filename: "index.html", // 打包后输出的文件名
      title: "手搭 Vue 开发环境", // 在index.html 模板内，通过 <%=htmlWebpackPlugin.options.title %> 这个变量，等会去打开看打包出来的html文件就知道了
    }),
}
  • 后再给index.html加上内容：
<!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><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
  • 没错！还没结束，给main.js来点内容：
// 获取Dom元素
const root = document.getElementById('root')
root.textContent = "小鳄鱼嘎嘎嘎！"
  • 运行指令npm run dev进行打包，神奇的事情发生了！你看看dist文件夹！

image.png

这个时候你可以去打开一下 index.html 了，里面有你想要的东西！

webpack基础的东西就出来了！

还有一个小插件是必备的， clean-webpack-plugin ，它的作用就是每次打包的时候，都会把 dist 目录清空，防止文件变动后，还有残留一些老的文件，以及避免一些缓存问题。 webpack.config.js 配置如下：

// 命令行：
   npm install clean-webpack-plugin
   
// webpack.config.js
    const { CleanWebpackPlugin } = require('clean-webpack-plugin') 
    
    plugins: [ new   CleanWebpackPlugin() ]

那么！既然标题是基于webpack手动搭建Vue-Cli，那么接下来的事情就是引入Vue了，好！思路很清晰！

引入Vue3

第一步

引入Vue3，指令如下：

npm install vue -S

我不管！问题又来了：

  • -S是啥？
好问题！

-S 是指生产环境需要用到的包 — dependencies

第二步

引入成功之后，我们在src目录下新建App.vue

<template>
  <div @click="test">
    没错！你搞了一个App.vue
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>

走过路过不要错过！正儿八经的Vue模板，好，那现在你要做的就是把它引入root（相信熟练用Vue的大家伙都知道我想说什么）。接下来，我会写出一些大家很熟悉的东西：

import { createApp } from "vue"; 
import App from './App.vue' 

const app = createApp(App) 
app.mount('#root')

这个时候，风停了雨停了，我觉得自己又行了！好！打包！

image.png 惊不惊喜！意不意外！给你三秒钟，想想为什么？

一..二..三

仔细想想，咱们这个是从零开始的脚手架，从上面的报错我们可以看出：

  • 可能需要配置适当的loader程序来处理.vue文件
  • 要把vue语言转换成浏览器认识的js语言

第三步

于是我们需要添加以下的几个插件了：

  • vue-loader：它是基于 webpack 的一个的 loader 插件，解析和转换 .vue  文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 loader 去处理如 style-loader 、 less-loader 等等，核心的作用，就是 提取 。
  • @vue/compiler-sfc： Vue 2.x 时代，需要 vue-template-compiler 插件处理 .vue 内容为 ast ， Vue 3.x 则变成 @vue/compiler-sfc 。
  • 输入指令：
npm install vue-loader@next
npm install @vue/compiler-sfc

第四步

为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",   // 打包完的静态资源文件
    }
      module: {
            rules: [
              {
                test: /\.vue$/,
                use: ["vue-loader"],
               }
                 ]
        },
          plugins: [
            new HtmlWebpackPlugin({
              template: path.resolve(__dirname, "./index.html"), // 要使用的html模板
              filename: "index.html", // 打包后输出的文件名
              title: "手搭 Vue 开发环境", // index.html 模板内，通过 <%=htmlWebpackPlugin.options.title %> 拿到变量
            }),
            new CleanWebpackPlugin(),
}

VueLoaderPlugin 的作用：

是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。

第五步

看到上面那些东西，你是不是会联想到css可能也要解析器！真聪明小伙子！

  • style-loader：将 css 样式插入到页面的 style 标签中。
  • css-loader：处理样式中的 url ，如 url('@/static/img.png') ，这时浏览器是无法识别 @ 符号的。

安装完了之后，可以在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",   // 打包完的静态资源文件
    }
      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(),
}

在运行一下！npm run dev就能看到你搞的样式了！

配置devServer

使用Vue的小伙伴都知道，它是可以实时更新代码的，诶！这个时候就需要插件webpack-dev-server了

  • 安装
npm install webpack-dev-server -D
  • 在webpack.config.js下添加下面的配置：
  devServer: {
    port: 8080,
    static: {
      directory: path.resolve(__dirname, "./dist"),
      publicPath: "/",
    },
  },
  • 修改 package.json运行脚本
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack serve --progress --config ./webpack.config.js  "
  },

好！去run run看吧！

学习总结

没啥好说的，都在文章里！

avatar
文章
阅读
粉丝