最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

ts09_使用webpack打包ts文件2

来源：博客园

1.为了对html文件进行自动生成和一些资源的自动按需引入还需要对webpack继续进行一些配置，首先需要安装html-webpack-plugin插件帮助我们自动生成html文件


【资料图】

运行npm i -Dhtml-webpack-plugin

2.引入html-webpack-plugin

const HTMLWEBPACKPLUGIN = require("html-webpack-plugin")

3.在webpack.config.js文件中配置plugins选项来引入要使用的插件

4.为了能让代码修改后自动打包页面自动刷新还需要进行一些配置，下载webpack-dev-server

运行npm i -D webpcak-dev-server

安装好之后在packge.json文件中配置脚本

然后运行nmp run start 如果出现以下 错误

这个错误的意思是项目需要一个运行环境的模式，为“development” 或者“production”；

需要在webpack.config.js中配置mode选项来确定运行环境

5.为了确保每次打包的dist文件都是最新的，需要在打包之前清除dist目录，还需要安装一个插件 clean-webpack-plugin

运行命令 npm i -Dclean-webpack-plugin 安装插件

引入插件

const {CleanWebpackPlugin} = require("clean-webpack-plugin")在plugins里面配置

6.最后还需要配置一下resolve选项告诉webpack哪些文件可以被当做模块使用

到这里webpack打包JS文件的一些最基本的配置就完成了

webpack.config.js

//引入path模块，管理路径// import { Configuration } from "webpack";//运行webpack时注释掉/** * @type {Configuration} */const path = require("path");//引入html-webpack-pluginconst HTMLWEBPACKPLUGIN = require("html-webpack-plugin")const {CleanWebpackPlugin} = require("clean-webpack-plugin")//webpack中的所有配置信息都应写在module.exports中module.exports = {    //指定入口文件    entry: "./src/index.ts",    //指定打包文件所在目录    output: {        //指定打包文件的目录        // path:"./dist"        path: path.resolve(__dirname, "dist"),        //打包后文件的文件名        filename: "bundle.js"    },    //指定webpack打包时要使用的模块    module: {        //指定加载的规则        rules: [            {                //指定规则生效的文件                test: /\.ts$/,                //要是用的loader                use: "ts-loader",                //指定要排除的文件                exclude: /node_modules/,            }        ]    },    //配置webpack的插件    plugins: [        new CleanWebpackPlugin(),        new HTMLWEBPACKPLUGIN({            // title:"这是一个自定义的title"//用来配置自动生成的html文件的title            template:"./src/index.html"//用来配置自动生成的html文件的模板        })    ],    mode:"development",    resolve:{        //设置引用模块        extensions:[".ts","js"]//告诉webpack哪些后缀的文件可以被当做模块引用    }}

package.json文件

{  "name": "part3",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "webpack --mode production",    "dev": "webpack --mode development",    "start": "webpack serve --open "  },  "author": "",  "license": "ISC",  "devDependencies": {    "clean-webpack-plugin": "^4.0.0",    "html-webpack-plugin": "^5.5.0",    "ts-loader": "^9.4.2",    "typescript": "^4.9.4",    "webpack": "^5.75.0",    "webpack-cli": "^5.0.1",    "webpack-dev-server": "^4.11.1"  }}

关键词： 运行环境 自动刷新 继续进行