Webpack 打包构建的 29 个提示和技巧-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个强大的 JavaScript 模块打包工具，它能够将多个模块打包成一个或多个输出文件。在前端开发中，使用 Webpack 可以帮助我们更好地管理项目依赖、优化代码、提高性能等。本文将介绍 29 个 Webpack 打包构建的提示和技巧，希望能对前端开发者有所帮助。

1. 使用 Webpack Dev Server

Webpack Dev Server 是一个轻量级的服务器，它可以在本地快速启动一个开发服务器，提供热更新、代理、本地静态文件服务等功能，使得开发过程更加高效。使用方式如下：

npm install webpack-dev-server --save-dev

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    port: 8080,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
}

2. 使用 Source Map

Source Map 是一个映射文件，它可以将编译后的代码映射回原始代码，方便开发者调试。使用方式如下：

// webpack.config.js
module.exports = {
  // ...
  devtool: 'inline-source-map'
}

3. 使用 Clean Webpack Plugin

Clean Webpack Plugin 可以帮助我们在每次构建前清理输出目录，避免旧文件对新文件造成影响。使用方式如下：

npm install clean-webpack-plugin --save-dev

// www.javascriptcn.com code example
// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
  ],
}

4. 使用 HtmlWebpackPlugin

HtmlWebpackPlugin 可以帮助我们自动生成 HTML 文件，并注入打包后的 JS 文件，方便开发者使用。使用方式如下：

npm install html-webpack-plugin --save-dev

// www.javascriptcn.com code example
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: 'src/index.html',
    }),
  ],
}

5. 使用 MiniCssExtractPlugin

MiniCssExtractPlugin 可以将 CSS 文件单独打包成一个文件，避免将 CSS 代码注入到 JS 文件中，提高性能。使用方式如下：

npm install mini-css-extract-plugin --save-dev

// www.javascriptcn.com code example
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
}

6. 使用 Stylelint

Stylelint 是一个 CSS 代码检查工具，它可以帮助我们规范化 CSS 代码风格，避免出现错误。使用方式如下：

npm install stylelint stylelint-webpack-plugin --save-dev

// www.javascriptcn.com code example
// webpack.config.js
const StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new StylelintPlugin({
      files: '**/*.css',
    }),
  ],
}

7. 使用 ESLint

ESLint 是一个 JavaScript 代码检查工具，它可以帮助我们规范化 JavaScript 代码风格，避免出现错误。使用方式如下：

npm install eslint eslint-loader --save-dev

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
    ],
  },
}

8. 使用 Babel

Babel 是一个 JavaScript 编译工具，它可以将 ES6+ 代码转换为 ES5 代码，使得新特性可以在旧浏览器中运行。使用方式如下：

npm install babel-loader @babel/core @babel/preset-env --save-dev

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
}

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

9. 使用 Tree Shaking

Tree Shaking 是一个优化技术，它可以将未使用的代码在打包时去除，减小文件体积，提高性能。使用方式如下：

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    usedExports: true,
  },
}

10. 使用 SplitChunksPlugin

SplitChunksPlugin 可以将公共模块提取出来，使得多个入口文件可以共享同一份代码，减小文件体积，提高性能。使用方式如下：

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 10000,
      maxSize: 250000,
    },
  },
}

11. 使用 Bundle Analyzer

Bundle Analyzer 可以帮助我们分析打包后的文件体积和依赖关系，找出优化的方向。使用方式如下：

npm install webpack-bundle-analyzer --save-dev

// www.javascriptcn.com code example
// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
}

12. 使用 Dynamic Import

Dynamic Import 是一个新特性，它可以在运行时动态加载模块，提高性能和用户体验。使用方式如下：

// app.js
import('./module.js').then(module => {
  // do something with module
});

13. 使用 Webpack PWA

Webpack PWA 可以帮助我们将应用转换为 PWA，使得应用可以离线访问、添加到主屏幕、推送通知等。使用方式如下：

npm install workbox-webpack-plugin --save-dev

// www.javascriptcn.com code example
// webpack.config.js
const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
}

14. 使用 Webpack Manifest Plugin

Webpack Manifest Plugin 可以帮助我们生成一个清单文件，记录所有模块的文件名和路径，方便开发者查找和调试。使用方式如下：

// www.javascriptcn.com code example
// webpack.config.js
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  // ...
  plugins: [
    new ManifestPlugin(),
  ],
}

15. 使用 Webpack Merge

Webpack Merge 可以帮助我们将多个配置文件合并成一个，避免重复代码。使用方式如下：

npm install webpack-merge --save-dev

