webpack 项目构建：（一）基本架构搭建

voidking 发布于2019-08-22 15:03 / 2114人阅读

摘要：在下一个章节，我们会配合搭建一个可以用最新语法开发的平台项目构建二编译环境搭建。

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

一、准备工作

安装最新的 Node.js 环境；（官网地址：https://nodejs.org/zh-cn/）

安装 cnpm 淘宝npm镜像；（在控制台执行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org）

二、搭建 webpack 基本文件目录

新建一个文件夹并命名为 webpackDemo；

命令行切换到 webpackDemo 的文件目录下，执行 npm init -y 生成默认 package.json 配置文件；（package.json 文件用于描述项目的一些基本信息，以及依赖的配置，具体字段含义不在此处说明）

利用 cnpm 安装 webpack（这里使用 webpack@3.11.0 版本）：cnpm i --save-dev webpack@3；

新建 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...

服务器托管云服务器构建架构 webpack搭建如何构建java项目构建架构微服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93127.html

webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
个人博客主页搭建随笔

摘要：博主目前的这个项目还不算很大，模块依赖简单，但期望完成诸如版本号替换，压缩代码，合并文件，发布到服务器等和模块化关系不大的工作，所以使用了。同时，对和附加缓存，配合和版本号实现服务器更新，这一部分其实已经帮我们实现好了。经常在各种论坛、博客还有 github 上活跃的朋友不难发现，许多大牛都有自己的网站，也多以博客为主。博主作为一个立志前端的大白，难道不应该和大牛学习么？说干就干，前...

whjin 2019-08-02 16:04 评论0 收藏0
个人博客主页搭建随笔

摘要：博主目前的这个项目还不算很大，模块依赖简单，但期望完成诸如版本号替换，压缩代码，合并文件，发布到服务器等和模块化关系不大的工作，所以使用了。同时，对和附加缓存，配合和版本号实现服务器更新，这一部分其实已经帮我们实现好了。经常在各种论坛、博客还有 github 上活跃的朋友不难发现，许多大牛都有自己的网站，也多以博客为主。博主作为一个立志前端的大白，难道不应该和大牛学习么？说干就干，前...

cnio 2019-08-23 11:54 评论0 收藏0
《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

qieangel2013 2019-08-23 11:58 评论0 收藏0
《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

kel 2019-08-19 11:10 评论0 收藏0