typescript的webpack编译
typescript的webpack编译
初始化
npm init -y // 生成package.json
安装webpack依赖
npm i -D webpack webpack-cli typescript ts-loader
npm i -D html-webpack-plugin
npm i -D webpack-dev-server
npm i -D clean-webpack-plugin
新建webpack.config.js
//引入一个包
const path = require(‘path’);
//引入Html插件
const htmlwebpackplugin = require(‘html-webpack-plugin’)
//clean插件
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin’)
//webpack中的所有配置信息都应该卸载module.exports中
module.exports = {
mode: ‘development’,
//指定入口文件
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/
}
]
},
plugins:[
new CleanWebpackPlugin(),
new htmlwebpackplugin({
title:‘自定义title’
}),
],
//设置引用模块
resolve:{
extensions:[“.ts”,“.js”]
}
};
新建tsconfig.json
{
“compilerOptions”: {
“target”: “ES2015”,
“module”: “ES2015”,
“strict”: true
}
}
package.json中加入build指令
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack”,
“start”: “webpack server --open”
},
启动npm start
出现dist文件夹表示配置运行成功