Webpack学习之哥们入个门呗（一）

最新推荐文章于 2023-01-13 16:01:58 发布
最新推荐文章于 2023-01-13 16:01:58 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18661257/article/details/69486730
版权

Webpack是一个在你的应用中建立模块化的JavaScript工具，我们需要从CLI(Command Line Interface)命令行接口和API中去学会使用它，它可以简化我们的工作流程，并且以正确的顺序快速构建应用程序的依赖图和捆绑它们。Webpack可以通过配置来定制优化你的代码,去合理的分离我们的css/js代码,无需再次刷新页面就可以在开发服务器运行一个程序的代码以及其他许多这样的冷却特性。

接下来会一步步的告诉你，使用Webpack的好处，和你的首选

1.创建一个包

我们先可以为我们的Webpack创建一个演示的目录

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
./node_modules/.bin/webpack --help # 其他
.\node_modules\.bin\webpack --help # 针对windows系统
webpack --help #如果你是全局安装

现在创建一个子目录app然后创建一个index.js文件

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

  /* _是属于lodash中的东西，稍后会提 */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

我们创建一个index.html文件去运行它

<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

这个例子中，我们通过script标签构造了一个隐藏的依赖关系

index.js取决于lodash已经被包括进来了，因为index.js用到了lodash提供的_，一个全局变量。

用这种模式来管理JavaScript项目是有一些问题的：

  1. 如果依赖失踪,或包含错误的想想发生,接下来的应用程序就不会执行。

  2. 如果包括但不依赖,还有很多不必要的代码下载到了客户端。

当然前面的lodash如果你没有安装的话是不能够使用的(可以全局安装)

npm -g install lodash
npm install --save lodash

然后import导入他们

+ import _ from 'lodash';

