账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack打包html压缩了html中的js没有压缩?
    41
    0

    webpack配置打包压缩html,html压缩了,但是html中写的script标签中的js没有压缩怎么办?

    webpack.common.js

    const webpack = require("webpack");
    const path = require('path');
    const glob = require('glob');
    const HtmlWebpackPlugin = require('html-webpack-plugin'); // html引擎
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    function buildEntriesAndHTML() {
        // 用来构建entery
        const result = glob.sync('views/**/*.js');
        const config = {
            hash: false,
            inject: true
        };
        const entries = {};
        const htmls = [];
        result.forEach(item => {
            const one = path.parse(item);
            const outputfile = one.dir.split('/').slice(-1)[0];
            entries[outputfile] = './' + item;
            htmls.push(
                new HtmlWebpackPlugin({
                    ...config,
                    template: './' + one.dir + '/index.html',
                    filename: './' + outputfile + '/index.html', // 输出html文件的路径
                    title:outputfile+'通用模版',
                    chunks: [outputfile]
                })
            );
        });
        if (htmls.length > 0) {
            htmls.push(new HtmlWebpackInlineSourcePlugin());
        }
        return {
            entries,
            htmls
        };
    }
    const final = buildEntriesAndHTML();
    
    module.exports = {
        entry: final.entries,
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {loader: 'postcss-loader', options: {plugins: [require("autoprefixer")("last 100 versions")]}}
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader?importLoaders=1',
                        {loader: 'postcss-loader', options: {plugins: [require("autoprefixer")("last 100 versions")]}},
                        'less-loader'
                    ]
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    /*use:[
                     {
                     loader: 'url-loader',
                     options: {
                     limit: 1024 * 10,
                     name: 'image/[name].[ext]',
                     fallback: 'file-loader'
                     }
                     },
                     {
                     loader: 'image-webpack-loader',// 压缩图片
                     options: {
                     bypassOnDebug: true,
                     }
                     }
                     ]*/
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'image/[name].[ext]',
                            }
                        },
                        {
                            loader: 'image-webpack-loader',// 压缩图片
                            options: {
                                bypassOnDebug: true,
                            }
                        }
                    ]
                },
                {
                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|swf|mov)(\?.*)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'media/[name].[hash:7].[ext]',
                            }
                        },
                    ]
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: [
                        {
                            loader: "html-loader",
                            options: {minimize: true} // 加载器切换到优化模式,启用压缩。
                        }
                    ]
                }
            ]
        },
        plugins: [
            new OptimizeCSSAssetsPlugin({
                assetNameRegExp: /\.css\.*(?!.*map)/g,  //注意不要写成 /\.css$/g
                cssProcessor: require('cssnano'),
                cssProcessorOptions: {
                    discardComments: {removeAll: true},
                    // 避免 cssnano 重新计算 z-index
                    safe: true,
                    // cssnano 集成了autoprefixer的功能
                    // 会使用到autoprefixer进行无关前缀的清理
                    // 关闭autoprefixer功能
                    // 使用postcss的autoprefixer功能
                    autoprefixer: false
                },
                canPrint: true
            }),
            new MiniCssExtractPlugin({
                filename: '[name]/[name].css',
                chunkFilename: '[name].css'
            }),
            ...final.htmls
        ],
        resolve: {
            extensions: ['.js', '.json', '.jsx', '.css']
        },
    }
    

    补充webpack.prod.js

    const merge = require('webpack-merge');
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const common = require('./webpack.common.js');
    const path = require('path')
    const BUILD_PATH = path.resolve(__dirname,'dist')  //  打包模板生成路径
    
    module.exports = merge(common, {
        output: { // 出口文件
            path: BUILD_PATH,
            publicPath: 'http://52.74.231.30/wangping/custom/',
            // publicPath: '/custom/',
            filename: '[name]/[name].js' //输出文件
        },
        devtool: 'source-map',
        plugins: [
            new CleanWebpackPlugin(['dist']),
            new UglifyJSPlugin({
                sourceMap: true,
                uglifyOptions: {
                    output: {
                        comments: true,
                    },
                }
            })
        ]
    });
    

    我好像找到了原因,html中的js由于含有es6的语法,打包没有编译es6语法,导致也没有压缩,我把es6的let改为var之后就不会有这个问题了,可以正常压缩在一起。

    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 熱情餵給風 普通会员 1楼

      在使用Webpack进行HTML文件的打包时,如果JavaScript文件没有被压缩,可能的原因有:

      1. 编译器设置:webpack使用了压缩插件,需要在webpack.config.js中配置压缩选项。例如,可以设置javascripts模块的importLoaders选项来启用压缩。

      2. 开发者工具设置:在webpack的命令行界面中,可以在webpack选项中添加--no-minify选项来禁用压缩。

      3. 环境变量设置:在webpack配置文件中,可以设置process.env.NODE_ENVproduction,然后在命令行中使用--no-minify选项。

      4. HTML文件的编码设置:如果HTML文件的编码设置不正确,可能会导致JavaScript文件未被正确压缩。可以使用html模块的transformers选项来指定HTML文件的编码。

      5. 编译器的设置:在webpack配置文件中,可以设置html模块的transformers选项来指定HTML文件的编码。

      6. JavaScript文件的大小:如果JavaScript文件过大,可能会导致压缩结果不理想。可以尝试优化JavaScript代码,或者使用更高效的压缩方法。

      以上是一些可能的原因,具体的解决方案需要根据实际情况来确定。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部