從零開始的webpack生活-0x004：js壓縮混淆

Riddler 發布于2019-08-21 17:27 / 742人閱讀

摘要：概述上一章講了關于生成模板的，并且最后將壓縮，這一章講的是壓縮混淆配置環境初始化項目新建修改配置安裝依賴修改初始化添加插件最終配置文件打包配置匹配上的文件才壓縮添加修改打包未被壓縮壓縮了取值正則匹配或者正則匹配數組需要壓

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 資源

源代碼

云服務器 GPU云服務器 JS壓縮及混淆工具從零開始的郵件服務器從零開始 linux從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89532.html

從零開始的webpack生活-0x001：webpack初次相逢

摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了 0x002 初始化項目結構 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評論0 收藏0
從零開始的webpack生活-0x005：DefinePlugin奇妙用處

摘要：注意該插件是簡單的字符串替換，所以如果是定義常量最好使用包裹要替換的內容，或者使用轉化，否則會變成代碼直接插入，比如版本號這樣替換的時候就會變成而不會變成導致錯誤的數據格式。 0x001 概述上一章講的是js壓縮混淆，和這一章沒有半毛錢關系，這章講的是DefinePlugin，一個好像沒有用，但其實很好用的一個插件，我很喜歡，嘿嘿嘿！ 0x002 插件介紹說白了，這是一個簡單的字符...

The question 2019-08-21 17:28 評論0 收藏0
從零開始的webpack生活-0x010：TemplatingLoader裝載模板

摘要：概述上一章講的時候關于文件相關的，這一章講的是模板相關的。環境配置栗子加載安裝依賴包編寫并引入配置低于否則使用打包并查看結果可以看到，被打包成了字符串，并封裝成模塊導出。更多資源，請查閱的倉庫和官網資源源代碼 0x001 概述上一章講的時候關于文件相關的loder，這一章講的是模板相關的loder。 0x002 環境配置 $ mkdir 0x010-templating-loader...

jk_v1 2019-08-21 17:31 評論0 收藏0
從零開始的webpack生活-0x011：StylingLoader裝載樣式

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...

mylxsw 2019-08-21 17:31 評論0 收藏0
從零開始的webpack生活-0x002：devServer自動刷新

摘要：概述上一章已經實現了最簡單的配置文件使用和監聽功能，這一章要開始實現自動刷新。只能在終端中使用的在章節中指令后標有可以使用的功能，快速調用終端最終項目文件夾結構資源源代碼 0x001 概述上一章已經實現了最簡單的webpack配置文件使用和webpack監聽功能，這一章要開始實現自動刷新。 0x002 瀏覽器自動刷新創建新的項目框架 - webpack_study + ...

AlanKeene 2019-08-21 17:27 評論0 收藏0