webpack 项目构建:(一)基本架构搭建

注:以下教程均在 windows 环境实现,使用其他操作系统的同学实践过程可能会有些出入。

一、准备工作

  1. 安装最新的 Node.js 环境;(官网地址:https://nodejs.org/zh-cn/
  2. 安装 cnpm 淘宝npm镜像;(在控制台执行命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

二、搭建 webpack 基本文件目录

  1. 新建一个文件夹并命名为 webpackDemo;
  2. 命令行切换到 webpackDemo 的文件目录下,执行 npm init -y 生成默认 package.json 配置文件;(package.json 文件用于描述项目的一些基本信息,以及依赖的配置,具体字段含义不在此处说明)
  3. 利用 cnpm 安装 webpack(这里使用 webpack@3.11.0 版本):cnpm i --save-dev webpack@3;
  4. 新建 webpack.config.js;(用于配置 webpack 的运行方式)

  现在我们 webpackDemo 文件夹内的结构应该是这样的:
图片描述

三、配置 webpack.config.js

  现在已经搭建好 webpack 的基本目录了,现在如果在 webpackDemo 的目录下执行命令 webpack,会提示如下错误:
图片描述

  这是因为在 webpack 命令执行过程中,会从当前路径读取 webpack.config.js 的配置信息,现在我们的 webpack.config.js 文件是空的,没有 output.filename 这个配置项,所以会提示 'output.filename' 这个配置项是必须的。
  现在让我们让我们配置一个最简单的 webpack.config.js:

webpack.config.js
图片描述

  根据配置信息,webpack 会找到打包入口起点 ./index.js,并输出文件 ./test.js。现在我们的当前目录下还不存在 index.js,所以先新建一个 index.js 文件:

index.js
图片描述

  我们的入口文件做的事情很简单,仅仅是定义了一个 test 变量。

  现在我们的文件目录结构是这样的:
图片描述

  接下来让我们在 webpackDemo 目录下执行 webpack 打包命令,看看会发生什么:
图片描述

  从输出信息里可以看出来,webpack 打包耗时 67ms,在当前目录产生了一个 2.49kB 的 test.js 文件。再看我们的文件目录结构,多出了一个 test.js 文件:
图片描述

  现在让我们来看一下经过 webpack 打包生成的 test.js 文件。
图片描述
图片描述
  可以看到打包出来的 test.js 文件就是一个自执行的函数:

(function(modules) {
    ...
})([
    (function(module, exports) {
        var test = 123;
    })
]);

  我们的 index.js 文件的内容,被以函数数组的形式传递到 modules 参数中,并在主函数中被执行。(webpack 生成文件的具体说明将在后续章节会提到。)

  以上就是最基本的 webpack 项目结构搭建。在下一个章节,我们会配合 babel 搭建一个可以用最新 ES6 语法开发的平台(webpack 项目构建:(二)ES6 编译环境搭建)。

源码下载地址:https://github.com/xh4722/web...

阅读 8.8k

推荐阅读