webpack压缩 html 和 js

转载请注明 来源: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
        }