// www.javascriptcn.com code example
// webpack.common.js
module.exports = {
  // ...
}

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

module.exports = merge(commonConfig, {
  // ...
});

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

module.exports = merge(commonConfig, {
  // ...
});

16. 使用 Define Plugin

Define Plugin 可以帮助我们定义全局变量，方便在代码中使用。使用方式如下：

// www.javascriptcn.com code example
// webpack.config.js
const { DefinePlugin } = require('webpack');

module.exports = {
  // ...
  plugins: [
    new DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
}

17. 使用 Provide Plugin

Provide Plugin 可以帮助我们自动加载模块，避免手动引入。使用方式如下：

// www.javascriptcn.com code example
// webpack.config.js
const { ProvidePlugin } = require('webpack');

module.exports = {
  // ...
  plugins: [
    new ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
}

18. 使用 Ignore Plugin

Ignore Plugin 可以帮助我们忽略某些模块，避免打包时出现错误。使用方式如下：

// www.javascriptcn.com code example
// webpack.config.js
const { IgnorePlugin } = require('webpack');

module.exports = {
  // ...
  plugins: [
    new IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
}

19. 使用 Webpack Shell Plugin

Webpack Shell Plugin 可以帮助我们在构建完成后执行一些脚本，如上传文件、发送邮件等。使用方式如下：

npm install webpack-shell-plugin --save-dev

// www.javascriptcn.com code example
// webpack.config.js
const ShellPlugin = require('webpack-shell-plugin');

module.exports = {
  // ...
  plugins: [
    new ShellPlugin({
      onBuildEnd: ['echo "Build complete"'],
    }),
  ],
}

20. 使用 Webpack Performance

Webpack Performance 可以帮助我们设置一些性能相关的限制，如文件体积、加载时间等。使用方式如下：

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  performance: {
    hints: false,
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
  },
}

21. 使用 Webpack 5

Webpack 5 是一个新版本，它带来了很多新特性和优化，如 Module Federation、Persistent Caching 等。使用方式如下：

npm install webpack@next --save-dev

// webpack.config.js
module.exports = {
  // ...
  experiments: {
    topLevelAwait: true,
  },
}

22. 使用 Module Federation

Module Federation 是一个新特性，它可以帮助我们将多个应用拆分为多个独立的模块，可以独立开发、独立部署、独立运行。使用方式如下：

// www.javascriptcn.com code example
// app1.js
import { Button } from 'app2/Button';

// app2.js
export const Button = () => {
  return <button>Click me</button>;
};

// webpack.config.js
module.exports = {
  // ...
  experiments: {
    topLevelAwait: true,
  },
  output: {
    library: {
      type: 'module',
    },
  },
}

23. 使用 Persistent Caching

Persistent Caching 是一个新特性，它可以帮助我们持久化缓存，避免重复打包，提高构建速度。使用方式如下：

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
}

24. 使用 Webpack CLI

Webpack CLI 是一个命令行工具，它可以帮助我们更好地管理 Webpack 配置和构建。使用方式如下：

npm install webpack-cli --save-dev

npx webpack --config webpack.config.js

25. 使用 Webpack Dev Middleware

Webpack Dev Middleware 是一个中间件，它可以将 Webpack Dev Server 集成到 Express 应用中，方便开发者使用。使用方式如下：

npm install webpack-dev-middleware --save-dev

// www.javascriptcn.com code example
// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
}));

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

26. 使用 Webpack Hot Middleware

Webpack Hot Middleware 是一个中间件，它可以将热更新功能集成到 Express 应用中，方便开发者使用。使用方式如下：

npm install webpack-hot-middleware --save-dev

// www.javascriptcn.com code example
// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
}));

app.use(webpackHotMiddleware(compiler));

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

27. 使用 Webpack Watch

Webpack Watch 是一个命令行工具，它可以帮助我们监视文件的变化，自动重新构建。使用方式如下：

npx webpack --watch

28. 使用 Webpack Analyze

Webpack Analyze 是一个命令行工具，它可以帮助我们分析打包后的文件体积和依赖关系，找出优化的方向。使用方式如下：

npm install webpack-bundle-analyzer --save-dev

npx webpack-bundle-analyzer dist/stats.json

29. 使用 Webpack Inspector

Webpack Inspector 是一个命令行工具，它可以帮助我们查看 Webpack 配置和构建信息。使用方式如下：

npm install webpack-inspect --save-dev

npx webpack-inspect --config webpack.config.js

以上就是 29 个 Webpack 打包构建的提示和技巧，希望能对前端开发者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d12d75a941bf713427eb12

Webpack 打包构建的 29 个提示和技巧