webpack中使用ts

目录如下

下载相关依赖

 yarn add -D clean-webpack-plugin 
 yarn add -D html-webpack-plugin
 yarn add -D cross-env
 yarn add -D webpack  webpack-cli webpack-dev-server
 yarn add -D ts-loader typescript

webpack.config.js配置

const {CleanWebpackPlugin} = require("clean-webpack-plugin")

const HtmlWebpackPlugin = require("html-webpack-plugin");

// cross-env原本是用于跨平台的命令的。在执行webpack命令之前写上 cross-env xxx=yyy即可配置，那么即可通过process.env.xxx来访问这个变量
const isProd = process.env.NODE_ENV = "production"

const path = require("path");

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', // 主机名
    port: 9527,
    open: true
  },

}

package.json中配置

"scripts": {
    "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 dev 运行
 yarn build 打包