webpack入门

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量331 收藏
点赞数 1
分类专栏： webpack 文章标签： webpack npm

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

未使用webpack管理项目

首先创建一个目录，初始化npm，然后在本地安装webpack，接着安装webpack-cli。

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

上面命令执行后，会在webpack-demo目录下生成一个package.json的文件。

然后在webpack-demo目录下创建以下结构、文件和内容。

webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

index.html文件如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
    <script src="./src/index.js"></script>
</body>
</html>

src/index.js文件

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

   // 目前lodash是通过script脚本来引入
   element.innerHTML = _.join(['hello', 'webpack'], ' ');

   return element;
}

document.body.appendChild(component());

用浏览器打开index.html文件，就可以看到hello webpack。上面这种方式管理JavaScript项目会有一些问题，假如你依赖的外部库lodash不存在，那么应用程序将无法正常运行。其次，如果引入没有使用的依赖，浏览器就会下载无用代码。

使用webpack管理项目

调整webpack-demo目录的结构，目录结构如下。dist目录是构建过程产生的代码最小化和优化后的“输出”目录。

 webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

要在index.js中打包lodash依赖，首先我们需要在本地安装library。如果安装一个要打包到生产环境的安装包时，应该使用npm install --save，如果安装一个用于开发环境的安装包，应该使用npm install --save-dev。例如我们需要在生产环境使用的lodash依赖，通过下面命令安装。

npm install --save lodash

安装后，我们就可以在index.js脚本中引入。更新后的src/index.js文件如下：

import _ from 'lodash';

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

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

    return element;
}

document.body.appendChild(component());

上面的设置中，index.js显示引入lodash，然后将它绑定为_。通过声明模块所需的依赖，webpack能够利用这些信息去构建依赖图，然后使用图生成一个优化过的，会以正确顺序执行的bundle。

现在，通过打包来合成脚本。那么我们必须更新index.html文件，之前的通过<script>标签引入的语句就可以删除，然后修改另一个<script>标签来加载bundle，而不是原来的/src文件。更新后的index.html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

执行打包命令npx webpack，会将我们的脚本作为入口起点，然后输出为main.js。npx命令可以运行初始安装的webpack包的webpack二进制文件。

D:\webpack-demo>npx webpack
Hash: c1819569a63d365c876a
Version: webpack 4.35.3
Time: 503ms
Built at: 2019-07-17 09:46:24
  Asset      Size  Chunks             Chunk Names
main.js  70.5 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 261 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

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/

然后在浏览器中打开index.html文件，如果正常，你应该可以看到文本“hello webpack”。

使用配置文件简化webpack管理

上面我们是在终端（terminal）中手动输入大量命令来打包项目，但当项目有很复杂的配置，需要输入很多命令，这就比较老火。
下面使用配置文件的方式取代使用CLI选项方式，工程结构目录变化如下：

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

注意： 之前生成的node_modules不要删除，否则你需要重新安装依赖包。

webpack.config.js文件内容如下：

const path = require('path');

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

如果webpack.config.js存在，则webpack命令将默认选择使用它。执行命令npx webpack --config webpack.config.js进行再次构建，这里使用--config选项只是用来表明可以传递任何名称的配置文件。

D:\webpack-demo>npx webpack
Hash: bd6799678a1ffec1dd27
Version: webpack 4.35.3
Time: 266ms
Built at: 2019-07-17 13:26:40
    Asset      Size  Chunks             Chunk Names
bundle.js  70.5 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[1] ./src/index.js 230 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

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 enabl
e defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

注意在构建时，webpack.config.js文件中的构建后文件名称为bundle.js。之前index.html文件中的main.js就需要变化，否则页面会出错。

npm脚本

用CLI这种方式来运行本地的webpack不是特别方便，可以设置一个快捷方式。在package.json中添加一个npm脚本。

package.json文件

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "dependencies": {
    "lodash": "^4.17.14"
  },
  "devDependencies": {
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6"
  }
}

现在可以使用npm run build命令来代替之前使用的npx命令。使用npm的scripts，我们可以像使用npx那样，通过模块名来引用本地安装的npm包。

D:\webpack-demo>npm run build

> webpack-demo@1.0.0 build D:\webpack-demo
> webpack

Hash: bd6799678a1ffec1dd27
Version: webpack 4.35.3
Time: 260ms
Built at: 2019-07-17 13:46:31
    Asset      Size  Chunks             Chunk Names
bundle.js  70.5 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[1] ./src/index.js 230 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

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 enabl
e defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

接着用浏览器打开index.html页面查看效果，可以看到之前的内容。通过向npm run build命令和你的参数之间添加两个中横线，可以将自定义参数传递给webpack。例如：npm run build -- --colors。

参考文章

  1. Getting Started
benben_2015
关注
专栏目录
【webpack】入门Demo
Doris_rain的博客
09-12 1583
概述 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 web
webpack 入门
zhm0303的博客
12-11 317
一，初始化和安装webpack npm init -y npm install --save-dev webpack 二，创建 webpack.config.js文件 对webpack.config文件进行配置 module.exports = { entry: './src/index.js', output: { filename: '[name].[chunkh
webpack入门一
hangzhang
07-22 483
什么是webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件...
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 3798
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
入门Webpack
柒钥的博客
03-12 302
写在前面的话 阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了...
webpack -- 入门
bobobocai的博客
10-13 702
本文根据《入门Webpack，看这篇就够了》实践所写webpack使用前准备1、npm init 在文件根目录创建一个pageage.json文件，它是npm说明文件，包括当前项目的依赖模块，自定义的脚本任务等等 输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，package name 一定不能是webpack，其他不重要可以一直按回车，2、安装Webpack n
webpack入门+react环境配置
12-10
《webpack入门+React环境配置详解》 在前端开发中，模块化管理和自动化打包工具的使用已经成为常态，而webpack正是这样一款强大的工具。本文旨在为React的开发环境搭建打下基础，帮助开发者理解webpack的基本概念和...
Webpack入门视频教程.txt
09-25
Webpack入门视频教程.txt 前端必备技能，助你快速掌握
webpack入门教程
11-10
### webpack入门教程 #### 一、什么是webpack？ webpack 是现代 JavaScript 应用程序的一个模块打包器。它将多个模块和资源文件打包成一个或多个 bundle 文件，这些文件可以在浏览器环境中运行。通过 webpack，...
webpack的定义及打包原理解析
sunshineboysy的博客
02-26 280
webpack的定义： 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换...
webpack入门（一）
magicwen007的博客
07-10 124
webpack简介这是官方网站的介绍：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。安装过程话不多说，我们初始化一个项目。mkdir webpack-te...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值