详解配置webpack打包typescript

最新推荐文章于 2023-04-03 15:17:31 发布

Tone@

最新推荐文章于 2023-04-03 15:17:31 发布

阅读量499

点赞数

本文链接：https://blog.csdn.net/TongJ_/article/details/127588951

版权

javascript 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

typescript

2 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

全局安装 TypeScript：

npm install -g typescript

安装完成后，在控制台运行如下命令，检查安装是否成功

tsc -V

下载依赖

安装依赖涉及版本问题，确保各个版本之间必须兼容

yarn add -D typescript  安装ts
yarn add -D webpack webpack-cli  脚手架
yarn add -D webpack-dev-server  启动工具
yarn add -D html-webpack-plugin clean-webpack-plugin  html打包、清理包工具
yarn add -D ts-loader  编译ts
yarn add -D cross-env  涉及跨平台命令

使用版本：

创建目录

入口JS: src/main.ts

document.write('Hello Webpack TS!')

index页面: public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack & TS</title>
</head>
    <body></body>
</html>

build/webpack.config.js

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

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

function resolve (dir) {
  return path.resolve(__dirname, '..', dir)
}

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: {
    app: './src/main.ts'
  },

  output: {
    path: resolve('dist'),
    filename: '[name].[contenthash:8].js'
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')]
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin({
    }),

    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

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

  devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

  devServer: {
    host: 'localhost', // 主机名
    stats: 'errors-only', // 打包日志输出输出错误信息
    port: 8081,
    open: true
  },
}

初始化项目npm init -y

自动生成package.json

初始化 tsc --init

自动生成tsconfig.json

配置打包命令

"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"