-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
99 lines (99 loc) · 2.67 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
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //分离js中的css
module.exports = {
// 模块的入口文件
entry: "./src/index.jsx",
output: {
// 输出文件的名称
filename: "index.js",
// 输出文件的存放目录
path: path.resolve(__dirname, "lib"),
library: {
name: "wasabi-tree",
type: "umd",
},
clean: true, // 在生成文件之前清空 output 目录
},
// 通过正则命中所有以 react 或者 babel-runtime 开头的模块
// 这些模块使用外部的,不能被打包进输出的代码里
externals:
/^(react|react\-dom|prop\-types|xlsx|lodash|wasabi\-api|wangeditor)/,
module: {
// 加载器配置
rules: [
// .js 文件使用babel 来编译处理,react 需要几个插件
{
test: /\.js[x]?$/,
use: [
{
loader: "babel-loader",
},
],
},
//.css 文件使用 style-loader 和 css-loader 来处理,注意这里可以使用要引用MiniCssExtractPlugin,独立出来
{
test: /\.(css)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader?minimize",
],
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader?minimize",
"sass-loader",
],
},
{
test: /\.(less)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader?minimize",
"less-loader",
],
},
{
test: /\.(ico|gif|png|jpg|jpeg|bmp)$/i,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 50 * 1024,
},
},
},
{
test: /\.(svg|woff|woff2|eot|ttf|otf)$/i,
type: "asset/inline", //使用这种才能导出字体
},
],
},
mode: "production",
optimization: {
minimize: true,
},
plugins: [
//分离js中的css,独立打包
new MiniCssExtractPlugin({
ignoreOrder: true, //忽略警告
filename: "index.css", //对应于entry里面生成出来的文件名
}),
],
resolve: {
//别名,快速访问
alias: {
"@": path.resolve(__dirname, "./src"),
},
//指定模块路径,可以不设置,有默认值,方便更快的打包
modules: ["node_modules", path.join(__dirname, "./node_modules")],
//其它解决方案配置 自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
extensions: [".js", ".jsx", ".json", ".css", ".scss", ".sass", ".less"],
},
};