拆解：从0-1用webpack创建工程项目

程序员摩根
2,351 阅读6分钟

本文2708字，几乎浓缩了我3年多工作的全部精华。

用傻瓜式的操作就能学会怎么从0开始搭建一个工程化项目！那么现在正式开始。

以下是本文的文章结构，如果已经非常了解从0到1配置过程的朋友，可以直接翻到最底部，下面有工程文件的项目地址和依赖包的版本，可跳转查阅。

- 一、基础配置
    - 一、创建项目
    - 二、创建并配置webpack.config.js
    - 三、配置package.json的启动命令
    - 四、书写js逻辑：tool.js和main.js
- 二、Vue环境的配置
    - 一、安装相关loader
    - 二、创建App.vue，并且修改main.js引入App.vue
    - 三、配置webpack.config.js中的modules模块
    - 四、安装vue-router及其配置
        - 安装项目依赖   
        - 创建route/index.ts并引入路由，在main.ts中引用   
        - 在App.vue中引入router-view
    - 五、安装pinia及其配置
        - 安装项目依赖
        - 创建stores/user.ts并将方案和数据暴露出去
        - 在main.ts中引入pinia
        - 在App.vue中使用pinia
- 三、安装TS进行类型检查
    - 安装TS相关插件
    - 修改webpack.config.js中的modules模块
    - 创建tsconfig.json进行配置
    - 在src下创建shims-vue.d.ts文件，解决ts找不到vue文件的问题
    - 修改App.vue文件中的js内容
    - 整个项目的依赖包版本如下
- 四、结尾

如果对你有帮助，可先点赞收藏，避免下次就看不到了。整个项目我将以vue3 + Typescript + webpack5的技术栈。

首先是第一部分，基础配置。

一、基础配置

一、创建项目

首先需要创建项目目录，并且初始化项目，操作如下。

mkdir webpack-0-1
cd webpack-0-1
npm init -y

以上，就创建了我们的项目目录webpack-0-1，并且初始化package.json文件。接下来是创建最小的可视化代码模块和相关依赖。

输入如下：

// 创建项目文件
mkdir src
cd src
// 创建js入口文件
vim main.js

// 创建html模板文件
yarn add html-webpack-plugin -D
// 清空dist文件插件
yarn add clean-webpack-plugin -D
// 安装开发服务器
yarn add webpack-dev-server -D

以上，就将js代码片段和相关依赖安装好了。众所周知，我们安装webpack相关依赖，一定要进行最基础的配置。

因此就来到了第二步。

二、创建并配置webpack.config.js

配置如下：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  module: {
    
  },
  resolve: {
    alias: {
      '@': path.resolve('src')
    },
    // 扩展名的设置
    extensions: [ '.ts', '.tsx', '.js', '.jsx', '.vue', '.json' ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      templateContent: `<!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从0到1</title>
        </head>
        <body>
          <div id='app'></div>	
        </body>
      </html>`
    })
  ],
  devServer: {
    port: 8088,
    // 指定虚拟服务器的静态资源目录
    static: {
      directory: path.join(__dirname, 'public')
    }
  }
}

以上，是webpack中最基础的配置项，不清楚各个模块功能的可以看我下面的解释。已经了解这块知识的朋友可以跳过，看下一个步骤了。

webpack核心配置解释：

  • entry: 入口文件的配置。
  • output: 文件和文件目录的指定输出。
  • loader: 模块转换器，对js和json之外的其他类型文件进行处理。(因为webpack只认识js和json文件内容，其他文件类型不认识，相当于是将webpack不认识的内容转化为认识的内容)
  • plugin: 插件，用于扩展webpack功能，可以贯穿 Webpack 打包的生命周期，执行不同的任务。
  • mode: 打包环境配置。一般有development，production和none三个配置项，方便在不同的环境下做不同的事情。
  • devserver: 是一个本地服务。实现http服务、热替换等。

将webpack.config.js配置好了之后，就需要在package.json文件中进行配置了。即迎来我们的第三步。

三、配置package.json的启动命令

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

执行npm run dev即可运行本地环境，执行npm run build即可执行打包环境。我们执行npm run dev，可以发现项目可以运行起来了，但是控制台和页面上没有任何内容。

所以需要执行第四步。

四、书写js逻辑：tool.js和main.js

在src文件夹下面创建具体的业务代码，用于测试。我们分别在main.js和tool.js下编写我们的代码。

以下是tool.js的代码

const tool = {
  name: '摩根',
  age: 24,
  makeSomething(){
    console.log('我的名字和年龄>>>>>', this.name, this.age);
  }
}

export default tool;

以下是main.js的代码

import tool from '@/tool/tool.js'
tool.makeSomething();

再次运行npm run dev，这个时候我们可以看到在控制台已经有我的名字和年龄>>>>>摩根，24打印出来了。

到这里，最基础的工程化项目已经可以完成了。

为了让大家更加清晰整个文件结构，我把具体的文件目录在下面展示出来了。

|- webpack-0-1
  |- src
    |- tool
      |- tool.js
    |- main.js
  |- package.json
  |- webpack.config.js

到这里基本就可以运行一个小型的项目，但是目前主流上还是用vue3比较多一些，所以接下来我把vue相关的技术栈也引入到项目中。大家在项目开发的时候就可以直接使用CV大法，粘贴我的这个项目结构到实战中了，彻底摆脱使用脚手架创建项目的方式。

二、Vue环境的配置

首先安装所有vue项目配置相关的依赖包。

1、使用css则安装：style-loader css-loader less less-loader

