webpack，迈出你的第一步-1

原文为线上开源的英文书籍。你可以点击这里阅读原书籍。
本篇对应书本前两篇，讲了什么是webpack，webpack的基本开发。

什么是webpack

  webpack是一个模块打包器。通过定义入(input)出(output)，webpack能自行遍历模块之间的引入，根据自定义的配置，生成对应的文件。

  webpack支持各种模块和标准，诸如 ES2015, CommonJS, MJS, AMD 甚至 WebAssembly，通过导入器(loader)也能很好支持诸如css的文件。你可以使用插件(plugins)来拓展各种便利的诸如热更新压缩代码等便利的功能。

  下图webpack执行流程简图：

  webpack依赖 loader 和 plugins ，通过一份配置文件来进行文件处理的定义。webpack 通过定义 loader 能够处理任何类型的文件，所有定义的 loader 将被从下往上，从右往左的顺序进行执行。plugins则更多的对webpack本身的进程运行进行拓展，比如代码热更新，浏览器自动刷新，css/js 的代码批量分割。

webpack开发

开始

  开始使用 webpack 前，需要安装好对应的 node 和 npm 环境。

  首先需要新建一个文件夹设置对应的 package.json 文件。package.json 是一个管理 npm 项目依赖的配置文件。

mkdir webpack-demo
cd webpack-demo
npm init -y # -y 根据默认配置生成package.json文件，也可以直接使用 npm init 手动生成配置。

  使用 npm 来安装 webpack 和 webpack-nano。随后使用 npx wp 运行服务。

npm add webpack webpack-nano --develop # --develop === -D
npx wp

# result
⬡ webpack: Build Finished
⬡ webpack: Hash: 80f545d7d31df2164016
  Version: webpack 4.44.1
  Time: 29ms
  Built at: 08/21/2020 9:24:56 AM

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '/tmp/webpack-demo'

  错误提示没有对应的文件来供 webpack 进行编译，来新增src的文件夹以及对应的文件来进行处理。

// src/component.js
export default (text = "Hello world") => {
   
  const element = document.createElement("div");
  element.innerHTML = text;
  return element;
};

// src/index.js
import component from "./component";

document.body.appendChild(component());

  此时再次运行npx wp，运行成功，出现了 dist 文件夹，里面包含了编译的 js 文件。我们继续添加新的插件让编译出来的文件直接到浏览器可用。

  添加名为mini-html-webpack-plugin的一个插件，这个插件能帮你根据配置生成对应的 html 文件。然后新建一个名为 webpack.config.js 的文件，这个文件用于webpack的启动配置。

npm add mini-html-webpack-plugin --develop
touch webpack.config.js

  mini-html-webpack-plugin 的插件需要配置在webpack配置文件中的 plugins 中使用。

// webpack.config.js
const {
    mode } = require("webpack-nano/argv");
const {
   
  MiniHtmlWebpackPlugin,
}