使用webpack打包ts代码

最新推荐文章于 2024-07-10 17:14:52 发布

过往当下

最新推荐文章于 2024-07-10 17:14:52 发布

阅读量334

点赞数 1

分类专栏： typescript

本文链接：https://blog.youkuaiyun.com/Jin0319/article/details/113040140

版权

typescript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何初始化一个Webpack配置，安装必要的依赖如webpack、webpack-cli、typescript和ts-loader，以及创建webpack.config.js文件来配置入口、输出、模块规则和插件。通过CleanWebpackPlugin确保每次构建都清理dist目录，HtmlWebpackPlugin则自动生成HTML文件。此外，还设置了脚本用于测试、构建和开发服务器。项目使用了TypeScript，并配置了解析扩展名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化
```
 npm init -y
```

安装项目依赖

 cnpm i -D webpack webpack-cli typescript ts-loader

根目录下创建webpack.config.js

webpack.config.js设置

// 引入包
const path = require('path')
// html-webpack-plugin  (会自动生成一个html，webpack下面的插件)
const HtmlWebpackPlugin = require('html-webpack-plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack 中的所有配置信息写在module.exports中
module.exports = {
  // 入口文件
  entry: './src/index.ts',

  // 指定打包文件所在的目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, 'dist'),
    // 打包后文件的名字
    filename: 'bundle.js'
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定规则生效的文件
        test: /\.ts$/,  // 以ts结尾的文件
        // 要使用的loader，用于编译ts文件
        use: 'ts-loader',
        // 要排除的文件
        exclude: /node-modules/
      }
    ]
  },
  // 配置webpack插件
  plugins: [
    new CleanWebpackPlugin(),  // 将dist文件删除之后再重新生成，保证dist文件下一直保持最新的状态
    new HtmlWebpackPlugin({
      // title: '自定义的title'
      template: './src/index.html'
    })
  ],
  // 用来设置引入模块
  resolve: {
    extensions: ['.ts', '.js'] // 告诉webpack ts与js文件可以用于导入导出
  }
}
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack serve --open chrome.exe"
  },
启动项目安装依赖  cnpm i -D webpack-dev-server