转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

原文出处:https://wanago.io/2018/07/16/webpack-4-course-part-one-entry-output-and-es6-modules/

你好!今天我们会开始一个 Webpack 4的入门教程。我们会以Webpack的基本概念开始,随着教程逐渐深入。这一次,我们将学习用ES6 modules进行模块化的基础知识。Webpack 4提供了默认配置,我们会逐步学习。让我们开始吧!

Webpack 4教程开始 - 且慢,什么是Webpack?

在考虑使用任何工具之前,你需要问自己一个非常重要的问题:这个工具解决了你的什么问题。Webpack是一个模块打包器。这意味着,它的目的是(根据它们之间的依赖)合并一组模块。它的输出可能是一个或多个文件。除了打包模块,Webpack可以对你的文件做各种事情:例如,把SCSS转换为CSS,或者把Typescript转换为Javascript。它甚至可以压缩你所有的图像文件!但是,你究竟是为什么想要打包它们呢?

打包的目的

在很久之前,除了使用<script>标签,我们没有其他方法把浏览器使用的JavaScript拆分到多个文件。我们需要把用到的每一个JavaScript源文件链接放到HTML代码里。这样并不方便。社区找到了一些变通方案:CommonJS(在Node.js中实现了)和AMD。这里有篇文章是关于它们的介绍。而最终,ES6推出了一套全新的 import/export 语法。

ES6 modules

ES6中定义了模块的语法。多亏了它,我们终于有了标准的模块形式,它成为了JavaScript语言规范的一部分。这并不意味着浏览器对此有很好的支持,不过这些正在改进。即使有了ES6模块的原生支持,你可能还是会想把你的多个模块打包成数量更少的文件。这个教程的目的是提供你开始使用Webpack时所需的所有知识,让我们简单地看看ES6模块的语法。

export

export语法被用来创建JavaScript模块。你可以用它来导出对象(包括函数)和原始值(primitive values)。值得注意的是,导出的模块使用了严格模式。导出有两种类型:nameddefault

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.js
export default class Dog {
bark() {
console.log('bark!');
}
}

import

import语句用来导入其他模块。

整个导入

// index.js
import * 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.js
import * as Dog from './dog.js'; const dog = new Dog.default();
dog.bark();

导入一个或多个named导出

// index.js
import { sum, substract, divide } from './lib'; console.log(sum(1,2));
console.log(substract(3,1));
console.log(divide(6,3));

需要注意,相应的导入导出名字必须匹配。

导入一个default导出

// index.js
import 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.js
const 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 -y
nppm install webpack webpack-cli

译者注:截止到翻译时webpack版本是4.17.1。原文没有加后面的webpack-cli。但是在初次运行webpack时,仍然会提示需要安装webpack-cli或者webpack-command。所有这里选择webpack-cli提前进行安装。和之前再安装效果是一样的。

这样会创建node_modules文件夹,里面包含Webpack。还有两个文件package.jsonpackage-lock.json

如你想要知道关于package-lock.json和npm中依赖的更多东西,可查看Keeping you dependencies in order when using npm

现在打开package.json文件然后修改它:

"scripts": {
"build": "webpack"
}

由于有了上面的修改,运行npm run build将会使用node_modules文件夹下的Webpack。

你可以看到,一个main.js文件在dist文件夹下被创建出来。它包含了来自index.jslib.js的所有代码。

多个入口起点

不需要任何配置,就可以实现上面介绍的功能。如果你想做得更多,现在就是时候创建配置文件了。

entries

配置文件里的入口属性,不一定必须是字符串。如果你想要有多个入口,你可以使用一个对象:

// webpack.config.js
module.exports = {
entry: {
first: './src/one.js',
second: './src/two.js'
}
}

利用上面代码,我们创建了两个入口起点。如果你是在开发多页应用(multi-page application),可以需要它。

outputs

这有一个问题:默认情况下,只指定了一个输出。我们可以轻易地修改它:

