npm i -D webpack webpack-cli typescript ts-loader
在项目目录下创建webpack.config.js文件,并编写如下配置信息
- // 引入一个包
- const path = require("path");
-
- // webpack中的所有的配置信息都写在module.exports中
- module.exports = {
- // 指定入口文件
- entry: "./src/index.ts",
- // 指定打包文件所在目录
- output: {
- // 指定打包文件的目录
- path: path.resolve(__dirname, "dist"),
- // 打包后的文件名
- filename:"bundle.js"
- },
- // 指定Webpack打包时要使用模块
- module: {
- // 指定要加载的规则
- rules: [
- {
- // test指定的是规则生效的模块
- test: /\.ts$/,
- // 要使用的loader
- use: "ts-loader",
- // 要排除的文件
- exclude:/node-modules/
- }
- ]
- }
- }
在项目目录下创建webpack.config.js文件,并编写配置信息
- {
- "compilerOptions": {
- "module": "ES2015",
- "target": "ES2015",
- "strict": true
- }
- }
在控制台中输入如下指定对代码进行Webpack打包
npx webpack
打包完成后就会出现dist目录