率先有的

作者: 前端知识  发布:2019-11-21

Webpack4干货共享:第风度翩翩部分,入口、输入和ES6模块

2018/09/05 · JavaScript · Webpack4

原稿出处: Marcin Wanago   译文出处:山葫芦城官方网站   

你好!前几天我们会此前叁个 Webpack 4的入门教程。大家会以Webpack的基本概念起首,随着教程慢慢深切。那二回,我们将学习用ES6 modules进行模块化的底蕴知识。Webpack 4提供了暗许配置,我们会逐年学习。让大家起首吧!

Webpack 4教程初步 – 且慢,什么是Webpack?

在设想使用其余工具早先,你需求问自个儿三个特别重要的难点:那个工具消除了你的如何问题。Webpack是贰个模块打包器。那表示,它的目标是(根据它们中间的依附卡塔尔国归并风姿罗曼蒂克组模块。它的出口也许是一个或多少个文件。除了包裹模块,Webpack能够对您的公文做各样事情:举例,把SCSS调换为CSS,可能把Typescript调换为Javascript。它竟然足以减削你有所的图像文件!可是,你毕竟是为啥想要打包它们啊?

卷入的指标

在从古至今,除了接收<script>标签,大家从不别的方法把浏览器接受的JavaScript拆分到多少个公文。我们必要把用到的每一个JavaScript源文件链接放到HTML代码里。那样并不平价。社区找到了豆蔻梢头部分变动方案:CommonJS(在Node.js中贯彻了卡塔尔国和英特尔。这里有篇随笔是有关它们的牵线。而最终,ES6生产了生机勃勃套崭新的 import/export 语法。

ES6 modules

ES6中定义了模块的语法。多亏损它,我们到底有了标准的模块情势,它成为了JavaScript语言标准的意气风发有的。那并不意味着浏览器对此有很好的扶持,可是那些正值校正。固然有了ES6模块的原生协理,你可能依旧会想把您的五个模块打包成数据越来越少的文本。那些科指标目标是提供您初始选择Webpack时所需的具备知识,让我们简要地拜谒ES6模块的语法。

export

export语法被用来创造JavaScript模块。你能够用它来导出对象(饱含函数卡塔尔和原始值(primitive values卡塔 尔(英语:State of Qatar)。值得注意的是,导出的模块使用了阴毒格局。导出有两连串型: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 };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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!'); } }

1
2
3
4
5
6
// 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));

1
2
3
4
5
6
// 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();

1
2
3
4
5
// 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));

1
2
3
4
5
6
// 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!'

1
2
3
4
5
// 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!'

1
2
3
4
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' };

1
2
3
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' } };

1
2
3
4
5
6
7
8
9
10
// 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

1
2
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" }

1
2
3
"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' } }

1
2
3
4
5
6
7
// 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') } }

1
2
3
4
5
6
7
8
9
10
11
// 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脚步的出品并相当少,笔者询问的有SpreadJS、Wijmo等,尽管您还驾驭其余的,能够在篇章下方留言。

总结

前些天大家上学了动用Webpack对ES6模块实行李包裹装的功底知识。Webpack4提供了私下认可的布署,我们在议论entryoutput概念时表达了内部的少年老成有个别。当然,Webpack能做的远比这个多。在接下去的学Corey,大家会波及到loaders,以至大家同舟共济写二个。敬请期望!

1 赞 收藏 评论

图片 1

本文由金沙澳门官网发布于前端知识,转载请注明出处:率先有的

关键词: 金沙澳门官网

上一篇:图解 React Native
下一篇:没有了