fantasticbin/typescript-snake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加配置文件oneOf优化，和babel及EsLint缓存优化

Browse Source
This commit is contained in:
fantasticbin 2022-06-12 12:50:27 +08:00
parent d372292b6a
commit 1e89d44664
4 changed files with 114 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -24,6 +24,7 @@ Babel：
- babel-loader；
- @babel/core；
- @babel/preset-env；
- @babel/plugin-transform-runtime；
Less & CSS资源：

78
config/webpack.dev.js
View File

@ -31,35 +31,53 @@ module.exports = {
// 指定要加载的规则
rules: [
{
// 指定规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: [
"babel-loader",
"ts-loader"
],
// 要排除的文件
exclude: /node_modules/
},
// 设置less文件的处理
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
// 引入postcss
// 使用oneOf去优化打包速度，当文件对应的处理loader被检测到，就不用再去遍历其他的loader，提升打包速度
oneOf: [
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env"
]
}
}
// 指定规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: [
// 配置babel
{
// 指定加载器
loader: "babel-loader",
// 设置babel
options: {
// 开启babel缓存
cacheDirectory: true,
// 关闭缓存文件压缩
cacheCompression: false,
// 减少代码体积
plugins: ["@babel/plugin-transform-runtime"],
}
},
"ts-loader"
],
// 要排除的文件
exclude: /node_modules/
},
"less-loader"
// 设置less文件的处理
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
// 引入postcss
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env"
]
}
}
},
"less-loader"
]
}
]
}
]
@ -73,6 +91,12 @@ module.exports = {
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
// 排除检查目录
exclude: "node_modules",
// 开启缓存
cache: true,
// 缓存输出文件路径
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache")
})
],

91
config/webpack.prod.js
View File

@ -37,35 +37,53 @@ module.exports = {
// 指定要加载的规则
rules: [
{
// 指定规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: [
"babel-loader",
"ts-loader"
],
// 要排除的文件
exclude: /node_modules/
},
// 设置less文件的处理
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
// 引入postcss
// 使用oneOf去优化打包速度，当文件对应的处理loader被检测到，就不用再去遍历其他的loader，提升打包速度
oneOf: [
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env"
]
}
}
// 指定规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: [
// 配置babel
{
// 指定加载器
loader: "babel-loader",
// 设置babel
options: {
// 开启babel缓存
cacheDirectory: true,
// 关闭缓存文件压缩
cacheCompression: false,
// 减少代码体积
plugins: ["@babel/plugin-transform-runtime"],
}
},
"ts-loader"
],
// 要排除的文件
exclude: /node_modules/
},
"less-loader"
// 设置less文件的处理
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
// 引入postcss
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env"
]
}
}
},
"less-loader"
]
}
]
}
]
@ -79,15 +97,28 @@ module.exports = {
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
// 排除检查目录
exclude: "node_modules",
// 开启缓存
cache: true,
// 缓存输出文件路径
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache")
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
new CssMinimizerPlugin()
filename: "static/css/main.css"
})
],
// 配置压缩插件，webpack5官方建议使用这种方式
optimization: {
minimizer: [
// css压缩
new CssMinimizerPlugin()
]
},
// 设置引用模块
resolve: {
extensions: [".ts", ".js"]

1
package.json
View File

@ -13,6 +13,7 @@
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"any-touch": "^2.2.0",
"babel-loader": "^8.2.5",