静态Html+JS压缩

有一个静态网站，本来直接部署就可以，但想着，是不是可以压缩一下代码，使得代码更小，访问更快一点呢？

前端 Vue2.0 / React 打包工具都是 WebPack ，大工程模板化打包神器，用来打包静态文件实属是杀鸡用牛刀，不过尽管试试。

尝试WebPack压缩静态文件

1. 创建一个目录 webpack-demo ，安装一下依赖

   $ cd webpack-demo
   # 安装webpack
   $ npm install webpack webpack-cli -g
   # 安装插件
   $ npm install html-webpack-plugin
   
   # 源码
   $ ls src
   index.html main.js
   
   # 配置文件
   $ vim webpack.config.js
   
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     mode: 'production',
     entry: './src/main.js', // 这里是你的入口 JavaScript 文件路径
     output: {
       filename: 'main.min.js', // 输出的压缩后的 JavaScript 文件名
       path: __dirname + '/dist' // 输出目录
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html', // 这里是你的 HTML 模板文件路径
         filename: 'index.min.html', // 输出的压缩后的 HTML 文件名
         minify: {
           removeComments: true, // 去掉注释
           collapseWhitespace: true, // 去掉空格
         },
       }),
     ],
   };
   
   # 执行打包
   $ webpack
   
   $ ls dist
   index.min.html main.min.js

   这样就完成啦！不过，Webpack 确实是更适合 nodejs 项目

尝试用cssnano、MiniCssExtractPlugin 压缩css，没有成功，不适合这样做。

更好的选择

WebPack 是一个好东西，不过对于以上需求有些勉强和大材小用。

如果只是压缩一下单独的一个文件或者静态文件，推荐使用以下方案：

• vscode 的插件 Minify
• 【Gulp】

尝试压缩css失败

失败：执行webpack命令没有处理和生成css文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
  mode: 'production',
  entry: './src/main.js', // 这里是你的入口 JavaScript 文件路径
  output: {
    filename: 'main.js', // 输出的压缩后的 JavaScript 文件名
    path: __dirname + '/dist' // 输出目录
  },
  module: {
    rules: [
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
              loader: 'postcss-loader', 
              options: {
                plugins: () => [
                  require('cssnano')()
                ]
              }
            }
          ]
        }
      ]
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: 'style.css', // 输出的压缩后的 css 文件名
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html', // 这里是你的 HTML 模板文件路径
      filename: 'index.html', // 输出的压缩后的 HTML 文件名
      minify: {
        removeComments: true, // 去掉注释
        collapseWhitespace: true, // 去掉空格
      },
    }),
  ],
};