使用 Webpack 缩小 jQuery 文件并将引用更新为 HTML？答案

【问题标题】：Using Webpack to minify jQuery files & update references into HTML?使用 Webpack 缩小 jQuery 文件并将引用更新为 HTML？
【发布时间】：2020-01-21 05:58:17
【问题描述】：

我有大约 10 个单独的页面，每个 HTML 文件中分别包含库引用和自定义 jQuery 代码。

可以使用 Webpack 来缩小 Javascript 文件。
在构建期间将 .js 文件的引用转换为我所有 HTML 中的 .min.js？

所有搜索参考 w.r.t webpack 都指向使用 index.js 启动的 ES6 模块，我没有 :-(

【问题讨论】：

你是用 Node 还是 NPM 命令来缩小每个 JS 文件？
你的问题的解决方案似乎在这里解释dev.to/mariorodeghiero/…

标签： javascript jquery webpack babeljs uglifyjs

【解决方案1】：

你可以在优化中使用script-loader和terser-webpack-plugin 最小化您的文件。

但是对于一项小任务，您最终会配置太多。这不值得努力。

我建议使用一些 npm 插件，例如

webpack-merge-and-include-globally

或者只是使用cpx将文件复制到dist并在复制时对其进行转换。

【讨论】：

【解决方案2】：

可以使用 Webpack 来缩小 Javascript 文件。

是的，您可以通过多种方式解析文件，ES6 模块、别名、扩展名，然后使用任何可用的插件来缩小文件。

这里有几种配置分辨率部分的方法：
https://webpack.js.org/configuration/resolve/

// alias
resolve: {
    alias: {
        '~': Path.resolve(__dirname, '/src')
    }
},

// module
resolve: {
    modules: [SRC_DIR, '/src']
},

// extension
resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json']
},

然后进行缩小：
https://webpack.js.org/plugins/terser-webpack-plugin/
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
            }),
        ],
    },
};

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
            }),
        ],
    },
};

你需要一个编译器来编译你的 .js 文件，这样你就可以使用 babel 来编译它

module:{
    rules:[
    {
        test:/\.js$/,
        use:['babel-loader']
    }
    ]
}

在构建期间将 .js 文件的引用转换为我所有 HTML 中的 .min.js？

要创建许多输出，您应该考虑检查此
Minify multiple javascript files with webpack

【讨论】：

【解决方案3】：

您可以使用 JScompress 之类的工具：https://jscompress.com/

JSCompress 将所有代码压缩并压缩为单个 javascript 代码。

然后您可以为您的 HTML 提供单个 JS 文件，例如 bundle.[crc32_signature].js

此外，您可以管理 HTML 缓存以减少网络瓶颈。

https://developer.mozilla.org/fr/docs/Web/HTTP/Cache

【讨论】：