使用webpack打包ts代码（2）

自学前端_又又2024-03-15 10:24

html-webpack-plugin 插件

先安装一个插件 html-webpack-plugin

这个插件可以帮助我们自动的创建html

js 复制代码

yarn add html-webpack-plugin --dev

然后在webpack.config.js中引入

js 复制代码

//webpack.config.js

//引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
 
  //配置插件
  plugins: [new HTMLWebpackPlugin({
      title: "我是自定义的title",
    }),],
};

接着执行 yarn build，这时候在dist文件夹里，就有一个index.html文件了

我们也可以自定义html

js 复制代码

//webpack.config.js

module.exports = {
  //配置插件
  plugins: [new HTMLWebpackPlugin({
      template: "./src/index.html",
    })],
};

此时，打包后的html ,就是根据我们写的html生成的

webpack-dev-server 插件

先安装一个插件 webpack-dev-server

这个插件可以帮助我们在打包后，自动打开浏览器查看项目，并且实时更新

注意：这个插件需要node在18.x.x版本

js 复制代码

yarn add webpack-dev-server --dev

然后在package.json中配置一个start ，--mode development 会打开默认浏览器

js 复制代码

{

  "scripts": {
    "build": "webpack",
    "start":"webpack serve --open --mode development"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.6.0",
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.2",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.3"
  }
}

这时候执行 yarn start 就可以了

clean-webpack-plugin 插件

这个插件可以帮助我们在每次打包之前，先把输出目录删掉，创建最新的目录，避免一些不必要的文件还留在同一个目录下

js 复制代码

//注意，这个引入后是一个对象，要读属性或解构出来
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {

  //配置插件
  plugins: [
    new CleanWebpackPlugin()
  ],
};

这样就可以打包了。

再配置一个

js 复制代码

//webpack.config.js
module.exports = {
  resolve: {
    extensions: [".ts"],
  },
};

在我们引入外部的ts模块时，此时打包会编译出错，而加上这个配置并加上 ".ts" 就可以解析ts文件成功了，这可以添加多个值