HTML5教程

使用webpack，编译前端ts项目

本文主要是介绍使用webpack，编译前端ts项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

步骤：

  1. 下载安装webpack
    "webpack"，"webpack-cli"
npm install webpack webpack-cli --save-dev

  1. 下载ts-loader和html-webpack-plugin插件，供webpack编译使用

  2. 创建webpack.config.js文件，内容如下:

// @ts-ignore
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  mode: 'development',
  entry: ['./src/main.ts'],
  output: {
    clean: true,
    path: __dirname + '/build',
    filename: './[fullhash]bundle.js',
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  },
  plugins: [new HtmlWebpackPlugin(
    {
      template: 'public/index.html',
      filename: 'index.html'
    }
  )]
}
  1. 在package.json 上添加启动打包命令
  {
    "scripts": {
    "dev:webpack": "./node_modules/.bin/webpack"
    }
  }
  1. main.ts上编写ts内容如下：
let itemName = 'hello typeScript'

let foo = function(name: string){
    console.log(name)
    setTimeout(()=>{
        document.write('hello ts')
    },500)
}

foo(itemName)
  1. 运行打包命令，完成打包，打开打包后的html，即可得如下内容
这篇关于使用webpack，编译前端ts项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航