Webpack 快速上手

作者: 时光觅迹 | 来源:发表于2021-03-29 15:44 被阅读0次

Webpack 快速上手
快速上手webpack
2019-12-20
学习笔记-webpack
Rollup —— 适合框架和类库使用的模块打包器
Webpack 常用配置
Webpack4 快速上手
windows下webpack快速上手（一）
vue3.0项目创建
React+Webpack快速上手指南

阅读本文之前，可以先到官网先了解一下webpack，并且认为你已经了解和使用过 Node.js

在接触 webpack 之前，我们的工程目录如果比较复杂，在管理上可能就会遇到麻烦，里面有用的或没用的文件都混杂在一起，时间一长，可能自己都忘了哪些文件已经作废却又没有被清理出去，等到发布版本的时候，往往这些已经作废的文件也一并被打包出去……

引用webpack官方介绍：

概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

简而言之，webpack可以帮我们把我们工程里面实际用到的资源打包起来，包括所有的脚本、图片、样式表 等等。

让我们开始尝试吧（在此之前，默认你已经准备好了 Node.js 开发环境）

选择自己熟悉的 IDE，我这里使用的是 Visual Studio Code，简称 VSCode
在磁盘中创建一个工程（说人话 “ 文件夹 ”）：webpack_test
在 VSCode 中打开 webpack_test 目录。
在工程中新建两个文件夹：src、dist
在终端中执行命令安装webpack：

npm install webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org

然后你的目录结构应该会像这样

目录结构

以官网例子说明，接着我们再在工程中新建一个配置文件：webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在 src 中新建 index.html 和 index.js

index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

index.js

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

package.json 中移除 main入口，增加 private

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {...}
    ...
  }