資訊專欄INFORMATION COLUMN
摘要：概述上一章講了關(guān)于生成模板的，并且最后將壓縮，這一章講的是壓縮混淆配置環(huán)境初始化項(xiàng)目新建修改配置安裝依賴修改初始化添加插件最終配置文件打包配置匹配上的文件才壓縮添加修改打包未被壓縮壓縮了取值正則匹配或者正則匹配數(shù)組需要壓
0x001 概述
上一章講了關(guān)于生成模板html的，并且最后將html壓縮，這一章講的是js壓縮混淆
0x002 配置環(huán)境
初始化項(xiàng)目
$ 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
需要壓縮的文件才壓縮(測(cè)試失敗了？日后再詳細(xì)測(cè)試)
添加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
排除某些文件(測(cè)試失敗了？日后再詳細(xì)測(cè)試)
添加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,
})
打包
自定義壓縮細(xì)節(jié)
這里可以配置的項(xiàng)非常多，包括是否兼容ie8、是否支持es5、6、7、8等等，還可以配置壓縮的各種細(xì)節(jié)，包括是否保留注釋之類的，其實(shí)使用默認(rèn)就差不多了，需要的時(shí)候再去配置細(xì)節(jié)，比如anuglar中如果壓縮了變量名可能導(dǎo)致找不到注入的服務(wù)
new UglifyJSPlugin({
test : /.js($|?)/i,
include : /index3/,
exclude : /index4/,
sourceMap : true,
uglifyOptions: {
ie8 : true,
ecma : 6,
mangle : true,
compress: true,
warnings: false
}
})
更多細(xì)節(jié)配置，參考webpack關(guān)于UglifyJSPlugin章節(jié)
0x004 資源
源代碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89532.html
摘要：同時(shí)不能直接單純的指定輸出的文件名稱，比如，將會(huì)報(bào)錯(cuò)，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯(cuò)誤，比如語(yǔ)法錯(cuò)誤，將會(huì)在控制臺(tái)以紅色文字顯示，并且在你修復(fù)之后會(huì)再次打包。 0x001 概述 其實(shí)我不知道怎么寫，所以決定就一塊一塊的寫點(diǎn)平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項(xiàng)目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...
摘要：注意該插件是簡(jiǎn)單的字符串替換，所以如果是定義常量最好使用包裹要替換的內(nèi)容，或者使用轉(zhuǎn)化，否則會(huì)變成代碼直接插入，比如版本號(hào)這樣替換的時(shí)候就會(huì)變成而不會(huì)變成導(dǎo)致錯(cuò)誤的數(shù)據(jù)格式。 0x001 概述 上一章講的是js壓縮混淆，和這一章沒有半毛錢關(guān)系，這章講的是DefinePlugin，一個(gè)好像沒有用，但其實(shí)很好用的一個(gè)插件，我很喜歡，嘿嘿嘿！ 0x002 插件介紹 說白了，這是一個(gè)簡(jiǎn)單的字符...
摘要：概述上一章講的時(shí)候關(guān)于文件相關(guān)的，這一章講的是模板相關(guān)的。環(huán)境配置栗子加載安裝依賴包編寫并引入配置低于否則使用打包并查看結(jié)果可以看到，被打包成了字符串，并封裝成模塊導(dǎo)出。更多資源，請(qǐng)查閱的倉(cāng)庫(kù)和官網(wǎng)資源源代碼 0x001 概述 上一章講的時(shí)候關(guān)于文件相關(guān)的loder，這一章講的是模板相關(guān)的loder。 0x002 環(huán)境配置 $ mkdir 0x010-templating-loader...
0x001 概述 上一章講的是裝載模板，這一章講的是裝載樣式 0x002 配置環(huán)境 $ 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...
摘要：概述上一章已經(jīng)實(shí)現(xiàn)了最簡(jiǎn)單的配置文件使用和監(jiān)聽功能，這一章要開始實(shí)現(xiàn)自動(dòng)刷新。只能在終端中使用的在章節(jié)中指令后標(biāo)有可以使用的功能，快速調(diào)用終端最終項(xiàng)目文件夾結(jié)構(gòu)資源源代碼 0x001 概述 上一章已經(jīng)實(shí)現(xiàn)了最簡(jiǎn)單的webpack配置文件使用和webpack監(jiān)聽功能，這一章要開始實(shí)現(xiàn)自動(dòng)刷新。 0x002 瀏覽器自動(dòng)刷新 創(chuàng)建新的項(xiàng)目框架 - webpack_study + ...
閱讀 2533·2021-11-17 09:33
閱讀 834·2021-11-04 16:13
閱讀 1392·2021-10-14 09:50
閱讀 748·2019-08-30 15:53
閱讀 3729·2019-08-30 14:18
閱讀 3321·2019-08-30 14:14
閱讀 2159·2019-08-30 12:46
閱讀 3237·2019-08-26 14:05
