From 1e89d4466406e9cdc8f4caa398075e4ee1267c73 Mon Sep 17 00:00:00 2001 From: fantasticbin Date: Sun, 12 Jun 2022 12:50:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=85=8D=E7=BD=AE=E6=96=87?= =?UTF-8?q?=E4=BB=B6oneOf=E4=BC=98=E5=8C=96=EF=BC=8C=E5=92=8Cbabel?= =?UTF-8?q?=E5=8F=8AEsLint=E7=BC=93=E5=AD=98=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + config/webpack.dev.js | 78 +++++++++++++++++++++++------------- config/webpack.prod.js | 91 ++++++++++++++++++++++++++++-------------- package.json | 1 + 4 files changed, 114 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index 030d11f..3663654 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,7 @@ Babel： - babel-loader； - @babel/core； - @babel/preset-env； +- @babel/plugin-transform-runtime； Less & CSS资源： diff --git a/config/webpack.dev.js b/config/webpack.dev.js index 0166a94..83eb057 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.js @@ -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") }) ], diff --git a/config/webpack.prod.js b/config/webpack.prod.js index 186499c..32aa855 100644 --- a/config/webpack.prod.js +++ b/config/webpack.prod.js @@ -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"] diff --git a/package.json b/package.json index 92ef3db..06d80ff 100644 --- a/package.json +++ b/package.json @@ -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",