/
webpack.config.js
118 lines (114 loc) · 3.35 KB
/
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// npm init -y 初始化 创建package.json文件
// npm i -D webpack webpack-cli typescript ts-loader 安装四个依赖
// 编写webpack配置文件
// 编写tsconfig.json文件
// 修改package.json中加上build命令
// npm i -D html-webpack-plugin //自动生成html
// npm i -D webpack-dev-server //自动响应浏览器更新
// npm i -D clean-webpack-plugin //清楚dist目录旧文件
//webpack 中所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: './src/index.ts',
// 指定打包文件所在目录
output: {
//指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
//打包后文件的名字
filename: 'bundle.js',
//告诉webpack不使用箭头函数
environment: {
arrowFunction: false,
const: false, //兼容ie10
},
},
//指定webpack打包时要使用的模块
module: {
// 指定要loader加载的规则
rules: [
// 设置ts文件的处理
{
// test指定的时规则生效的文件
test: /\.ts$/, //以ts结尾的文件
// 要使用的loader
use: [
// 配置babel
{
//指定加载器
loader: 'babel-loader',
// 设置babel
options: {
//设置预定义的环境
presets: [
[
//指定环境的插件
'@babel/preset-env',
// 配置信息
{
// 要兼容的目标浏览器及版本
targets: {
chrome: '58',
ie: '11',
},
//指定corejs的版本
corejs: '3',
//使用corejs的方式 "usage" 表示按需加载
useBuiltIns: 'usage',
},
],
],
},
},
// 'babel-loader',
'ts-loader',
],
// 要排除的文件
exclude: /node-modules/,
},
// 设置less文件的处理
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 引入postcss
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
browsers: 'last 2 versions', //兼容每个浏览器最新的两个版本
},
],
],
},
},
},
'less-loader',
],
},
],
},
// mode: "development", //设置mode
//配置Webpack 插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "这是一个自定义的title"、
template: './src/index.html',
}),
],
// 用来设置引用模块,可以将这些文件识别为模块
resolve: {
extensions: ['.ts', '.js'],
},
};