14-webpack学习-使用ts创建webpack.config.ts

项目结构

webpackTsConfig
│  package-lock.json
│  package.json
│  tsconfig.json
│  webpack.config.ts
└─src
        index.js

安装依赖

在webpackTsConfig目录下运行

npm i -g typescript
npm i webpack webpack-cli html-webpack-plugin ts-node @types/node @types/webpack typescript --save-dev
tsc init

webpack.config.ts配置文件

import * as path from 'path'
import * as webpack from 'webpack'
import HtmlWebpackPlugin from 'HtmlWebpackPlugin'
const config:webpack.Configuration = {
	mode:'development',
	entry:path.resolve(__dirname,'src/inde.js'),
	output:{
		path:path.resolve(__dirname,'dist'),,
		filename:"[name].build.js"
	},
	plugins:[new HtmlWebpackPlugin()]
}
module.exports = config;

打包命令

• 方式一：在webpackTsConfig目录下运行

webpack --config ./webapck.config.js

• 方式二：在package.json文件的scripts属性新增如下命令

{
	...
	"scripts":{
		"build":"webpack --config ./webpack.config.js"
	}
	...
}

修改保存后，在webpackTsConfig目录下运行如下命令：

npm run build

打包后的目录

webpackTsConfig
│  package-lock.json
│  package.json
│  tsconfig.json
│  webpack.config.js
├─dist
│      index.build.js
│      index.html
└─src
        index.js