摘要:概述上一章讲了关于生成模板的,并且最后将压缩,这一章讲的是压缩混淆配置环境初始化项目新建修改配置安装依赖修改初始化添加插件最终配置文件打包配置匹配上的文件才压缩添加修改打包未被压缩压缩了取值正则匹配或者正则匹配数组需要压
0x001 概述
上一章讲了关于生成模板html的,并且最后将html压缩,这一章讲的是js压缩混淆
0x002 配置环境
初始化项目
</>复制代码
$ npm init -y
$ mkdir src
$ mkdir src/index.js
新建webpack.config.js
</>复制代码
var path = require("path")
module.exports = {
entry : path.resolve(__dirname, "index.js"),
output: {
path : path.resolve(__dirname, "dist"),
filename: "index.js"
}
}
修改配置
安装依赖
</>复制代码
npm i -D uglifyjs-webpack-plugin
修改./src/index.js
</>复制代码
document.write("hello webpack")
初始化
</>复制代码
var UglifyJSPlugin = require("uglifyjs-webpack-plugin")
添加插件
</>复制代码
plugins: [
new UglifyJSPlugin()
]
最终配置文件
</>复制代码
var path = require("path")
var UglifyJSPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
entry : path.resolve(__dirname, "index.js"),
output : {
path : path.resolve(__dirname, "dist"),
filename: "index.min.js"
},
plugins: [
new UglifyJSPlugin()
]
}
打包
</>复制代码
$ webpack
// ./dist/index.min.js
!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t){document.write("hello webpack")}]);
0x003 配置
匹配上的文件才压缩
添加index2.js
</>复制代码
document.write("hello webpack2")
修改entry、output、plugins
</>复制代码
var path = require("path")
var UglifyJSPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
entry : {
index : path.resolve(__dirname, "src/index.js"),
index2: path.resolve(__dirname, "src/index2.js")
},
output : {
path : path.resolve(__dirname, "dist"),
filename: "[name].min.js"
},
plugins: [
new UglifyJSPlugin({
test: /index2/i
})
]
}
打包
</>复制代码
`index.min.js`未被压缩
`index2.min.js`压缩了
取值
RegExp|Array
需要压缩的文件才压缩(测试失败了?日后再详细测试)
添加index3.js
</>复制代码
document.write("hello webpack3")
修改entry、output、plugins
</>复制代码
var path = require("path")
var UglifyJSPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
entry : {
index : path.resolve(__dirname, "src/index.js"),
index2: path.resolve(__dirname, "src/index2.js"),
index3: path.resolve(__dirname, "src/index3.js")
},
output : {
path : path.resolve(__dirname, "dist"),
filename: "[name].min.js"
},
plugins: [
new UglifyJSPlugin({
test: /index2/i,
include: /index3/i
})
]
}
打包
</>复制代码
`index.min.js`未被压缩
`index2.min.js`压缩了
`index3.min.js`压缩了
取值
RegExp|Array
排除某些文件(测试失败了?日后再详细测试)
添加index4.js
</>复制代码
document.write("hello webpack4")
修改entry、output、plugins
</>复制代码
var path = require("path")
var UglifyJSPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
entry : {
index : path.resolve(__dirname, "src/index.js"),
index2: path.resolve(__dirname, "src/index2.js"),
index3: path.resolve(__dirname, "src/index3.js"),
index4: path.resolve(__dirname, "src/index4.js")
},
output : {
path : path.resolve(__dirname, "dist"),
filename: "[name].min.js"
},
plugins: [
new UglifyJSPlugin({
test: /index2/i,
include: /index3/i
})
]
}
打包
</>复制代码
`index.min.js`未被压缩
`index2.min.js`压缩了
`index3.min.js`压缩了
`index4.min.js`未被压缩
取值
RegExp|Array
生成sourceMap
修改配置
</>复制代码
new UglifyJSPlugin({
test : /.js($|?)/i,
include : /index3/,
exclude : /index4/,
sourceMap : true,
})
打包
自定义压缩细节
这里可以配置的项非常多,包括是否兼容ie8、是否支持es5、6、7、8等等,还可以配置压缩的各种细节,包括是否保留注释之类的,其实使用默认就差不多了,需要的时候再去配置细节,比如anuglar中如果压缩了变量名可能导致找不到注入的服务
</>复制代码
new UglifyJSPlugin({
test : /.js($|?)/i,
include : /index3/,
exclude : /index4/,
sourceMap : true,
uglifyOptions: {
ie8 : true,
ecma : 6,
mangle : true,
compress: true,
warnings: false
}
})
更多细节配置,参考webpack关于UglifyJSPlugin章节
0x004 资源
源代码
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89532.html
摘要:同时不能直接单纯的指定输出的文件名称,比如,将会报错,可以换成以下方式指定,或者其他类似方式。如果打包过程出现错误,比如语法错误,将会在控制台以红色文字显示,并且在你修复之后会再次打包。 0x001 概述 其实我不知道怎么写,所以决定就一块一块的写点平常配置的过程,根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...
摘要:注意该插件是简单的字符串替换,所以如果是定义常量最好使用包裹要替换的内容,或者使用转化,否则会变成代码直接插入,比如版本号这样替换的时候就会变成而不会变成导致错误的数据格式。 0x001 概述 上一章讲的是js压缩混淆,和这一章没有半毛钱关系,这章讲的是DefinePlugin,一个好像没有用,但其实很好用的一个插件,我很喜欢,嘿嘿嘿! 0x002 插件介绍 说白了,这是一个简单的字符...
摘要:概述上一章讲的时候关于文件相关的,这一章讲的是模板相关的。环境配置栗子加载安装依赖包编写并引入配置低于否则使用打包并查看结果可以看到,被打包成了字符串,并封装成模块导出。更多资源,请查阅的仓库和官网资源源代码 0x001 概述 上一章讲的时候关于文件相关的loder,这一章讲的是模板相关的loder。 0x002 环境配置 $ mkdir 0x010-templating-loader...
0x001 概述 上一章讲的是装载模板,这一章讲的是装载样式 0x002 配置环境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...
摘要:概述上一章已经实现了最简单的配置文件使用和监听功能,这一章要开始实现自动刷新。只能在终端中使用的在章节中指令后标有可以使用的功能,快速调用终端最终项目文件夹结构资源源代码 0x001 概述 上一章已经实现了最简单的webpack配置文件使用和webpack监听功能,这一章要开始实现自动刷新。 0x002 浏览器自动刷新 创建新的项目框架 - webpack_study + ...
阅读 2553·2021-11-17 09:33
阅读 848·2021-11-04 16:13
阅读 1413·2021-10-14 09:50
阅读 755·2019-08-30 15:53
阅读 3738·2019-08-30 14:18
阅读 3334·2019-08-30 14:14
阅读 2175·2019-08-30 12:46
阅读 3248·2019-08-26 14:05