起步

webpack 用于编译 JavaScript 模块。一旦完成 安装，你就可以通过 webpack CLI 或 API 与其配合交互。如果你还不熟悉 webpack，请阅读 核心概念 和 对比，了解为什么要使用 webpack，而不是社区中的其他工具。

运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)。

基本安装

首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo

cd webpack-demo

npm init -y

npm install webpack webpack-cli --save-dev

在整个指南中，我们将使用 diff 块，来展示对目录、文件和代码所做的修改。例如：

 this is a new line you shall copy into your code

 and this is a line to be removed from your code

  and this is a line not to touch.

现在，我们将创建以下目录结构、文件和内容：

project

webpack-demo

  |- package.json

  |- package-lock.json

 |- index.html

 |- /src

   |- index.js

src/index.js

function component() {

  const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;

}

document.body.appendChild(component());

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>起步</title>

    <script src="https://unpkg.com/lodash@4.17.20"></script>

  </head>

  <body>

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

  </body>

</html>

我们还需要调整 package.json 文件，以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。

package.json

 {

   "name": "webpack-demo",

   "version": "1.0.0",

   "description": "",

  "main": "index.js",

  "private": true,

   "scripts": {

     "test": "echo \"Error: no test specified\" && exit 1"

   },

   "keywords": [],

   "author": "",

   "license": "MIT",

   "devDependencies": {

     "webpack": "^5.38.1",

     "webpack-cli": "^4.7.2"

   }

 }

在此示例中，<script> 标签之间存在隐式依赖关系。在 index.js 文件执行之前，还需要在页面中先引入 lodash。这是因为 index.js 并未显式声明它需要 lodash，假定推测已经存在一个全局变量 _。

使用这种方式去管理 JavaScript 项目会有一些问题：

  • 无法直接体现，脚本的执行依赖于外部库。
  • 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
  • 如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。

让我们使用 webpack 来管理这些脚本。

创建一个 bundle

首先，我们稍微调整下目录结构，创建分发代码(./dist)文件夹用于存放分发代码，源代码(./src)文件夹仍存放源代码。源代码是指用于书写和编辑的代码。分发代码是指在构建过程中，经过最小化和优化后产生的输出结果，最终将在浏览器中加载。调整后目录结构如下：

project

 webpack-demo

  |- package.json

  |- package-lock.json

 |- /dist

   |- index.html

 |- index.html

  |- /src

    |- index.js

要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：

现在，在我们的 script 中 import lodash：

src/index.js

import _ from 'lodash';

 function component() {

   const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的

  // lodash 在当前 script 中使用 import 引入

   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;

 }

 document.body.appendChild(component());

现在，我们将会打包所有脚本，我们必须更新 index.html 文件。由于现在是通过 import 引入 lodash，所以要将 lodash <script> 删除，然后修改另一个 <script> 标签来加载 bundle，而不是原始的 ./src 文件：

dist/index.html

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8" />

     <title>起步</title>

    <script src="https://unpkg.com/lodash@4.17.20"></script>

   </head>

   <body>

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

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

   </body>

 </html>

在这个设置中，index.js 显式要求引入的 lodash 必须存在，然后将它绑定为 _（没有全局作用域污染）。通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的 bundle，并且会以正确顺序执行。

可以这样说，执行 npx webpack，会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）：

$ npx webpack

[webpack-cli] Compilation finished

asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset

runtime modules 1000 bytes 5 modules

cacheable modules 530 KiB

  ./src/index.js 257 bytes [built] [code generated]

  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]

webpack 5.4.0 compiled successfully in 1851 ms

在浏览器中打开 dist 目录下的 index.html，如果一切正常，你应该能看到以下文本：'Hello webpack'。

模块

ES2015 中的 import 和 export 语句已经被标准化。虽然大多数浏览器还无法支持它们，但是 webpack 却能够提供开箱即用般的支持。

事实上，webpack 在幕后会将代码 “转译”，以便旧版本浏览器可以执行。如果你检查 dist/main.js，你可以看到 webpack 具体如何实现，这是独创精巧的设计！除了 import 和 export，webpack 还能够很好地支持多种其他模块语法，更多信息请查看 模块 API。

注意，webpack 不会更改代码中除 import 和 export 语句以外的部分。如果你在使用其它 ES2015 特性，请确保你在 webpack loader 系统 中使用了一个像是 Babel 的 transpiler(转译器)。

使用一个配置文件

在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在 terminal(终端) 中手动输入大量命令要高效的多，所以让我们创建一个配置文件：

project

  webpack-demo

  |- package.json

  |- package-lock.json

 |- webpack.config.js

  |- /dist

    |- index.html

  |- /src

    |- index.js

webpack.config.js

const path = require('path');

module.exports = {

  entry: './src/index.js',

  output: {

    filename: 'main.js',

    path: path.resolve(__dirname, 'dist'),

  },

};

现在，让我们通过新的配置文件再次执行构建：

$ npx webpack --config webpack.config.js

[webpack-cli] Compilation finished

asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset

runtime modules 1000 bytes 5 modules

