目录如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d43c00394fa5ed36c0a324bc4907287b.png)
下载相关依赖
yarn add -D clean-webpack-plugin
yarn add -D html-webpack-plugin
yarn add -D cross-env
yarn add -D webpack webpack-cli webpack-dev-server
yarn add -D ts-loader typescript
webpack.config.js配置
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin");
// cross-env原本是用于跨平台的命令的。在执行webpack命令之前写上 cross-env xxx=yyy即可配置,那么即可通过process.env.xxx来访问这个变量
const isProd = process.env.NODE_ENV = "production"
const path = require("path");
function resolve(dir) {
return path.resolve(__dirname,"..",dir)
}
module.exports = {
mode: isProd ? 'production' : 'development',
entry: {
app: './src/main.ts'
},
output: {
path: resolve("dist"),
filename: '[name].[contenthash:8].js'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
include: [resolve('src')]
}
]
},
plugins: [
new CleanWebpackPlugin({}),
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
resolve: {
extensions: ['.ts','.tsx','.js']
},
devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',
devServer: {
host: 'localhost', // 主机名
port: 9527,
open: true
},
}
package.json中配置
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
},
使用
yarn dev 运行
yarn build 打包