webpack打包后发现有一部分代码还携带注释,如何解决?/webpack打包删除注释以及console.log--快快点进来看一看吧~~
1.自己配置了一个webpack,打包后发现里边部分代码还存在注释,顿感不妙
废话不多说 解决如下:
npm install terser-webpack-plugin --save-dev
然后在webpack.config.js文件中进行配置
const TerserWebpackPlugin = require('terser-webpack-plugin');
// 实例化TerserWebpackPlugin对象
const terserPlugin = new TerserWebpackPlugin({
parallel: 4,
extractComments: true,
terserOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'] //移除console
}
}
});
module.exports = {
optimization: {
minimizer: [
// 只有打包环境为production时才能生效
terserPlugin
],
},
}
开开心心运行 npm run build
啪啪啪打脸,报错了,报错信息如下:
const hooks = compiler.webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation);
TypeError: Cannot read property 'javascript' of undefined
解决问题:由于terser-webpack-plugin@5与webpack @ 4不兼容,所以运行npm uninstall terser-webpack-plugin
然后运行 试一把~~~~
npm install terser-webpack-plugin@4.2.3 --save-dev
打包成功了 为啥还有注释????
啪啪啪又打脸了????!!!!
好了,最终发现原因,因为生产环境配置了devtool: 'cheap-module-eval-source-map'导致代码被转成了字符串,所以无法删除注释
最终解决方案如下: 打包时候注释掉 webpack.config.js里的
devtool: 'cheap-module-eval-source-map', //开发环境下使用
保存代码 ,重新打包~ 完美~~
完整版的webpack.config.js配置,打包时候记得注释掉那个map插件,然后publicPath根据需要设置,其实注释掉不要也可以的
// 如果有額外的.babelrc配置的話就可以使用這段代碼1
// module.exports = {
// module: {
// rules: [
// {
// test:/\.jsx?$/,
// use: ['babel-loader'],
// exclude:/node_modules/ //排除 node_modules目錄
// }
// ]
// }
// }
// 如果有額外的.babelrc配置的話就可以使用這段代碼2
// 在webpack中配置 babel,如果沒有額外的.babelrc配置的話就可以使用這段代碼1
//webpack.config.js
// 首先引入插件1
// 导入terser-webpack-plugin-->减少js体积(其中删除js的console.log和注释)
const TerserWebpackPlugin = require('terser-webpack-plugin')
// 实例化TerserWebpackPlugin对象
const terserPlugin = new TerserWebpackPlugin({
parallel: 4,
extractComments: true,
terserOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'], //移除console
},
},
})
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const isDev = process.env.NODE_ENV.trim() === 'development' //html-webpack-plugin 的 config 的妙用4-1
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //清理dist目錄的插件
const path = require('path') //設置出口使用
const config = require('./public/config')[isDev ? 'dev' : 'build'] //html-webpack-plugin 的 config 的妙用4-2
module.exports = {
entry: './src/index.js', //webpack的默認配置,也可以寫一個數組
output: {
path: path.resolve(__dirname, 'dist'), //必須是絕對路徑
// filename: 'bundle.js',
// filename: 'bundle.[hash].js',
filename: 'bundle.[hash:6].js', //考虑到CDN缓存的问题,我们一般会给文件名加上 hash
// publicPath: '/' // 打包上线之前要改一下这个哦TODU-LIST
},
mode: isDev ? 'development' : 'production', //html-webpack-plugin 的 config 的妙用4-3
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
[
'@babel/plugin-transform-runtime',
{
corejs: 3,
},
],
],
},
},
exclude: /node_modules/,
},
{
//看清楚啦 這裡有四個loaderloader 的执行顺序是从右向左执行的,也就是后面的 loader 先执行,上面 loader 的执行顺序为: less-loader ---> postcss-loader ---> css-loader ---> style-loader
test: /\.(le|c)ss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')({
overrideBrowserslist: ['>0.25%', 'not dead'],
}),
]
},
},
},
'less-loader',
],
exclude: /node_modules/,
},
{
test: /\.(png|jpg|gif|jpeg|webp|svg|eot|gltf|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
// options: {
// limit: 10240, //10K
// esModule: false
// }
// ,
// 使用上面的那一段運行後會把圖片名字改為MD5哈希值,使用下面的會保留原有名稱加上六位哈希值
options: {
limit: 10240, //10K
// publicPath: './src/',
esModule: false,
name: '[name]_[hash:0].[ext]',
outputPath: 'assets', //這個可以將打包後的資源放到指定的文件夾下
},
},
],
exclude: /node_modules/,
},
// {
// test: /\.html$/,
// use: 'html-withimg-loader'
// },
],
},
optimization: {
minimizer: [
// 只有打包环境为production时才能生效
terserPlugin,
],
},
plugins: [
// 數組,放著所有的webpack插件
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
config: config.template, //html-webpack-plugin 的 config 的妙用4-4
minify: {
removeAttributeQuotes: false, //是否刪除屬性的雙引號
collapseWhitespace: false, //是否折疊空白
},
hash: true, //是否加上hash,默認是false
}),
new CleanWebpackPlugin(), //清理dist目錄插件,不需要傳參數,它自己可以找到outPath
// new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns:['**/*','!dll','!dll/**']}) //如果你有需要不刪除dll目錄下的文件的話可以這樣子寫
new CopyWebpackPlugin({
patterns: [
{
from: 'src/assets/',
to: 'assets/',
},
],
}),
],
devServer: {
port: '8080', //默認是8080
quiet: false, //默認不啟動
inline: true, // 默認開啟inline 模式,如果設置為false, 開啟 iframe模式
stats: 'errors-only', //終端僅僅打印 error
overlay: false, //默認不啟用
clientLogLevel: 'silent', //日誌等級
compress: true, //是否啟用gzip壓縮
},
devtool: 'cheap-module-eval-source-map', //开发环境下使用 打包上线之前要改一下这个哦TODU-LIST
}
// 在webpack中配置 babel,如果沒有額外的.babelrc配置的話就可以使用這段代碼2
webpack打包后发现有一部分代码还携带注释,如何解决?/webpack打包删除注释以及console.log--快快点进来看一看吧~~的更多相关文章
- webpack--性能优化之打包构建速度和代码调试优化
前言 本文来总结写webpack 在性能方面常见的优化方案. 正文 本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案,如下: 1.开发环境性能优化 (1)优化打包构建速度 a ...
- 全网最贴心webpack系列教程和配套代码
webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...
- 彻底解决Webpack打包慢的问题
转载 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Route ...
- 解决webpack打包速度慢的解决办法
技巧1 webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的.在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了 ...
- webpack优化之玩转代码分割和公共代码提取
前言 开发多页应用的时候,如果不对webpack打包进行优化,当某个模块被多个入口模块引用时,它就会被打包多次(在最终打包出来的某几个文件里,它们都会有一份相同的代码).当项目业务越来越复杂,打包出来 ...
- webpack中css文件的代码分割
module.exports = { output: { filename: '[name].js', chunkFilename: '[name].chunk.js', path: path.res ...
- 解决 webpack 打包文件体积过大
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...
- 51ak带你看MYSQL5.7源码2:编译现有的代码
从事DBA工作多年 MYSQL源码也是头一次接触 尝试记录下自己看MYSQL5.7源码的历程 目录: 51ak带你看MYSQL5.7源码1:main入口函数 51ak带你看MYSQL5.7源码2:编译 ...
- 解决webpack因新版本打包失败问题--ERROR in multi ./src/main.js ./dist/bundle.js
最近在学习webpack打包过程中遇到的一个问题向大家分享下! 创建了一个webpacksty的目录,目录下放着dist,src子目录,然后通过node环境下,npm init -y 初始化项目出现p ...
- java中异常抛出后代码还会继续执行吗
今天遇到一个问题,在下面的代码中,当抛出运行时异常后,后面的代码还会执行吗,是否需要在异常后面加上return语句呢? public void add(int index, E element){ i ...
随机推荐
- [转]VB中资源文件.res的使用方法详解
来源:https://blog.csdn.net/miaozk2006/article/details/82417156 在几乎所有的Windows应用程序中都拥有资源文件,这些文件定义使用应用程序将 ...
- vue-axios 输入参数获取数据的写法
<template> <div class="nav"> <input v-model="name" type="tex ...
- Istio Ambient Mesh七层服务治理图文详解
摘要:本文主要集中剖析Ambient mesh七层服务治理相关内容. 本文分享自华为云社区<Istio Ambient Mesh七层服务治理图文详解>,作者:华为云云原生团队. 由于Amb ...
- 检测轮廓 获取其最值的坐标 opencv-python
一.基础知识 图像清晰度评价算法有多种 空域中,主要考察图像的邻域对比度,即相邻像素间灰度特征的 梯度差: 频域中,主要考察图像的频率分量,清晰的图像高频分量多,模糊的图像低频分量多. 灰度值 把白色 ...
- Archlinux安装Picgo配置Typora
Typora堪称为markdown界的老大哥,其大名我们多有耳闻,所见即所的就是他的特点.但是在日常使用中,也经常会碰到一些特别的需求,比如:希望图片能够上传到云端. 怎么将markdown即时粘贴的 ...
- linux系统启动达梦迁移工具失败解决办法
在达梦数据库服务端的tool目录下执行./dts来启动迁移工具,迁移工具启动前出现报错,以下提供几种遇到问题的解决办法: 1. 报错1: 执行./dts,报错提示: [yyuser@qy-ggyf-z ...
- MongoDB 数据库的学习
一.MongoDB的简介 1.MongoDB是什么? MongoDB 是由 C++ 语言编写的,基于分布式文件存储的数据库,是一个介于关系数据库和非关系数据库之间的产品,是最接近于关系型数据库的 No ...
- Go语言核心36讲02
你好,我是郝林,今天我分享的主题是,学习专栏的正确姿势. 到了这里,专栏的全部内容已经都推送到你的面前了.如果你已经同步学习完了,那么我要给你点一个大大的赞! 还没有看完的同学也不要着急,因为推送的速 ...
- Pairs of Numbers 辗转相除
# 42. Pairs of Numbershttps://blog.csdn.net/qq_43521140/article/details/107853492- 出题人:OJ- 标签:[" ...
- 二叉树总结——BiTree
在C++编译器下可直接运行 #include <stdio.h> #include <malloc.h> //算法思想:先读入根结点数据,并且创建根结点,在读入左子树数据并创建 ...