Webpack4 入门教程-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个现代化的前端打包工具，它可以将多个 JavaScript 文件和其他资源打包成一个或多个静态资源，从而提高网站性能和开发效率。Webpack4 是 Webpack 的最新版本，它带来了更多的功能和性能优化，本文将介绍如何使用 Webpack4 来构建前端项目。

安装 Webpack4

Webpack4 需要 Node.js 环境，因此请先安装 Node.js。然后在命令行中执行以下命令来安装 Webpack4：

npm install webpack webpack-cli --save-dev

这里我们使用了 --save-dev 参数来将 Webpack4 安装为开发依赖，因为它只用于开发阶段而不是生产环境。

配置 Webpack4

Webpack4 的配置文件为 webpack.config.js，它是一个 Node.js 模块，可以导出一个配置对象或函数。下面是一个简单的配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

这个配置文件指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。其中 path.resolve 方法可以将相对路径转换为绝对路径，以避免路径问题。

打包 JavaScript

Webpack4 可以打包多个 JavaScript 文件，并支持 ES6、TypeScript、React 等语法。例如我们有以下文件：

// src/index.js
import { sum } from './math';

console.log(sum(1, 2));

// src/math.js
export function sum(a, b) {
  return a + b;
}

我们可以在配置文件中指定入口文件和输出文件，然后运行 webpack 命令进行打包：

npx webpack

这会将 src/index.js 和 src/math.js 打包成一个文件 dist/bundle.js，并输出以下内容：

(function(modules) {
  // Webpack runtime code
})({
  "./src/index.js": (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    __webpack_require__.r(__webpack_exports__);
    var math_js_1 = __webpack_require__("./src/math.js");
    console.log(Object(math_js_1.sum)(1, 2));
  }),
  "./src/math.js": (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    __webpack_require__.r(__webpack_exports__);
    __webpack_require__.d(__webpack_exports__, "sum", function() { return sum; });
    function sum(a, b) {
      return a + b;
    }
  })
});

这是一个自执行函数，其参数是一个对象，该对象的键是模块的路径，值是模块的代码。Webpack 将所有模块打包成一个函数，并在运行时解析依赖关系。

加载 CSS

Webpack4 还可以打包 CSS 文件，并支持 CSS 预处理器和模块化。例如我们有以下文件：

/* src/style.css */
body {
  background-color: #f0f0f0;
}

我们可以在 JavaScript 文件中使用 import 语句来加载 CSS 文件：

// src/index.js
import { sum } from './math';
import './style.css';

console.log(sum(1, 2));

Webpack4 支持使用 style-loader 和 css-loader 来处理 CSS 文件，其中 style-loader 会将 CSS 插入到 HTML 文件中的 <head> 标签中，而 css-loader 则会将 CSS 转换为 JavaScript 代码。我们需要在配置文件中添加以下规则：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

这样运行 webpack 命令后，CSS 文件就会被打包到 JavaScript 中，并自动插入到 HTML 文件中。

加载图片

Webpack4 还可以打包图片、字体等资源文件，并支持自动压缩和优化。例如我们有以下文件：

<!-- src/index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Webpack4 Demo</title>
</head>
<body>
  <img src="./image.png" alt="Webpack4">
</body>
</html>

// src/index.js
import { sum } from './math';
import './style.css';
import image from './image.png';

console.log(sum(1, 2));

const img = new Image();
img.src = image;
document.body.appendChild(img);

我们可以使用 file-loader 或 url-loader 来处理图片文件，其中 file-loader 会将图片复制到输出目录中，并返回图片 URL，而 url-loader 则会将小于指定大小的图片转换为 Data URL，以减少 HTTP 请求。我们需要在配置文件中添加以下规则：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 8KB
              name: '[name].[hash:8].[ext]',
              outputPath: 'images'
            }
          }
        ]
      }
    ]
  }
};

这样运行 webpack 命令后，图片文件就会被打包到输出目录中，并自动转换为 URL 或 Data URL。

使用插件

Webpack4 还可以使用插件来扩展功能，例如压缩 JavaScript、生成 HTML 文件、提取 CSS 等。以下是一些常用插件：

uglifyjs-webpack-plugin：压缩 JavaScript。
html-webpack-plugin：生成 HTML 文件，并自动插入打包后的 JavaScript 和 CSS。
mini-css-extract-plugin：提取 CSS 到单独的文件，并自动插入 HTML 文件中。

我们需要在配置文件中添加以下插件：

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

module.exports = {
  // ...
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    })
  ]
};

这样运行 webpack 命令后，JavaScript 文件会被压缩，HTML 文件会被生成，并自动插入打包后的 JavaScript 和 CSS，CSS 文件会被提取到单独的文件中。

总结

Webpack4 是一个强大的前端打包工具，它可以帮助我们管理依赖、打包资源、优化性能等。本文介绍了如何安装和配置 Webpack4，以及如何打包 JavaScript、CSS、图片等资源文件，并使用插件扩展功能。希望本文能够帮助你学习和使用 Webpack4，并提高前端开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e643beb4cecbf2d43b0af