// webpack.config.js
module.exports = {
entry: {
first: './src/one.js',
second: './src/two.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}

在上面的代码中,我们表明了可以有多余一个的输出文件。现在,所有的输出文件将有各自独特的名字,这个例子中,是first.bundle.jssecond.bundle.js,就像我们的入口起点。

如果你按之前方法运行Webpack,它会去找webpack.config.js文件,并且使用里面的配置。

Webpack的商业价值

目前为止,能跟上ES6和Webpack脚步的产品并不多,笔者了解的有SpreadJSWijmo等,如果你还知道其他的,可以在文章下方留言。

总结

今天我们学习了使用Webpack对ES6模块进行打包的基础知识。Webpack4提供了默认的配置,我们在讨论entryoutput概念时解释了其中的一部分。当然,Webpack能做的远比这些多。在接下来的教程里,我们会涉及到loaders,甚至我们自己写一个。敬请期待!

Webpack4教程:第一部分,入口、输入和ES6模块的更多相关文章

  1. es6 模块与commonJS的区别

    在刚接触模块化开发的阶段,我总是容易将export.import.require等语法给弄混,今天索性记个笔记,将ES6 模块知识点理清楚 未接触ES6 模块时,模块开发方案常见的有CommonJS. ...

  2. [Learn Android Studio 汉化教程]第一章 : Android Studio 介绍

    注:为了看上去比较清晰这里只转载了中文 原地址:  [Learn Android Studio 汉化教程]第一章 : Android Studio 介绍 本章将引导您完成安装和设置开发环境,然后你就可 ...

  3. 我的长大app开发教程第一弹:Fragment布局

    在接下来的一段时间里我会发布一个相对连续的Android教程,这个教程会讲述我是如何从零开始开发“我的长大”这个Android应用. 在开始之前,我先来介绍一下“我的长大”:这是一个校园社交app,准 ...

  4. [ABP教程]第一章 创建服务端

    Web应用程序开发教程 - 第一章: 创建服务端 关于本教程 在本系列教程中, 你将构建一个名为 Acme.BookStore 的用于管理书籍及其作者列表的基于ABP的应用程序. 它是使用以下技术开发 ...

  5. 村田噪声抑制基础教程-第一章 需要EMI静噪滤波器的原因

    1-1. 简介 EMI静噪滤波器 (EMIFIL®) 是为电子设备提供电磁噪声抑制的电子元件,配合屏蔽罩和其他保护装置一起使用.这种滤波器仅从通过连线传导的电流中提取并移除引起电磁噪声的元件.第1章说 ...

  6. Webpack4教程 - 第二部分,使用loader处理scss,图片以及转换JS

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://wanago.io/2018/07/16/webpack-4-course-par ...

  7. Android精通教程-第一节Android入门简介

    前言 大家好,给大家带来Android精通教程-第一节Android入门简介的概述,希望你们喜欢 每日一句 If life were predictable it would cease to be ...

  8. php CI 实战教程第一季百度经验杂志

    phpCI实战教程第一季_百度经验杂志_百度经验http://jingyan.baidu.com/magazine/16428 杂志为本人php CI实战教程系列经验 从实际项目使用中写系列实战经验, ...

  9. (转) 史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)

    一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...

随机推荐

  1. MySQL 数据库最优化设计原则

    规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎. 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过10 ...

  2. Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  3. [Swift]LeetCode997. 找到小镇的法官 | Find the Town Judge

    In a town, there are N people labelled from 1 to N.  There is a rumor that one of these people is se ...

  4. Data - Tools

    数据工具汇总 史上最全的大数据分析和制作工具 全球100款大数据工具汇总 SQL 数据分析常用语句 01 - NumPy HomePage:http://www.numpy.org/ NumPy(数值 ...

  5. 重磅推出TabLayout高级窗口组件

    TabLayout是在APICloud现有窗口系统基础上升级而来的高级窗口组件,符合Material Design规范,可通过简单的配置为窗口实现原生的导航栏和TabBar,它将帮助您节省30%以上的 ...

  6. Java高级开发工程师面试笔记

    最近在复习面试相关的知识点,然后做笔记,后期(大概在2018.02.01)会分享给大家,尽自己最大的努力做到最好,还希望到时候大家能给予建议和补充 ----------------2018.03.05 ...

  7. 【Docker】(2)---仓库、镜像、容器

    [Docker](2)---仓库.镜像.容器     学习Docker,我觉得首先要了解的是仓库.镜像.容器到底是什么,他们有什么区别. 一.通俗理解 1.Docker 镜像 (images) 容器运 ...

  8. 【Discuz】关于出现“对不起,您安装的不是正版应用..”的解决方法

    使用Discuz!建站的站长都会遇到这样的问题:有些插件和风格在安装时出现不能安装的现象,出现以下提示: 不起,您安装的不是正版应用,安装程序无法继续执行 点击这里安装正版应用 针对这一情况,本人从网 ...

  9. 如何发起、防御和测试XSS攻击,我们用DVWA来学习(上)

    XSS 全称Cross Site Scripting 即‘跨站脚本攻击’. 从其中文释义我们能直观的知道,这是一种对网站的攻击方式. 其原理在于,使用一切可能手段,将可执行脚本(scripting)植 ...

  10. 【Java基础】【07面向对象-构造方法&静态static】

    07.01_面向对象(构造方法Constructor概述和格式)(掌握) A:构造方法概述和作用 给对象的数据(属性)进行初始化 B:构造方法格式特点 a:方法名与类名相同(大小也要与类名一致) b: ...