这次，我们手动搭建Vue的webpack环境

我是Loge
700 阅读3分钟

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

起因

由于我们公司的项目比较久远，使用的vue2.x的版本，然后使用的是vue cli构建的，当时使用的是webpack 3.6版本，然后最近想升级一下webpack版本，而且Vue官方文档也没找到如何自己配置webpack环境的地方，所以有了这篇文章。

咋们开始吧

本篇文章基于 webpack 5 和 Vue 3

在开始之前先介绍一下，这次需要用到的依赖

Vue相关：

  • Vue：vue的开发当然离不开这个依赖包了
  • vue-loader：loader在webpack里面叫预处理，所以vue-loader是对.vue文件的预处理，主要是对.vue文件进行SFC(模版，逻辑，样式)的分离。
  • vue-style-loader: 主要用于测试环境，这个会在通过style标签将样式添加到head中

babel相关：

  • babel-loader: 将es5+代码转换成向后兼容的代码
  • @babel/core
  • @babel/preset-env
  • @babel/plugin-transform-runtime

webpack相关：

  • webpack
  • webpack-cli
  • webpack-dev-server
  • html-webpack-plugin: 自动生成html文件
  • mini-css-extract-plugin: 将css打包成一个文件

下面咋们正式开始搭建环境吧

第一步

使用终端打开你想创建工程的目录(我这里创建了一个名为vue-project目录)

npm init -y

这时的工程目录下会出现一个package.json文件,结构如下

|-- vue-project
   |-- package.json

接下来我们开始安装我们的依赖库

npm i vue
npm i -D webpack webpack-cli webpack-dev-server
npm i -D html-webpack-plugin mini-css-extract-plugin
npm i -D vue-loader vue-style-loader
npm i -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

安装完成之后我们的目录结构如下

|-- vue-project
    |-- node_modules //依赖库安装目录
    |-- package.json
    |-- package.lock.json

再来看一下package.json

// package.json
{
  "name": "vue-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.36"
  },
  "devDependencies": {
    "@babel/core": "^7.18.0",
    "@babel/plugin-transform-runtime": "^7.18.0",
    "@babel/preset-env": "^7.18.0",
    "babel-loader": "^8.2.5",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  }
}

第二步

更改package.json, 在scripte下增加dev和build

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "NODE_ENV=development webpack serve",
    "build": "NODE_ENV=production webpack build"
  }

整体package.json如下：

{
  "name": "vue-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "NODE_ENV=development webpack serve",
    "build": "NODE_ENV=production webpack build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.36"
  },
  "devDependencies": {
    "@babel/core": "^7.18.0",
    "@babel/plugin-transform-runtime": "^7.18.0",
    "@babel/preset-env": "^7.18.0",
    "babel-loader": "^8.2.5",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  }
}

第三步

在根目录下增加webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {VueLoaderPlugin} = require('vue-loader');

const isProduction = process.env.NODE_ENV === 'production';
module.exports = () => {
  return {
    entry: './src/index.js',//入口文件位置
    devServer: { // 测试环境服务
      open: true,
      port: 3000
    },
    output: { //出口
      chunkFilename: isProduction ? '[name]@[chunkhash:8].chunk.js' : '[name].chunk.js',
      filename: isProduction ? '[name]@[contenthash].js' : '[name].js'
    },
    mode: isProduction ? 'production' : 'development',
    module: {
      rules: [
        {
          //.js文件loader
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              cacheCompression: false
            }
          }
        },
        {
          //.vue文件loader
          test: /\.vue$/,
          use: 'vue-loader'
        },
        {
          //.css文件loader
          test: /\.css$/,
          use: [isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', 'css-loader']
        },
        {
          //.less文件loader
          test: /\.less$/i,
          use: [isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', 'css-loader', 'less-loader']
        }
      ]
    },
    resolve: {// 设置模块如何被解析
      alias: {
        vue$: 'vue/dist/vue.runtime.esm-bundler.js'// import Vue from 'vue' 使用的文件，$表示精确匹配
      },
      extensions: ['.js', '.vue']// 按顺序解析这些后缀名
    },
    plugins: [
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        template: 'index.html'
      }),
      isProduction ? new MiniCssExtractPlugin({
        filename: '[name].[contenthash:8].css',
        chunkFilename: '[name].[contenthash:8].chunk.css'
      }) : null,
    ].filter(Boolean)
  };
};

文件目录结构如下：

|-- vue-project
    |-- node_modules //依赖库安装目录
    |-- package.json
    |-- package.lock.json
    |-- webpack.config.js

第四步

在根目录下增加index.html文件，在增加src目录，并在src目录下创建index.js和App.vue两个文件.
目录结构如下

|-- vue-project
    |-- node_modules //依赖库安装目录
    |-- src
        |-- index.js
        |-- App.vue
    ｜-- index.html
    |-- package.json
    |-- package.lock.json
    |-- webpack.config.js

文件内容如下

//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>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>


//index.js
import {createApp} from 'vue';
import App from './App.vue';

createApp(App).mount("#app");


//App.vue
<template>
  <div id="app">
    app page
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
    }
  },
  components: {
  }
}
</script>

<style>
#app {
  text-align: center;
  color: aqua;
}
</style>

最后

写完以上四步，就可以在终端上使用npm run dev来启动我们的测试环境了，通过npm run build打包生产环境的代码，当然在实际生产环境中，webpack.config.js的配置还不够，比如没有添加js压缩，css压缩，静态资源处理等等。

有了这个环境就可以开始我们的Vue的开发之旅了。

技术有限，欢迎指正和交流

avatar
文章
阅读
粉丝