关于webpack:webpack-文件打包

上一节中，咱们曾经装置好了 webpack，本节咱们来学习何应用 webpack 进行文件打包。

要打包文件，首先咱们须要初始化一个我的项目，后面咱们曾经创立好了一个 xkd_webpack 的我的项目，并且这个我的项目根目录下曾经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules 文件夹，如下所示：

在理论我的项目中，为了方便管理许多文件，咱们可能须要创立一个 src 文件夹寄存入口文件等开发文件，而后创立一个 dist 文件夹寄存最终打包的文件，还有其余类型的文件，为了方便管理咱们也会放在同一个目录下。

然而因为咱们这里只是举例说一下如何应用 webpack 打包文件，所以咱们间接我的项目根目录下，创立一个动态页面 index.html 和一个 JS 的入口文件 index.js 文件，文件名称是咱们自定义的，如果你想应用其余的名称也是能够的。

上面是 index.html 文件的内容：

<html>
    <head>
        <meta charset="utf-8">
        <title>webpack 入门 </title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

在这个 HTML 文件中咱们引入了一个 bundle.js 文件，这个 bundle.js 文件就是最终的打包后的文件，然而当初还没有生成哟，要等咱们执行完打包命令后才会生成这个文件。

而后入口文件 index.js 的内容如下所示：

document.write('你好，侠课岛！');

最初执行下列命令，就能够胜利将 index.js 文件打包到 bundle.js 文件中：

webpack index.js -o bundle.js

执行命令成果如下所示：

命令执行胜利后，我的项目根目录下会生成一个 bundle.js 文件。这个文件的作用就是用了一个立刻执行函数，而后将 index.js 的内容封装成一个函数，作为参数传进外部执行，这样就实现了文件的打包：

此时咱们在浏览器中关上 index.html 文件，页面将会显示 “ 你好，侠课岛！”，这同时也能证实 index.js 文件胜利打包到了 bundle.js 文件中，因为咱们只在 index.html 文件中引入了 bundle.js 文件。

当然咱们在我的项目中必定不只有一个 .js 文件，那么如果咱们除了 index.js 文件还有其余的 .js 文件，要如何做呢。

示例：

例如我的项目中还有一个 module.js 文件，内容如下所示：

module.exports = '侠课岛欢送你！'

这样咱们能够批改入口文件 index.js，将创立好的 module.js 模块引入到入口文件中：

document.write('你好，侠课岛！')
document.write(require('./module.js')) // 引入模块

再次执行 webpack index.js -o bundle.js，会从新打包文件。

在页面启动时，会先执行 index.js 文件中的代码，其它文件中的代码会在执行到 require 语句的时候再执行。此时刷新浏览器，咱们能够看到浏览器中的显示内容发现了扭转，显示内容变为 “ 你好，侠课岛！侠课岛欢送你！”。

webpack 会剖析入口文件，解析蕴含依赖关系的各个文件，这些文件都打包到 bundle.js 中。webpack 会给每个模块调配一个惟一的 id 并通过这个 id 索引和拜访模块。

在旧版本的 webpack 中，咱们是应用 webpack index.js bundle.js 命令来执行打包操作，而新的 webpack4.0+ 版本打包文件时要在命令中加一个 -o，否则会报错。

链接：https://www.9xkd.com/

关于webpack:webpack-文件打包

应用 webpack 打包文件

打包多个文件

总结