ts-demo-snake/webpack.config.js
2021-07-21 10:06:12 +08:00

104 lines
2.5 KiB
JavaScript

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack中的所有信息都写在这里
module.exports = {
mode: 'none',
// 指定入口文件
entry: './src/index.ts',
//指定打包文件的左右目录
output: {
// 制定打包文件的目录
path: path.resolve(__dirname, 'dist'),
// 打包后文件的文件名
filename: 'bundle.js',
// 告诉webpack不使用箭头函数,const
environment: {
arrowFunction: false,
const:false
},
},
// 指定webpack打包时要使用的模块
module: {
// 指定要加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,
// 使用loader, loader的执行顺序是从下往上的
use: [
// 配置babel
{
// 指定加载器
loader: 'babel-loader',
// 配置项
options: {
// 设置预定义环境
presets: [
[
// 指定环境的插件
'@babel/preset-env',
// 配置信息
{
// 要兼容的浏览器
targets: {
chrome: '58',
ie: '11',
},
// 指定corejs的版本
corejs: '3',
// 使用corejs的方式, usage按需加载
useBuiltIns: 'usage',
},
],
],
},
},
'ts-loader',
],
// 排除的文件
exclude: /node-modules/,
},
// less文件的处理
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// postcss配置
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env"
]
}
}
},
'less-loader'
],
},
],
},
// webpack插件配置
plugins: [
// 大包前先清空旧的文件
new CleanWebpackPlugin(),
new htmlWebpackPlugin({
// title: "自定义标题"
template: './src/index.html',
}),
],
// 设置引用模块
resolve: {
extensions: ['.ts', '.js'],
},
}