webpack打工人，手把手教你打包功能

2023-09-12 17:09:57

webpack 打包简介

webpack 是一个现代化的前端构建工具，它可以将你的代码（包括 JavaScript、CSS、图片等）打包成一个或多个可供浏览器或其他环境使用的文件。webpack 的核心原理是将你的代码拆分成一个个模块，然后通过一个叫做“打包器”的工具将这些模块组合成一个或多个文件。

webpack 打包功能实现

接下来，我们将一步一步实现 webpack 的打包功能。首先，我们需要安装 webpack。

npm install webpack --save-dev

安装好 webpack 后，我们需要创建一个 webpack.config.js 文件，在这个文件中配置 webpack 的打包规则。webpack.config.js 文件的典型配置如下：

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    path: './dist', // 输出目录
    filename: 'bundle.js', // 输出文件名
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配 .js 文件
        use: {
          loader: 'babel-loader', // 使用 babel-loader 来编译 JavaScript 代码
        },
      },
      {
        test: /\.css$/, // 匹配 .css 文件
        use: [
          {
            loader: 'style-loader', // 将 CSS 代码注入到 HTML 中
          },
          {
            loader: 'css-loader', // 将 CSS 代码转换成 JavaScript 代码
          },
        ],
      },
    ],
  },
};