Webpack 学院 #0：什么是 webpack 以及为什么使用它？

欢迎来到我的新学院，Webpack Academy！

我会尝试分享我的 webpack 知识！

开始吧！

快速演示

来自 webpack 文档：

Webpack 的核心是一个用于现代 JavaScript 应用程序的静态模块打包器。当 Webpack 处理你的应用程序时，它会在内部构建一个依赖关系图，该图会映射项目所需的每个模块，并生成一个或多个打包文件。

总而言之，Webpack它将帮助您处理项目中文件的导入/导出，并将所有代码放在一个名为bundle的文件中。

为什么要使用 webpack？

js合法的问题，如果您曾经构建过 javascript 项目，那么您现在应该知道在应用程序中导入文件的问题！

我将向您简要介绍一下我们之前所做的事情！



<script src="jquery.min.js"></script>
<script src="jquery.some.plugin.js"></script>
<script src="main.js"></script>

我们需要逐个导入所有的依赖项，correct order如果我们要导入一个新的库，我们需要在中导入它correct order，因为如果这个新的库依赖于jquery，我们需要在导入之后导入它jquery！

您认为您可以处理它，是的，您可以，但想象一下，如果您需要导入 100 个库，这可能会很混乱。

此时我们手动创建捆绑文件



// build-script.js
const scripts = [
   "jquery.min.js",
   "jquery.some.plugin.js",
   "main.js",
].concat().uglify().writeTo("bundle.js")

<script src="bundle.js"></script>

我们修复了脚本的多次导入，但没有修复库之间的依赖关系。

Web + Pack = Webpack

Webpack本身只能处理.js文件.json。下一篇文章中我们将看到如何处理其他文件！

您只需要给 webpack 一个入口点，它就会从这个文件创建一个依赖树🌳并检查所有其他文件！

从现在开始，我们不需要手动处理依赖顺序！

例子

上下文：我们有两个导出一个变量的文件：

first.js



export const first = 1

second.js



export const second = 2

我们有另一个文件可以导入这两个文件

three.js



import { first } from './first'
import { second } from './second'

export const three = first + second

最后，将 console.logthree变量的主文件

main.js



import { three } from './three'

console.log(three)

根据旧的提示，我们应该使用类似这样的方法：



// build-script.js
const scripts = [
   "one.js",
   "second.js",
   "three.js",
   "main.js",
].concat().uglify().writeTo("bundle.js")

<script src="bundle.js"></script>

但是有了webpack，我们不需要处理依赖顺序！

让我们用webpack.config.js



const path = require("path")

const config = {
    mode: "development",
    // Webpack start from this entry point
    entry: {
        myApp: [
            "./src/main.js",
        ],
    },
    // This is the output of Webpack
    output: {
        // From current folder + dist folder that will contains all bundle
        path: path.resolve(__dirname, "dist/"),
        filename: "bundle.js"
    },
}

module.exports = config