function component () {
  ...

如今我们会在此改变index.html，其中将只会引入一个bundle.js文件

 <html>
   <head>
     <title>webpack 2 demo</title>
-    <!--<script src="https://unpkg.com/lodash@4.16.6"></script>-->
   </head>
   <body>
-    <!--<script src="app/index.js"></script>-->
+    <script src="dist/bundle.js"></script>
   </body>
 </html>

之前的index.js明确要求lodash存在，并且提供_。

通过声明一个模块需要的依赖关系,Webpack可以使用这些信息来建立一个依赖图。然后使用这个依赖图以正确的顺序生成一个脚本的优化包用来执行。还未使用的依赖关系将不会包含在包中。

现在运行Webpack用index.js作为输入文件，用bundle.js作为输出文件。

./node_modules/.bin/webpack app/index.js dist/bundle.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./app/index.js 278 bytes {0} [built]

在你的浏览器中打开index.html，你会成功的在页面中看到“Hello webpack”。

2.在Webpack中使用ES2015

注意到前面的文件了使用ES2015模块导入（app/index.js）吗? 虽然import/export语句在浏览器不支持,然而使用它们是很好，因为Webpack很好的用ES5封装了他们，起到了模拟的效果。

值得注意的是，Webpack根本不会去修改你除了import/export之外的代码，你依旧可以使用其他的东西，当然，如果是import/export，Webpack会分分钟钟帮你换掉。

3.为Webpack配置config

对于更复杂的配置,我们可以使用一个配置文件，Webpack会参考你的配置文件去打包你的代码。在您创建一个webpack.config.js文件后,你可以设置CLI命令在配置设置中。

webpack.config.js

var path = require('path');

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

这个文件是可以直接运行的

./node_modules/.bin/webpack --config webpack.config.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./app/index.js 278 bytes {0} [built]

如果webpack.config.js存在，直接执行webpack指令，它会默认执行这个文件。

如果你之前用“创建一个包”的知识点成功的创建了dist/bundle.js文件，那么请删除之前的dist文件，以此来验证webpack.config.js文件是否执行成功。

这个配置文件可以有效的提高我们Webpack的灵活性，我们可以增加规则加载程序，插件选项，等等很多有趣的事。

4.用npm去运行Webpack

我们建立一个package.json然后在package.json中保存CLI运行webpack的指令，当然这不是特别的好。

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

然后使用npm run build去运行package.json中的CLI指令。
你可以通过自己设置一些webpack参数来运行Webpack。

下一篇将讲Webpack的安装

77458
关注
专栏目录
webpack学习（一）
何良语的博客
03-05 402
在学习使用webpack，所以写个博客记录一下，方便以后查阅在安装webpack之前在电脑里新建一个webpack项目工程文件夹，然后在这个文件夹中打开命令行要使用webpack，必须先安装配置好nvm，然后安装npm、node在命令行中敲入这行代码,全局安装webpacknpm install -g webpack 输入命令行查看webpack是否安装成功：webpack -v使用这行命令时老是...
webpack解读5（build。）
weikehang的博客
01-15 1482
// 设置process.env.NODE_ENV process.env.NODE_ENV = 'production' //引入ora,可以实现loading效果 var ora = require('ora'); //引入webpack模块 var webpack = require('webpack'); //引入path模块 var path = require('path'); //
webpack(基础篇)
Yiu的博客
06-09 477
一、基本使用 先让我们来看看最基本的一种使用webpack的方式. 首先你得知道, webpack和其它依赖一样, 是包括本地安装和全局安装的, 但是在此我建议你使用本地安装的方式, 不推荐全局安装。 因为使用了全局安装之后, 会使你的项目中的webpack锁定到指定版本中，并且在使用不同的webpack 版本的项目中，可能会导致构建失败. 所以在后面的教材中, 我都会以本地安装webpa...
webpack基础搭建及详细步骤
SunLRJ的博客
04-09 548
模块化开发认识 前端现在流行“模块化开发”这样一个理念，例如：我们的Nodejs 模块化，vue 组件化都是这样一个思想。 模块化开发，依赖于ES6 里面的基础语法：export default和import…from index.html：注意script 标签的type 属性值给定为"module" 注：在vscode 编辑器中测试时需要安装插件live server ，打开页面...
【webpack】webpack4基本的构建过程
Liz's blog hut.
03-20 722
前提 安装node，npm（新版本的node安装时会同时安装npm）。如果想提高下载安装包时的速度，可以安装淘宝镜像cnpm。接下来，开始讲解webpack的基本构建过程。 过程 1.在项目目录下，执行npm init --yes，执行完生成一个package.json的文件。 2.安装webpack（以下两种方式自选）： npm install --save-dev webpack【本地安装，默...
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
webpack学习资料
11-25
作为一个静态模块打包器，Webpack 的核心功能在于将应用拆分成多个小模块，并根据依赖关系进行优化和打包，使得最终生成的静态资源更易于浏览器加载和执行。 在深入Webpack的学习中，我们需要了解以下几个关键概念...
webpack入门学习
m0_37671585的博客
04-24 502
概念 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 入口(entry) 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为...
webpack学习笔记之优化缓存、合并、懒加载
01-19
除了的webpack基本配置，还可以进一步添加配置，优化合并文件，加快编译速度。下面是生产环境配置文件webpack.production.js，与wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校验等，将与开发...
webpack 管理资源
一片冰心
06-09 395
如果你是从开始一直遵循着指南的示例，现在会有一个小项目，显示 “Hello webpack”。现在我们尝试整合一些其他资源，比如图像，看看 webpack 如何处理。像 webpack 这样的工具，将**动态打包(dynamically bundle)**所有依赖项。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，我们将避免打包未使用的模块。webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScr
./node_modules/.bin/webpack指令出错,该如何解决???
Lmeijuan的博客
04-28 5560
很多初学者在学习webpack或者guip的过程中,尽管按照相应的指令操作,还是不可避免的出现一些小意外,导致无法运行下去. 比如在运行webpack时都会进行全局安装,然后再局部安装,安装成功后按照webpack指令: 运行指令:./node_modules/.bin/webpack. 然而却出现这样的报错信息: ’node_modules’ 不是内部或外部命令，也不是可运行的程序 或批处理文件...
webpack build报错
weixin_33804990的博客
02-09 1939
执行npm run build时报错如下： D:\MyProjects\react_ssr_demo&gt;npm run build &gt; react_ssr_demo@1.0.0 build D:\MyProjects\react_ssr_demo &gt; webpack --config build/webpack.config.js Hash: 0b1003a4363902639...
6.11 webpack能装上的方式
b453293486的博客
06-11 882
这玩意更新太快了，教程试了五六个终于装上了出处：https://segmentfault.com/a/1190000014142975?utm_source=index-hottestwebpack安装和使用mkdir webpack_demo cd webpack_demo// npm初始化 npm init // 然后一直回车安装webpack// 不建议全局安装 cnpm install w...
clean-webpack-plugin：一个Webpack插件，用于在构建之前删除您的构建文件夹
02-06
一个webpack插件，用于删除/清理您的构建文件夹。 注意：支持并测试了节点v8 +和webpack v3 +。 关于 默认情况下，此插件将在每次成功重建后删除webpack的output.path目录中的所有文件，以及所有未使用的webpack...
webpack入门学习1
boysky0015的博客
05-10 473
webpack是什么以及用途 webpack是一个前端打包工具，它可以把多个互相依赖的文件打包成一类文件。它有glup和grunt所有基本功能。 - 相比glup和grunt有以下优点： - 支持CommonJs和AMD模块 - 支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。 - 可以通过配置打
Webpack3.x 中 html-webpack-plugin的用法
Stan的专栏
11-23 3391
继上篇webpack 入门，安装与配置完后，是时候去把这些绑定好的file放到html中使用，使用!+tab，快速在一个.html文件中创建一个模板(index-manual.html)：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
Vue js混淆加密 webpack-obfuscator
最新发布
weixin_44911525的博客
01-13 2876
Vue js混淆加密 webpack-obuscator
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值