[实践]webpack+vue+ts搭建前端项目

1,793 阅读4分钟

前言

相信有很多同学和我一样,在学习vue的时候,经常是通过vue-cli / @vue/cli来搭建vue的前端项目,虽然这个脚手架很方便也很强大,但作为一个前端人来说学习通过webpack来自己搭建一个项目也是非常有必要的。

前段时间在学习搭建过程实践中遇到一些问题,刚好看到掘金上对于webpack + vue + ts这方面的文章比较少,因此在这里写下我自己的搭建过程,欢迎大家参考和提出意见。

「内容速览」

  • webpack基础
  • vue + ts后的变化
  • vue + ts + webpack的配置过程
  • 项目实践结果

webpack基础

webpack是用于javascript应用程序的静态模块打包工具。它可以看作是模块打包机,所做的事情就是分析我们的项目结构,构建一个依赖图,通过依赖图映射项目所需要每个模块,打包成1个或多个bundle(包)供浏览器使用。

webpack的基础知识有很多,这里有4个我们首先要了解的概念:

  • entry(入口)
  • output(输出)
  • loader(加载器,webpack只能理解js和json文件)
  • plugin(插件,扩展 webpack 能力,例如打包优化,资源管理,注入环境变量) 具体教程:webpack概念 上讲的很清晰,在进行webpack配置项目时,这些知识都是必不可少的。

vue + ts后的变化

  • 原本以js结尾的文件名,后缀改为ts

  • tsconfig.json文件 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项,简单就是指定ts编译的配置文件,具体配置内容和作用可以参考:tsconfig.json概述

  • ts识别vue ts默认是识别不了*.vue后缀的文件的,因此我们需要声明vue的.d.ts声明文件,来告诉ts怎么处理*.vue文件。

  • vue写法上的变化 vue结合了ts写法上主要改变在script部分,具体使用方法:vue-property-decorator的简单介绍 这篇文章。

vue + ts + webpack的配置过程

  • 初始化项目 初始化项目,安装所依赖包:
npm init 或 npm init -y

// 安装依赖
npm i vue vue-class-component vue-property-decorator -s

// 这里先安装一些基本依赖,后面还有部分以来跟着步骤再进行安装
npm i webpack webpack-cli typescript ts-loader vue-loader -D
  • webpack配置 创建webpack文件夹,新建webpack.base.conf.js(webpack基本配置文件)。

配置入口起点:

entry: path.resolve(__dirname, '../src/index.ts')

配置输出(位置、命名):

output: {
      publicPath: "./",
      path: path.resolve(__dirname, "..", "dist"),
      filename: "[name].[chunkhash:5].bundle.js",
      chunkFilename: "[name].[chunkhash:5].chunk.js",
    }

配置resolve告诉webpack按一定顺序寻找解析这些后缀名:

resolve: {
      extensions: [ '.tsx', '.ts', '.js', '.vue', '.json' ]
    }

配置module.rules告诉webpack如何去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用和被添加到依赖图中(这里有一些之前没有安装完的loader,大家可以再安装一下):

module: {
  rules: [
    {
      test: /\.vue$/,
      use: [
        "vue-loader"
      ]
    },
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "ts-loader",
          options: {
            appendTsSuffixTo: [/\.vue$/],
            appendTsxSuffixTo: [/\.vue$/],
            transpileOnly: true,
          }
        }
      ]
    },
    {
      test: /\.js?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        "style-loader",
        "css-loader"
      ]
    },
    {
      test: /\.(png|jpg|jpeg|gif|svg)$/,
      use: [
        {
          loader: "url-loader",
          options: {
            name: "[name].[chunkhash:5].[ext]",
            limit: 1024 * 10,
            esModule: false
          }
        }
      ]
    },
    {
      test: /\.html?$/,
      use: [
        {
          loader: 'html-loader'
        }
      ]
    }
  ]
}

配置plugins来为html动态引入打包后生外部资源(script,link),同时引入VueLoaderPlugin(vue-loader 15更新:需配合该插件才能正确使用):

plugins: [
      new HtmlWebpackPlugin({
        filename: "index.html",
        favicon: path.resolve(__dirname, '../src/favicon.ico'),
        template: path.resolve(__dirname, "../src/index.html"),
        minify: {
          collapseWhitespace: true
        }
      }),
      new VueLoaderPlugin()
    ]

配置devserver(开发服务器)帮组我们更便捷的在本地进行项目的开发:

devServer: {
  host: '0.0.0.0',
  port: 8002
}

package.json上编写webpack的运行指令:

"scripts": {
  "dev": "webpack serve --config webpack/webpack.base.conf.js"
},

在terminal运行npm run dev: 可以看到我们项目已经跑起来了,但有一个warning就是webpack配置中没有设置mode,我们通常会区分开发环境和生产环境,进行不同的配置,像刚刚的devserver配置就不能用在生产环境中,详细的内容会在后续进阶文章中继续为大家讲解webpack的开发环境和生产环境的配置,先设置mode="development"。

重新运行npm run dev:

项目实践结果

打开浏览器,输入http://localhost:8000/ 项目能够正常被访问。实际上我们这份webpack配置还有很多问题,比如说没有区分开发和生产环境,没有配置热更新,没有进行优化,还有一些其它的类型的文件没有配置loader进行处理,远远无法满足复杂的项目需求,还有很大的提升空间,努力学习,写出更好的总结。