本文共 1599 字，大约阅读时间需要 5 分钟。

下载依赖

yarn add -D typescriptyarn add -D webpack webpack-cliyarn add -D webpack-dev-serveryarn add -D html-webpack-plugin clean-webpack-pluginyarn add -D ts-loaderyarn add -D cross-env

入口JS: src/main.ts

// import './01_helloworld'document.write('Hello Webpack TS!')

index页面: public/index.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  },}

根目录下生成tsconfig.json文件

npm init -ytsc --init

配置打包命令

"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"

运行与打包

yarn devyarn build

转载地址：http://chlbi.baihongyu.com/