批量对js压缩

Webpack配置

1. 创建或修改webpack.config.js

在项目的根目录下创建一个webpack.config.js文件，并写入以下配置：

const path = require('path');
const fs = require('fs');
const TerserPlugin = require('terser-webpack-plugin');

// 获取gm目录下的所有JavaScript文件作为入口
const jsFiles = fs.readdirSync(path.resolve(__dirname, 'src/main/resources/static/js/gm'))
                  .filter(file => file.endsWith('.js'));

const entries = jsFiles.reduce((entries, file) => {
  const name = path.basename(file, '.js'); // 获取文件名作为入口名
  entries[name] = path.resolve(__dirname, 'src/main/resources/static/js/gm', file);
  return entries;
}, {});

module.exports = {
  mode: 'production',
  entry: entries,
  output: {
    filename: '[name].bundle.js', // 输出文件名使用入口名
    path: path.resolve(__dirname, 'src/main/resources/static/dist'), // 输出目录
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

为了将src/main/resources/static/js/gm目录下的所有JavaScript文件使用Webpack进行压缩并输出到一个指定的目录，你可以设置Webpack的配置来处理该目录下的所有文件。以下是如何编写webpack.config.js的具体步骤：

Webpack配置

1. 创建或修改webpack.config.js

在项目的根目录下创建一个webpack.config.js文件，并写入以下配置：

为了将src/main/resources/static/js/gm目录下的所有JavaScript文件使用Webpack进行压缩并输出到一个指定的目录，你可以设置Webpack的配置来处理该目录下的所有文件。以下是如何编写webpack.config.js的具体步骤：

Webpack配置

1. 创建或修改webpack.config.js

在项目的根目录下创建一个webpack.config.js文件，并写入以下配置：

解释配置

• entry: 使用文件系统模块（fs）读取gm目录下所有以.js结尾的文件，创建一个动态入口配置。
• output: 输出的文件放置在src/main/resources/static/dist目录下，每个输入文件将被编译成一个名为[name].bundle.js的输出文件，其中[name]是输入文件名。
• optimization.minimize: 启用代码压缩，使用TerserPlugin进行优化。

使用Webpack进行打包

1. 安装Webpack及其插件

在项目根目录下运行以下命令安装Webpack及相关插件：

我是必须 管理员运行IDEA,然后在终端中执行命令

npm install --save-dev webpack webpack-cli terser-webpack-plugin

2. 执行Webpack打包

在项目根目录下运行以下命令进行打包：

npx webpack

这将会在src/main/resources/static/dist目录下生成压缩后的JavaScript文件。

<script src="/dist/file1.bundle.js"></script>
<script src="/dist/file2.bundle.js"></script>

这里file1和file2是原始JavaScript文件的名字（不含后缀）。

将构建过程整合到Spring Boot中

不论你选择Webpack还是Gulp，建议将构建过程整合到Spring Boot的构建生命周期中。可以通过在pom.xml中配置Maven插件，自动化构建过程。例如：

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.2.0</version>
            <executions>
                <execution>
                    <id>copy-resources</id>
                    <phase>package</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${project.build.directory}/classes/static/dist</outputDirectory>
                        <resources>
                            <resource>
                                <directory>src/main/resources/static/dist</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

注意:安装过程中我一直下载官方源失败,因为国外卡.后面我换成cnpm就秒安装了.

使用cnpm

cnpm是阿里巴巴维护的一个npm的国内镜像工具，它可以加快在中国大陆地区的下载速度。

安装cnpm:

npm install -g cnpm --registry=https://registry.npmmirror.com

使用cnpm进行安装:

cnpm install --save-dev webpack webpack-cli terser-webpack-plugin

最后发现一个问题,似乎这个工具不适合我的项目,我用监听按钮调用的方法,他识别为未使用,不给我压缩.我现在换个工具:gulp

使用cnpm安装:

cnpm install --save-dev gulp gulp-terser

Idea项目中的跟目录下添加 gulpfile.js 

const gulp = require('gulp');
const terser = require('gulp-terser');

// 定义任务压缩所有JS文件
gulp.task('compress', function () {
  return gulp.src('src/main/resources/static/js/gm/**/*.js') // 指定源文件
      .pipe(terser()) // 压缩JS
      .pipe(gulp.dest('src/main/resources/static/dist')); // 输出到目标路径
});

手动执行压缩代码:

npx gulp compress   

为了编译之后自动构建:

1.根目录添加 package.json 中定义 compress-js 脚本：

{
  "scripts": {
    "compress-js": "gulp compress"
  }
}

2.修改我的pom文件

<build>
    <finalName>gm</finalName>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>

        <!-- 自动根据数据库表结构生成dao的XML和pojo -->
        <plugin>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-maven-plugin</artifactId>
            <version>1.3.7</version>
            <configuration>
                <verbose>true</verbose>
                <overwrite>true</overwrite>
            </configuration>
        </plugin>

        <!-- 添加 exec-maven-plugin 用于执行 Gulp 任务 -->
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <version>3.0.0</version>
            <executions>
                <execution>
                    <id>gulp-compress</id>
                    <phase>prepare-package</phase> <!-- 在 prepare-package 阶段运行 -->
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <configuration>
                        <executable>npm</executable>
                        <workingDirectory>${project.basedir}</workingDirectory>
                        <arguments>
                            <argument>run</argument>
                            <argument>compress-js</argument> <!-- 执行 npm script 中的 compress-js 任务 -->
                        </arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>