使用 webpack 打包 TS 代码(中)

---

解决上面遗留的问题

---

问题一：每次编译完成都得重新在 HTML 中引入一次。

解决方案：

• 使用插件 html-webpack-plugin 。

  • 在终端输入 npm i -D html-webpack-plugin 下载需要使用的插件。

  • 对 webpack 进行配置

    // webpackconfig.js
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      ...
      plugins: [
        new HtmlWebpackPlugin()
      ]
    }
    

  • 这样每次打包的时候就会自动生成一个 HTML 文件，并将编译出来的 js 文件引入到 HTML 中。

• 对于 webpack 自动生成的 HTML 文件可以自定义里面的内容。

  // webpackconfig.js
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    ...
    plugins: [
      new HtmlWebpackPlugin({
        "title": "这是一个自定义的标题。"
      })
    ]
  }
  

• 对于 webpack 自动生成的 HTML 文件也可以自定义想要的模板。

  // webpackconfig.js
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    ...
    plugins: [
      new HtmlWebpackPlugin({
        "template": "./src/index.html"	// 模板文件路径
      })
    ]
  }
  

问题二：每次编译都是新文件覆盖旧文件，但是希望它把原文件删除并且重新创建文件。

解决方案：

• 使用插件 clean-webpack-plugin 。

  • 在终端输入 npm i -D clean-webpack-plugin 下载需要使用的插件。

  • 对 webpack 进行配置

    // webpackconfig.js
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    
    module.exports = {
      ...
      plugins: [
        new CleanWebpackPlugin()
      ]
    }
    

问题三：webpack 不知道哪些文件可以作为模块引入，所以在引入 .ts 模块的时候会报错

解决方案

• 配置 webpack.config.json 。

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