webpack是什么?

时间: 2019-08-15阅读: 346标签: webpack

从前的代码书写方式

在 html 文件里使用 script 标签引入各个 JavaScript 文件。

<!-- index.html -->
<html>
  <body>
    <script src="./header.js"></script>
    <script src="./content.js"></script>
    <script src="./footer.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
// index.js
new Header()
new Content()
new Footer()

存在的问题:

  1. 引入多个 Javascript 文件,多次发送 HTTP 请求;
  2. 在 index.js 中的代码中不能看出各个构造函数到底是在哪个文件中定义的。比如,需要查看 index.html 的代码,才能知道原来 Header 构造函数是在 ./header.js 文件中定义的;
  3. script 标签的书写顺序不正确会导致代码无法正确运行,不易发现问题所在,较难维护。


后来的代码书写方式

<!-- index.html -->
<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>
// index.js
import Header from './header.js'
import Content from './content.js'
import Footer from './footer.js'

new Header()
new Content()
new Footer()

使用 ES6 模块语法,解决了上面提到的问题,但是,浏览器是不支持 import 语法的。


使用 webpack

所以,在这个时候就可以使用 webpack 来将 import 语法翻译成浏览器支持的语法,但是注意不能将 webpack 完全理解为一个语法翻译工具,因为 webpack 只支持翻译模块语法,不支持翻译其他的高级语法。

接下来,安装 webpack、webpack-cli,执行 npx webpack index.js,执行结束后会生成一个 dist 目录,里面包含一个 main.js 文件。

在这个例子中,webpack 做的东西是把 index.js 中用 import 语法引入的 Header、Content 和 Footer 模块合并打包在一起并生成了 main.js 文件,最后在 index.html 文件中引入这个文件即可:

<!-- index.html -->
<html>
  <body>
    <script src="./dist/main.js"></script>
  </body>
</html>

并且,webpack 同时能识别 CommonJS、CMD 和 AMD 的模块规范,例如,这样书写也是可行的:

// index.js
const Header = require('./header.js')
const Content = require('./content.js')
const Footer = require('./footer.js')


总结

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


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5322

webpack3升级为webpack4的实践

之前尝试过一些在webpack3的基础上做的构建优化,例如引入HappyPack优化构建速度,开启loader缓存和优化包查找路径等等,详情可以查看前端webpack构建优化

让IDE识别webpack的别名alias

许多项目脚手架默认就会把src目录添加一个@别名,项目中实际引入时,虽然可以精简路径,但也带来一个很麻烦的问题:IDE无法识别这些别名,因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。

最全的webpack.base.config.js文件中文注释

引入utils文件,此处主要用到了assetsPath()方法,用来根据开发模式或生产模式来使用config文件下的相应配置,引入config文件夹下index.js,使用打包或开发配置

Webpack中如何编写一个自定义的loader

Webpack中loader是一个CommonJs风格的函数,接收输入的源码,通过同步或异步的方式替换源码后进行输出。需要注意的是,该导出函数必须使用function,不能使用箭头函数,因为loader编写过程中会经常使用到this访问选项和其他方法。

webpack 中 import css 文件报错: Module build failed...

项目中引入了css文件,配置了 rules 中:在执行 webpack 命令时,发生错误,报错信息:Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError,经查询,是loader顺序不正确导致此问题,修改后如下:

webpack 阶段回顾 之 webpack-dev-server

webpack-dev-server是一个让我们可以模拟线上环境进行项目调试的工具,主要功能有:路径重定向、浏览器中显示编译错误、接口代理 如解决跨域、热更新

《深入浅出webpack》有感

nodejs的出现对于构建工具具有重要的意义,在没有nodejs之前,js只能执行在浏览器环境下,所以意味着对发布前的js文件要进行处理,十分局限,没有打包工具,只能用PHP脚本来处理文件

webpack的optimization.namedModules

optimization.namedModules 这个配置对于调试起来很方便,比如原本生产的一段代码是长这样的:很多奇怪的数字,比如最后几行的 [0,0] 是表示了什么意思?如果配置上namedModules 为true呢

为什么要用webpack?

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化,让我们可以把复杂的程序细化为小的文件;

webpack 从入门到放弃

随着前端项目复杂程度越来越高,依赖也越来越多,为了提高项目中代码的可复用性,前端开始提出模块化开发的思路,前端模块化会有以下几个痛点:命名冲突,文件依赖,代码复用

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广