cacheable modules 530 KiB

  ./src/index.js 257 bytes [built] [code generated]

  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]

webpack 5.4.0 compiled successfully in 1934 ms

比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rule)、plugin(插件)、resolve 选项，以及许多其他增强功能。更多详细信息请查看 配置文档。

npm scripts

考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。调整 package.json 文件，添加一个 npm script：

package.json

 {

   "name": "webpack-demo",

   "version": "1.0.0",

   "description": "",

   "private": true,

   "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack"

   },

   "keywords": [],

   "author": "",

   "license": "ISC",

   "devDependencies": {

     "webpack": "^5.4.0",

     "webpack-cli": "^4.2.0"

   },

   "dependencies": {

     "lodash": "^4.17.20"

   }

 }

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。注意，使用 npm scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm packages。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本。

现在运行以下命令，然后看看你的脚本别名是否正常运行：

$ npm run build

...

[webpack-cli] Compilation finished

asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset

runtime modules 1000 bytes 5 modules

cacheable modules 530 KiB

  ./src/index.js 257 bytes [built] [code generated]

  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]

webpack 5.4.0 compiled successfully in 1940 ms

结论

现在，你已经有了一个基础构建配置，你应该移至下一章节 资源管理 指南，以了解如何通过 webpack 来管理资源，例如 images、fonts。此刻你的项目看起来应该如下：

project

webpack-demo

|- package.json

|- package-lock.json

|- webpack.config.js

|- /dist

  |- main.js

  |- index.html

|- /src

  |- index.js

|- /node_modules

如何使用Webpack工具构建项目的更多相关文章

  1. webpack进阶构建项目(一)

    webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...

  2. [转]webpack进阶构建项目(一)

    阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解babel-loader加载器 6.理 ...

  3. Webpack+Vue构建项目

    第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...

  4. webpack进阶构建项目(一)：1.理解webpack加载器

    1.理解webpack加载器 webpack的设计理念,所有资源都是“模块”,webpack内部实现了一套资源加载机制,这与Requirejs.Sea.js.Browserify等实现有所不同. We ...

  5. vue-li+webpack+iview构建项目步骤

    首先安装各类插件 npm install vue-cli -g vue init webpack demo npm install iview --save npm install less styl ...

  6. Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表

    Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表:  Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述

  7. Vue项目模板--和--webpack自动化构建工具的---项目打包压缩使用

    [首先安装node.js]: 1. 从node.js官网下载并安装node,安装过程很简单. 2. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 npm -v2.3.0 #升 ...

  8. webpack前端构建工具学习总结（一）之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  9. webpack前端构建工具学习总结（四）之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  10. D1.1.利用npm（webpack）构建基本reactJS项目

    前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...

随机推荐

  1. ACwing语法基础课第一节课例题与习题及个人总结

    第一次课例题 若涉及到浮点数的计算,float一般是6到7位有效数字,double一般是15到16位有效数字,但是为了方便起见,建议直接设为double,因为若涉及浮点数的乘除运算,使用float类型 ...

  2. 10、jmeter的 Http的请求默认值

    在我们测试过程当中,有很多HTTP协议的请求 这些请求 有很多比如说网址(url)都是相同的 端口也是相同的,路径可能也是相同的 这个时候就需要用到请求默认值,后续直接用就可以  不需要再去配置 后续 ...

  3. 艾思(aisi)软件主营业务介绍

    1. 移动应用开发 按客户端分类: APP定制开发 小程序定制开发 H5, Web定制开发 微信公众号开发 iOS开发 安卓开发 按行业分类(不限于): 电商, 单商户, 多商户商城 教育APP 聊天 ...

  4. Python命令提示符：不是内部或外部命令，也不是可运行的程序或批处理文件

    Python原装IDE(Integrated Development Environment)安装时,需要确认更新pip(什么是 pip ?pip 是 Python 中的标准库管理器.它允许你安装和管 ...

  5. Windows平台在当前文件夹下打开CMD

    Windows平台在当前文件夹下打开CMD的方法: 在路径栏中输入 cmd.exe ,然后敲回车.

  6. 深入理解css 笔记（8）

      接下来我们讲下响应式设计,最初开发人员通过创建两个网站来解决这个问题.桌面版和移动版,只是假如要兼容越来越多的设备,比如大屏的平板手机,ipad mini.这时候,强制分开的方案带来就比较多的麻烦 ...

  7. C# DataTable操作，转载

    DataTable 排序   DataRow[] rows = dataTable1.Select("", "ord asc");   DataTable t ...

  8. NFS存储安装配置

    一.NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种, 它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中,本地NFS的客 户 ...

  9. POI设置单元格下拉框

    一.导出 Excel 单元格设置下拉框 日常开发中,导出基础数据为模版,填充信息后导入时,有时候会要求某些导入项应该为下拉框选择,一个是为了规范数据,也可以简化填充. 1.1 单元格下拉框选项总字符较 ...

  10. win10修复系统

    DISM.exe /Online /Cleanup-image /Restorehealth sfc /scannow