- 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文件没有被压缩,可能的原因有:
-
编译器设置:webpack使用了压缩插件,需要在webpack.config.js中配置压缩选项。例如,可以设置
javascripts模块的importLoaders选项来启用压缩。 -
开发者工具设置:在webpack的命令行界面中,可以在
webpack选项中添加--no-minify选项来禁用压缩。 -
环境变量设置:在webpack配置文件中,可以设置
process.env.NODE_ENV为production,然后在命令行中使用--no-minify选项。 -
HTML文件的编码设置:如果HTML文件的编码设置不正确,可能会导致JavaScript文件未被正确压缩。可以使用
html模块的transformers选项来指定HTML文件的编码。 -
编译器的设置:在webpack配置文件中,可以设置
html模块的transformers选项来指定HTML文件的编码。 -
JavaScript文件的大小:如果JavaScript文件过大,可能会导致压缩结果不理想。可以尝试优化JavaScript代码,或者使用更高效的压缩方法。
以上是一些可能的原因,具体的解决方案需要根据实际情况来确定。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
