webpack进阶+调试

一、开发服务器 devServer

功能：自动化工具（自动编译，自动打开并刷新浏览器）
特点：只会在内存中编译打包，不会有任何输出
启动指令：npx webpack-dev-server，下载npm i webpack-dev-server -D

devServer: {
    contentBase: resolve(__dirname, 'build'), // 要运行的构建后的目录
    compress: true, // 启动gzip压缩
    port: 3000, // 端口号
   open: true, // 自动打开浏览器
}

二、webpack调试

• 执行命令调试

// （1）npx
npx node --inspect-brk ./node_modules/.bin/webpack --inline --progress
// （2）package.json配置执行命令
{
    "scripts": {
      "webpack:debug": "node --inspect-brk ./node_modules/.bin/webpack --inline --progress"
    }
}
// 运行
npm run webpack:debug

• Vscode 添加配置

  
  image.png

三、检查依赖是否需要更新-npm-check-updates

• 安装
  npm install -g npm-check-updates
• 使用
  ncu
  检查package.json
  ncu -u
  升级package.json
  运行npm install更新已安装的软件包和package-lock.json。
  npm install

四、合并webpack配置webpack-merge

webpack-merge提供了merge连接数组并合并对象以创建新对象的功能。如果遇到函数，它将执行它们，通过算法运行结果，然后将返回的值再次包装在函数中。

• 安装
  npm i webpack-merge
• 使用

const { merge } = require('webpack-merge');

// Default API
const output = merge(object1, object2, object3, ...);

// You can pass an array of objects directly.
// This works with all available functions.
const output = merge([object1, object2, object3]);

五、TerserWebpackPlugin

该插件使用 terser 来压缩 JavaScript。
https://webpack.docschina.org/plugins/terser-webpack-plugin/

• webpack v4 及以下安装
  npm install terser-webpack-plugin --save-dev
• 使用

// webpack.config.js
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

六、DefinePlugin

DefinePlugin 允许在 编译时 创建配置的全局常量，这在需要区分开发模式与生产模式进行不同的操作时，非常有用，设置好它，就可以忘掉开发环境和生产环境的构建规则。

• 使用

// 传递给 DefinePlugin 的每个键都是一个标识符或多个以 . 连接的标识符。
new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});

七、清理 /dist 文件夹

在每次构建前清理 /dist 文件夹，这样就只会生成用到的文件。
clean-webpack-plugin 是一个流行的清理插件，安装和配置它就能实现这个需求。

• 安装
  npm install --save-dev clean-webpack-plugin
• 使用
  webpack.config.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   plugins: [
    new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
       title: 'Output Management',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

八、SplitChunksPlugin

插件来进行公共模块抽取，默认情况下，它仅影响按需块，因为更改初始块会影响HTML文件及包含的脚本标签以运行项目。

• 使用
  webpack.config.js

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};