1. 程式人生 > >(6/24) 外掛配置:輕鬆配置JS檔案壓縮

(6/24) 外掛配置:輕鬆配置JS檔案壓縮

實際開發中,在專案上線之前,我們編寫的js程式碼是需要進行壓縮的,我們可以採取壓縮軟體或者線上進行壓縮,這不是我們的重點,在webpack中實現JS程式碼的壓縮才是本節的核心。

通過webpack中可實現的JS程式碼壓縮是通過外掛的方式實現的----uglifyjs-webpack-plugin(JS壓縮外掛,簡稱uglify)。

注意:雖然uglifyjs是外掛,但是webpack版本里預設已經整合,不需要再次安裝。

1.使用uglify外掛實現JS程式碼壓縮

 

1.1 外掛引入

首先需要在webpack.config.js中引入uglifyjs-webpack-plugin外掛

const uglify = require('uglifyjs-webpack-plugin');

1.2 配置

引入後在plugins配置裡new一個 uglify物件就可以了,程式碼如下:

 plugins:[
        new uglify()
    ],

1.3 打包

在webstorm的終端中使用webpack進行打包,得到壓縮後的JS程式碼。

webpack

壓縮後的程式碼格式:

這樣就實現了JS程式碼的壓縮。

注意:當我們想在終端中輸入了npm run server進行預覽,但發現終端中報錯了,具體原因我們在下一節進行解析。。

目前webpack.config.js檔案中的所有程式碼為:

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports={
    //入口檔案的配置項
    entry:{
        entry:'./src/entry.js',
        //這裡我們又引入了一個入口檔案
        entry2:'./src/entry2.js',
    },
    //出口檔案的配置項
    output:{
        //輸出的路徑,用了Node語法
path:path.resolve(__dirname,'dist'), //輸出的檔名稱 filename:'[name].js' }, //模組:例如解讀CSS,圖片如何轉換,壓縮 module:{ rules: [ { test:/\.css$/, use:['style-loader','css-loader'] } ] }, //外掛,用於生產模版和各項功能 plugins:[ new uglify() ], //配置webpack開發服務功能 devServer:{ contentBase:path.resolve(__dirname,'dist'), //絕對路徑 host:'localhost', compress:true, port:1818 } }