webpack-dev-server

• https://webpack.docschina.org/configuration/dev-server/
• 开发时提供一个本地的serve服务，可配置热更新和代理请求等

module.exports = {
    devServer: {
        open: true, // 启动后默认打开到浏览器
        hot: true,
        compress: true, // gzip 压缩
        host: '0.0.0.0', 
        port: 9000,
        proxy: {
            '/api': 'http://localhost:3000',
        },
        static: [ // 提供静态文件, 默认是pulic
            {
                directory: path.join(__dirname, 'assets'),
            },
            {
                directory: path.join(__dirname, 'css'),
          }
        ] 
    },
}

html-webpack-plugin

• 定义entry输出目录的html的文件，并将chunk路径写进html，js写到或者<body底部, 用 MiniCssExtractPlugin 提取的 CSS会写到head的link

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        login: './src/login.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:6].js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包后的文件名
            chunks: ['index'],
        }),
        new HtmlWebpackPlugin({
            template: './public/login.html',
            filename: 'login.html', //打包后的文件名
            chunks: ['login'],
            minify: {
              // 压缩HTML文件
              removeComments: true, // 移除HTML中的注释
              collapseWhitespace: true, // 删除空白符与换行符
              minifyCSS: true, // 压缩内联css
            },
            inject: true, // true / body / head / false
        }),
    ],
}

clean-webpack-plugin

• 重新编译时删除上一次的dist输出目录

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

moudle.exports = {
    plugins: {
        new CleanWebpackPlugin()
    }
}

copy-webpack-plugin

• 拷贝文件到dist输出目录

const CopyWebpackPlugin = require("copy-webpack-plugin")

moudle.exports = {
    plugins: {
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'public/image',
                    to: path.resolve(__dirname, 'dist', 'image'),
                }
            ]
        })
    }
}

webpack-merge

• 合并配置

// webpack.dev.js
const { merge } = require('webpack-merge')
const commonConfig = require('webpack.common.js')

let devConfig = {
    entry: {
    
    },
    output: {
        
    }
}

module.exports = webpackMerge(commonConfig, devConfig)

// webpack.prod.js
const { merge } = require('webpack-merge')
const commonConfig = require('webpack.common.js')

let prodConfig = {
    entry: {
    
    },
    output: {
        
    }
}

module.exports = merge(commonConfig, prodConfig)

new webpack.DefinePlugin()

• 定义全局变量

const webpack = require('webpack')

module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        'http_env': '"dev"',
      }),
    ]
}

new webpack.ProvidePlugin()

• 自动加载模块，提供全局模块变量

const webpack = require('webpack')

module.exports = {
  resolve: {
    alias: {
      jquery: './lib/jquery',
    },
  },
  plugins: [
    //提供全局的变量，在模块中使用无需用require引入
    new webpack.ProvidePlugin({
      $: 'jquery',
      React: 'react',
    }),
  ],
}

new Webpack.hotModuleReplacementPlugin()

• 模块热更新，依赖webpack-dev-server, 只更新修改的部分

const webpack = require('webpack')

plugins: [
  new webpack.HotModuleReplacementPlugin(), // 热更新插件
]

new webpack.NoEmitOnErrorsPlugin()

• 报错但不退出webpack进程

const webpack = require('webpack')

module.exports = {
    plugins: [
        new webpack.NoEmitOnErrorsPlugin()
    ]  
}

compression-webpack-plugin

• gzip 压缩，启动gzip压缩可大幅缩减资源大小，减少白屏时间。
• gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好
• 需要后端配合支持

const CompressionPlugin = require('compression-webpack-plugin')

plugins: [
  new CompressionPlugin({
    // gzip压缩配置
    test: /\.js$|\.html$|\.css/, // 匹配文件名
    threshold: 10240, // 对超过10kb的数据进行压缩
    deleteOriginalAssets: false, // 是否删除原文件
  }),
]