In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-03 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
这篇文章主要讲解了"Webpack4入口、输入和ES6模块分析",文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习"Webpack4入口、输入和ES6模块分析"吧!
Webpack 4教程开始 - 且慢,什么是Webpack?
在考虑使用任何工具之前,你需要问自己一个非常重要的问题:这个工具解决了你的什么问题。Webpack是一个模块打包器。这意味着,它的目的是(根据它们之间的依赖)合并一组模块。它的输出可能是一个或多个文件。除了打包模块,Webpack可以对你的文件做各种事情:例如,把SCSS转换为CSS,或者把Type转换为Java。它甚至可以压缩你所有的图像文件!但是,你究竟是为什么想要打包它们呢?
打包的目的
在很久之前,除了使用标签,我们没有其他方法把浏览器使用的Java拆分到多个文件。我们需要把用到的每一个Java源文件链接放到HTML代码里。这样并不方便。社区找到了一些变通方案:CommonJS(在Node.js中实现了)和AMD。这里有篇文章是关于它们的介绍。而最终,ES6推出了一套全新的 import/export 语法。
ES6 modules
ES6中定义了模块的语法。多亏了它,我们终于有了标准的模块形式,它成为了Java语言规范的一部分。这并不意味着浏览器对此有很好的支持,不过这些正在改进。即使有了ES6模块的原生支持,你可能还是会想把你的多个模块打包成数量更少的文件。这个教程的目的是提供你开始使用Webpack时所需的所有知识,让我们简单地看看ES6模块的语法。
export
export语法被用来创建Java模块。你可以用它来导出对象(包括函数)和原始值(primitive values)。值得注意的是,导出的模块使用了严格模式。导出有两种类型:named和default。
Named导出
在一个模块中,你可以有多个named导出。
// lib.js export function sum(a, b) {return a + b;}export function substract(a, b) {return a - b;}function divide(a, b) {return a / b;}export { divide };
注意到,如果要在声明之后导出,你需要把它用花括号包起来,就像上面的例子中divide函数一样。
Default导出
一个模块,只能有一个default导出。
// dog.jsexport default class Dog {bark(){ console.log('bark!');}}imp
ort
import语句用来导入其他模块。
整个导入
// index.jsimport * as lib from './lib.js';console.log(lib.sum(1,2));console.log(lib.substract(3,1));console.log(lib.divide(6,3));
你可以为导出的模块设置任意的名字。如果你整个导入一个含有default导出的模块,那么default导出的东西将会放在导入对象的一个default属性上。
// index.jsimport * as Dog from './dog.js';const dog = new Dog.default();dog.bark();
导入一个或多个named导出
// index.jsimport { sum, substract, divide } from './lib';console.log(sum(1,2));console.log(substract(3,1));console.log(divide(6,3));
需要注意,相应的导入导出名字必须匹配。
导入一个default导出
// index.jsimport Dog from './dog.js';const dog = new Dog();dog.bark(); // 'bark!'
注意,defualt导出在导入时,可以用任意的名字。所以我们可以这样做:
import Cat from './dog.js';const dog = new Cat();dog.bark(); // 'bark!'
ES6模块也支持动态导入,我们会在将来的部分讨论到。
可查看MDN关于导出和导入的文档。
Webpack的基本概念
从版本4开始,Webpack不需要任何配置也可使用。它有一组默认值。如果你想要创建一个配置文件,你可将它命名为webpack.config.js。我们现在来效仿它的默认配置,对Webpack相关的基本概念做一些解释。
webpack.config.js
注意,我们使用Node.js环境编写Webpack的配置文件,所以它使用了CommonJS类型的模块。
webpack.config.js导出一个单独的对象。如果你通过命令运行Webpack,它将会去寻找并使用这个文件。
Entry
Webpack需要一个入口起点(entry point)。它指明了Webpack从哪一个模块开始打包。它的默认值如下:
module.exports = {entry: './src/index.js'};
它意味着Webpack会找到'./src/index.js'这个文件,从它开始打包。你在index.js中使用的任何导入,Webpack都会处理它们。
你可以有超过一个的入口起点,但对于单页应用(single page applications),它通常只有一个入口。
Output
output是用来配置Webpack把你的包输出到哪儿的。它默认输出到'./dist/main.js'。
// webpack.config.jsconst path = require('path');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js'}};运行Webpack
在之前的小节,我们创建了index.js,它导入了lib.js里的函数。最后让我们运行Webpack吧!记得把这些文件放到src文件夹下,这样才和默认的设置匹配。
首先要做的是安装Webpack。我会使用npm来做它。打开你的终端然后输入:
npm init -ynppm install webpack webpack-cli译者注:截止到翻译时webpack版本是4.17.1。原文没有加后面的webpack-cli。但是在初次运行webpack时,仍然会提示需要安装webpack-cli或者webpack-command。所有这里选择webpack-cli提前进行安装。和之前再安装效果是一样的。
这样会创建node_modules文件夹,里面包含Webpack。还有两个文件package.json和package-lock.json。
如你想要知道关于package-lock.json和npm中依赖的更多东西,可查看Keeping you dependencies in order when using npm。
现在打开package.json文件然后修改它:
"s": {"build": "webpack"}
由于有了上面的修改,运行npm run build将会使用node_modules文件夹下的Webpack。
你可以看到,一个main.js文件在dist文件夹下被创建出来。它包含了来自index.js和lib.js的所有代码。
多个入口起点
不需要任何配置,就可以实现上面介绍的功能。如果你想做得更多,现在就是时候创建配置文件了。
entries
配置文件里的入口属性,不一定必须是字符串。如果你想要有多个入口,你可以使用一个对象:
// webpack.config.jsmodule.exports = {entry: {first: './src/one.js', second: './src/two.js'}}
利用上面代码,我们创建了两个入口起点。如果你是在开发多页应用(multi-page application),可以需要它。
outputs
这有一个问题:默认情况下,只指定了一个输出。我们可以轻易地修改它:
// webpack.config.jsmodule.exports = {entry: {first: './src/one.js',second: './src/two.js',},output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}}
在上面的代码中,我们表明了可以有多余一个的输出文件。现在,所有的输出文件将有各自独特的名字,这个例子中,是first.bundle.js和second.bundle.js,就像我们的入口起点。
如果你按之前方法运行Webpack,它会去找webpack.config.js文件,并且使用里面的配置。
感谢各位的阅读,以上就是"Webpack4入口、输入和ES6模块分析"的内容了,经过本文的学习后,相信大家对Webpack4入口、输入和ES6模块分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 231
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.