2、使用单文件组件则安装：vue vue-loader

3、使用单页应用路由则安装：vue-router

4、使用全局状态管理器则安装：vuex（或者pinia）

完成以上四步，则完成整套vue全家桶的配置。

话不多说，上代码。

一、安装相关loader

yarn add vue-loader vue style-loader css-loader less-loader less -D

二、创建App.vue，并且修改main.js引入App.vue

<template>
  <div>
    <p class="myStyle">{{ msg }}</p>
  </div>
</template>

<script setup>
  import { ref } from "vue"

  const msg = ref('hello world');
  setTimeout(() => {
    msg.value = '我是变化的值';
  }, 2000)
</script>

<style lang="less" scoped>
.wrap{
  width: 300px;
  height: 200px;
  background-color: burlywood;
  .myStyle{
    font-size: 30px;
  }
}
</style>

// main.js
import tool from '@/tool/tool.js'
// ===========新增部分开始============
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
// ===========新增部分结束============

tool.makeSomething();

三、配置webpack.config.js中的modules模块

const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                strictMath: true,
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

经过了上面的3个步骤，我们就可以开始愉快的写我们的单页应用了。

但眼尖的朋友知道，还有vueRouter和vuex没有安装配置呢。

那么我就一条龙服务，做到底咯。

四、安装vue-router及其配置

安装项目依赖

yarn add vue-router

创建route/index.ts并引入路由，在main.ts中引用

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: () => import('@/pages/home.vue') }
    ]
})

export default router

import router from './router'
createApp(App).use(router).mount("#app");

在App.vue中引入router-view

<template>
    <div class="wrap">
        <p class="myStyle">{{ msg }}</p>
        <router-view></router-view>
    </div>
</template>

五、安装pinia及其配置

安装项目依赖

yarn add pinia

使用的用法跟vuex比较类似，注意要兼容vue3的写法。

创建stores/user.ts并将方案和数据暴露出去

import { defineStore } from "pinia";
import {ref} from 'vue'
export const useCalStore = defineStore("calculate", () => {
  const count = ref(10);

  function add(num: number = 1) {
    count.value = count.value + num;
  }

  return {
    add,
    count,
  };
});

在main.ts中引入pinia

import {createPinia} from 'pinia'
createApp(App).use(router).use(createPinia()).mount("#app");

在App.vue中使用pinia

<span>{{ calculate.count }}</span>
<button @click="calculate.add(5)">点击累加</button>

<script lang="ts" setup>
import { ref } from "vue"
import { useCalStore } from '@/stores/calculate'; 
const calculate = useCalStore();
</script>

到这里基本算完成90%了，很多公司都是这样一套配置就能开始往下业务编写阶段（事实上很多公司也是这样干的），但是我们想要让我们的工程项目优化的更好一点，所以接下来我们要给这个项目进行类型检查。

三、安装TS进行类型检查

安装TS相关插件

yarn add typescript ts-loader -D

修改webpack.config.js中的modules模块

module.exports = {
  module: {
    rules: [
      {
        test: /.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader",
            options: {
              // transpileOnly: true, // 关闭项目运行时的类型检查
              appendTsSuffixTo: ["\.vue$"], // 给 .vue文件添加个 .ts后缀用于编译。
              // happyPackMode: true,
            },
          },
        ],
      },
    ]
  }
}

创建tsconfig.json进行配置

{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "strict": true, 
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx",
        "types/**/*.d.ts",
        "types/*.d.ts"
    ], 
    "exclude": [
        "node_modules"
    ]
}

在src下创建shims-vue.d.ts文件，解决ts找不到vue文件的问题

declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

修改App.vue文件中的js内容

<script lang="ts" setup>
  import { ref } from "vue"
  const msg = ref<string>('hello world');
  ......
</script>

根据以上的几个操作步骤，整个项目基本算完整了，接下来运行一下试试看。下面是作者运行之后网页的展示现象。

image.png

整个项目的依赖包版本

可点击key和value值进行编辑
```json
"devDependencies": {  
    "clean-webpack-plugin":"^4.0.0",  
    "css-loader":"^6.7.3",  
    "html-webpack-plugin":"^5.5.0",  
    "less":"^4.1.3",  
    "less-loader":"^11.1.0",  
    "style-loader":"^3.3.1",  
    "ts-loader":"^9.4.2",  
    "typescript":"^4.9.5",  
    "vue":"^3.2.47",  
    "vue-loader":"^17.0.1",  
    "webpack":"^5.75.0",  
    "webpack-cli":"^5.0.1",  
    "webpack-dev-server":"^4.11.1"  
},  
"dependencies":**{  
    "pinia":"^2.0.30",  
    "vue-router":"^4.1.6"  
}

四、结尾

最后我把项目的链接地址放出来，点击这里即可跳转到项目地址，方便给学习从0到1的朋友作为参考。

感谢大家的支持，如果点赞超过100，我将推出在这样的工程项目下，如何进一步的进行优化。

如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。精彩内容在后面，防止跑丢，友友们可以先关注我，每一篇文章都能及时通知不会遗失。

avatar
文章
阅读
粉丝
相关推荐
手写一个webpack4.0配置
38k阅读
 · 
1.4k点赞
「offer来了」Webpack篇，从基础配置到高级配置，16大知识点带你巩固webpack知识体系
1.9k阅读
 · 
30点赞
Webpack打包优化
2.9k阅读
 · 
10点赞
最接地气的webpack源码解析（一）
1.6k阅读
 · 
8点赞
webpack详解&HMR
877阅读
 · 
2点赞