webpack4 实现前端自动化构建详解

在前端开发中，我们经常需要处理各种各样的资源，例如 HTML、CSS、JavaScript、图片和字体等等。当项目的规模增大时，手动处理这些资源就变得非常麻烦，并且容易出错。为了解决这个问题，我们通常会使用构建工具来自动化处理这些事情。

其中，webpack 是前端工程化领域最流行的构建工具之一，它使用模块化的方式来管理和打包项目中的各种资源。在本篇文章中，我们将详细介绍 webpack4 的使用，并提供一些示例代码，帮助大家更好地了解和掌握 webpack4。

安装 webpack4

首先，我们需要安装 webpack4。在安装之前，我们需要先安装 Node.js 和 npm。然后，在命令行中输入以下命令即可安装 webpack4：

npm install webpack webpack-cli --save-dev

配置 webpack4

webpack4 的配置文件是一个 JavaScript 文件，通常命名为 webpack.config.js。在这个文件中，我们需要定义一些属性，例如入口文件、出口文件、loader、plugin 等等。

下面是一个简单的 webpack4 配置文件示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(png|svg|jpg|gif)$/, use: 'url-loader' }
    ]
  },
  plugins: [
    // 插件列表
  ]
};

在这个配置文件中，我们定义了入口文件 src/index.js，出口文件为 dist/bundle.js，同时定义了三个 loader 和一个 plugin。接下来，我们逐一讲解这些属性的意义和用法。

入口文件

入口文件指定 webpack4 从哪个文件开始打包。在上面的示例中，我们定义的入口文件为 src/index.js。

出口文件

出口文件指定 webpack4 打包结果的文件名和存储路径。在上面的示例中，我们定义了输出文件名为 bundle.js，存储路径为 dist 目录。

Loader

loader 可以帮助我们转换处理各种资源文件，例如将 ES6 转换成 ES5、将 CSS 样式插入到 HTML 中、将图片转换成 Base64 码等等。在上面的示例中，我们定义了三个 loader：

• babel-loader：将 ES6 转换成 ES5，需要安装 @babel/core 和 @babel/preset-env。
• css-loader：解析 CSS 文件，需要安装 css-loader 和 style-loader，注意将 style-loader 放在 css-loader 前面，否则会出现样式不生效的问题。
• url-loader：转换图片为 Base64 码，可以减少 HTTP 请求，需要安装 url-loader 和 file-loader。

Plugin

plugin 可以帮助我们执行各种任务，例如压缩代码、提取公共文件、生成 HTML 文件等等。在上面的示例中，我们没有定义具体的 plugin，只是留了一个空数组。在实际开发中，我们可以根据需求来选择适当的 plugin。

示例代码

上面是一个简单的 webpack4 配置文件示例，下面是一个完整的示例代码：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader',
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'images/[name].[ext]',
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]',
            }
          },
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash].css',
      chunkFilename: 'css/[id].[hash].css'
    }),
  ]
};

下面是一个简单的代码示例：

// index.js
import './index.css';
import cat from './images/cat.jpg';
import icon from './fonts/iconfont.ttf';

const img = document.createElement('img');
img.src = cat;
document.body.appendChild(img);

const iconfont = new FontFace('iconfont', `url(${icon})`);
iconfont.load().then(() => {
  document.fonts.add(iconfont);
  const span = document.createElement('span');
  span.innerHTML = '';
  span.className = 'iconfont';
  document.body.appendChild(span);
});

/* index.css */
@font-face {
  font-family: 'iconfont';
  src: url('./fonts/iconfont.eot');
  src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'),
       url('./fonts/iconfont.woff') format('woff'),
       url('./fonts/iconfont.ttf') format('truetype'),
       url('./fonts/iconfont.svg#iconfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

上面的示例中使用了多个 loader 和 plugin，其中：

• @babel/preset-env：将 ES6 转换成 ES5。
• MiniCssExtractPlugin.loader：将 CSS 样式打包成独立的文件。
• url-loader：将图片转换为 Base64 码，并可以设置图片大小的上限。
• file-loader：将字体文件打包成独立的文件。

总结

通过本文介绍，相信大家已经了解了 webpack4 的基本用法和配置方法，并学会了如何使用 loader 和 plugin 处理各种资源文件。作为前端开发中必不可少的构建工具，webpack4 可以帮助我们提高开发效率和项目的可维护性。希望本文对大家有所帮助，如果有问题和建议，欢迎在评论区留言。

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