轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack壓縮 html 和 js

一、壓縮 js

/*
    webpack.config.js webpack的配置文件
*/
module.exports = {
    …………

    //模式  development  開發環境，production 生產環境
    //mode: 'development',
    //生產環境下會自動壓縮js代碼
    mode: 'production'
    
    …………
}

mode 為production（生產環境）時，將自動壓縮 js 不用特殊配置，因為 production模式下默認加載了UglifysPlugin插件。

二、壓縮 html

/*
    webpack.config.js webpack的配置文件
*/
module.exports = {
    …………

    // plugins的配置
    plugins: [
        //詳細的plugins配置
        //html-webpack-plugin
        //功能:默認會創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
        //需求:需要有結構的HTML文件
        new HtmlWebpackPlugin({
            //復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html',
            //壓縮 html 代碼
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注釋
                removeComments: true
            }
           
        })

    ],
    
    …………
}

html 壓縮主要在配置HtmlWebpackPlugin插件時加入一下配置就行

      //壓縮 html 代碼
        minify: {
            //移除空格
            collapseWhitespace: true,
            //移除注釋
            removeComments: true
        }