Webpack 打包 Javascript 详细介绍

本篇我们主要介绍Webpack打包 Javascript。当然，除了可以打包Javascript之外，webpack还可以打包html。但是这不是我们本篇的重点。我们可以参考 Webpack HTML 打包介绍

现在让我们扩展一个项目——webpack-example（点击 Webpack 安装查看该项目的初始化），并为 entry 和 output 属性指定自定义名称。在 webpack.config.js 中，我们在 plugins 属性之前添加以下内容：

entry: {

  main: path.resolve(__dirname, './src/app.js'),

},

output: {

  filename: '[name].bundle.js',

  path: path.resolve(__dirname, 'deploy')

},

完整代码如下所示

webpack.config.js 文件

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require('path');

module.exports = {

    entry: {

        main: path.resolve(__dirname, './src/app.js'),

      },

      output: {

        filename: '[name].bundle.js',

        path: path.resolve(__dirname, 'deploy')

      },

    plugins: [

        new HtmlWebpackPlugin({

            hash: true,

            title: 'Webpack - 迹忆客(jiyik.com)',

        })

    ],

};

这里我们不使用 html 模板

在这里，我们将入口文件更改为 app.js，并将输出文件夹更改为 deploy 。我们还稍微调整了生成的包文件的名称。现在它将以条目的名称（“main”）开头，后跟单词“bundle”和 .js 文件扩展名。

现在我们创建 src/component.js 文件:

src/component.js

export default (text = "Hello, Webpack!!") => {

  const element = document.createElement("h1");

  element.innerHTML = text;

  return element;

};

接下来，我们将现在项目中的 index.js 重命名为 app.js 以此反映我们的更改，并将其内容替换为以下内容：

app.js

import component from './component';

document.body.appendChild(component());

现在让我们运行 webpack，看一下发生了什么

$ npm run dev

> webpack-example@1.0.0 dev /Users/jiyik/workspace/js/webpack-example

> webpack --mode development

asset main.bundle.js 4.33 KiB [emitted] (name: main)

asset index.html 552 bytes [emitted] [compared for emit]

runtime modules 670 bytes 3 modules

cacheable modules 235 bytes

  ./src/app.js 77 bytes [built] [code generated]

  ./src/component.js 158 bytes [built] [code generated]

webpack 5.54.0 compiled successfully in 142 ms

运行之后我们会在项目目录中看到生成了deploy文件夹，其中包含静态html文件和js文件

此时我们在浏览器中运行 deploy/index.html 文件，结果如下：

此外，如果我们检查 index.html 的源代码，我们会看到 script 标签中 src 属性的值更新为 main.bundle.js。

此时，我们可以删除 webpack 最初生成的 dist 文件夹，因为我们不再需要它了。

将 ES6 转换成 ES5

接下来我们将了解如何将 ES6 转换为适用于所有浏览器的 ES5 的代码。让我们从运行以下命令开始：

$ npm run dev -- --devtool inline-source-map

在这里，我运行 webpack 并将 devtool 选项设置为 inline-source-map 以使代码更具可读性。这样可以更清楚地演示从 ES6 到 ES5 的代码转换。

下面我们打开 main.bundle.js

main.bundle.js 部分代码

/***/ "./src/component.js":

/*!**************************!*\

  !*** ./src/component.js ***!

  \**************************/

/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);

/* harmony export */ __webpack_require__.d(__webpack_exports__, {

/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)

/* harmony export */ });

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((text = "Hello, Webpack!") => {

    const element = document.createElement("h1");

    element.innerHTML = text;

    return element;

  });

/***/ })

/******/     });

如您所见，来自 component.js 模块的现代 ES6 特性（箭头函数和 const 声明）默认不会转换为符合 ES5 的代码。为了让我们的代码在旧浏览器中工作，我们必须添加 Babel 加载器：

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

然后在 webpack.config.js 文件中，在 output 项之后添加 module 项，如下所示

module: {

  rules: [

    {

      test: /\.js$/,

      exclude: /node_modules/,

      use: {

        loader: 'babel-loader',

        options: {

          presets: ['@babel/preset-env']

        }

      }

    },

  ]

},

当我们为 webpack loader 定义规则时，通常需要定义三个主要属性：

test - 它描述了应该转换什么样的文件。
exclude - 它定义了不应该从加载器处理的文件。
use - 它告诉应该对匹配的模块使用哪个加载器。在这里，我们还可以设置加载器选项，就像我们刚刚完成的 presets 选项一样。

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require('path');

module.exports = {

    entry: {

        main: path.resolve(__dirname, './src/app.js'),

    },

    output: {

        filename: '[name].bundle.js',

        path: path.resolve(__dirname, 'deploy')

    },

    module: {

        rules: [

          {

            test: /\.js$/,

            exclude: /node_modules/,

            use: {

              loader: 'babel-loader',

              options: {

                presets: ['@babel/preset-env']

              }

            }

          },

        ]

    },

    plugins: [

        new HtmlWebpackPlugin({

            title: 'Webpack - 迹忆客(jiyik.com)',

        })

    ],

};

然后在运行 webpack 看会生成什么样的文件

$ npm run dev -- --devtool inline-source-map

> webpack-example@1.0.0 dev /Users/liuhanzeng/workspace/js/webpack-example

> webpack --mode development "--devtool" "inline-source-map"

asset main.bundle.js 7.02 KiB [emitted] (name: main)

asset index.html 257 bytes [compared for emit]

runtime modules 670 bytes 3 modules

cacheable modules 301 bytes

  ./src/app.js 76 bytes [built] [code generated]

  ./src/component.js 225 bytes [built] [code generated]

webpack 5.54.0 compiled successfully in 1340 ms

这次 main.bundle.js 中的代码：

/***/ "./src/component.js":

/*!**************************!*\

  !*** ./src/component.js ***!

  \**************************/

/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);

/* harmony export */ __webpack_require__.d(__webpack_exports__, {

/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)

/* harmony export */ });

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (function () {

  var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "Hello, Webpack!";

  var element = document.createElement("h1");

  element.innerHTML = text;

  return element;

});

/***/ })

/******/     });

非常完美。现在我们可以使用现代 JS 功能（ES6），webpack 将转换我们的代码，以便它可以被旧浏览器执行。

完整的Webpack可以参考 Webpack 教程

巴特西

Webpack 打包 Javascript 详细介绍

将 ES6 转换成 ES5

最新文章

热门文章