使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（八）不同环境的配置

笔特 | 11/16/2022, 6:49:56 AM | 3106 次阅读

1 引言

为了能够更好的理解webpack，特准备了这份从零开始开始搭建教程，不使用官方的脚手架，不使用预定义配置，完全从零开始搭建一个使用 Webpack5 构建的 Vue3 + TypeScript 的项目开发环境。开发和编译打包成生产环境包两者必然存在一定的差异，如：开发时的热更新，生产环境的文件压缩，就需要配置不同的配置文件来实现两者的区别。

关键词

Webpack5
Vue3
TypeScript
JavaScript

文章列表

使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（一）搭建编译环境
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（二）配置HTML模板
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（三）添加Vue环境
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（四）添加Vue的样式
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（五）添加Less支持
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（六）添加Vue的TS支持
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（七）添加静态文件
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（八）不同环境的配置
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（九）ES语法转换

2 安装依赖

yarn add -D cross-env webpack-merge

3 配置脚本

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

1
2
3
4
5

4 配置修改

// config/webpack.config.prod.cjs
module.exports = {
  plugins: [

  ],
  mode: "production"
}

1
2
3
4
5
6
7

// config/webpack.config.dev.cjs
module.exports = {
  plugins: [

  ],
  devServer: {
    port: 3001,
    hot: true
  },
  mode: "development"
}

1
2
3
4
5
6
7
8
9
10
11

// webpack.config.cjs
const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const devConfig = require("./config/webpack.config.dev.cjs")
const prodConfig = require("./config/webpack.config.prod.cjs")
const { merge } = require("webpack-merge")

module.exports = merge((process.env.NODE_ENV == "production" ? prodConfig : devConfig), {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [{
      test: /\.(png|jpeg|jpg|gif|bmp)$/,
      use: [{
        loader: 'file-loader',
        options: {
          limit: 20000,
          name: "img/[name].[hash:8].[ext]"
        }
      }]
    }, {
      test: /.css$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }]
    }, {
      test: /.less$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "less-loader"
      }]
    }, {
      // 匹配 .ts / .tsx 类型的文件，以及vue中的ts代码
      test: /\.tsx?$/,
      use: {
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      exclude: "/node-modules/"
    }, {
      test: /\.vue$/,
      use: [{
        loader: 'vue-loader'
      }]
    }],
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      title: 'webpack5-vue3-ts-demo'
    }),
    new VueLoaderPlugin(),
    new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, 'public'),
        to: path.resolve(__dirname, 'dist')
      }],
    }),
  ],
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".vue"],
    alias: {
      "@": path.resolve(__dirname, "src"),
    }
  },
  performance: {
    hints: false
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86