本文介绍了如何使用Webpack和TypeScript打包项目。首先通过npm初始化项目并安装所需依赖，包括typescript、ts-loader、clean-webpack-plugin和copy-webpack-plugin。接着配置tsconfig.json，设置输出目录、source map、模块类型等。然后安装webpack和webpack-cli，创建webpack.config.js配置文件，包括多入口、source-map、ts-loader的使用、插件配置如CleanWebpackPlugin和CopyWebpackPlugin，以及输出路径设置。
安装npm
略
创建项目
npm init -y
安装typescript
# ts-loader为webpack loader，clean-webpack-plugin copy-webpack-plugin为webpack插件
npm install --save-dev typescript ts-loader clean-webpack-plugin copy-webpack-plugin
配置tsconfig.json
{
"compilerOptions": {
"outDir": "./build/",
/* 开启source map，利于调试 */
"sourceMap": true,
"module": "commonjs",
"noImplicitAny": true,
"target": "es5",
"allowJs": true
}
}
安装webpack
npm install webpack webpack-cli --save-dev
配置webpack.config.js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
// 配置多个入口
entry: {
BaseInfo: './ts/src/BaseInfo.ts',
RandomData: '/ts/src/RandomData.ts'
},
// 配置source-map，方便调试
devtool: 'inline-source-map',
module: {
rules: [
{
// 正则：查出所有ts、tsx结尾的文件
test: /\.tsx?$/,
// 配置ts-loader
use: 'ts-loader',
// 正则：过滤node_modules
exclude: /node_modules/
}
]
},
plugins: [
// clean-webpack-plugin插件，用于每次打包都清理旧的数据
new CleanWebpackPlugin(),
// copy-webpack-plugin，把指定的文件夹内容复制到指定目录
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'html'),
to: path.resolve(__dirname, 'build')
},
],
}),
],
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
// 指定出口
output: {
filename: '[name]-bundle.js',
path: path.resolve(__dirname, 'build')
}
};
1419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
