這篇文章主要講解了“Webpack4入口、輸入和ES6模塊分析”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Webpack4入口、輸入和ES6模塊分析”吧！

創(chuàng)新互聯(lián)公司是專業(yè)的都昌網(wǎng)站建設(shè)公司，都昌接單;提供做網(wǎng)站、成都做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行都昌網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

Webpack 4教程開始 - 且慢，什么是Webpack？

在考慮使用任何工具之前，你需要問自己一個非常重要的問題：這個工具解決了你的什么問題。Webpack是一個模塊打包器。這意味著，它的目的是（根據(jù)它們之間的依賴）合并一組模塊。它的輸出可能是一個或多個文件。除了打包模塊，Webpack可以對你的文件做各種事情：例如，把SCSS轉(zhuǎn)換為CSS，或者把Type轉(zhuǎn)換為Java。它甚至可以壓縮你所有的圖像文件！但是，你究竟是為什么想要打包它們呢？

打包的目的

在很久之前，除了使用<>標(biāo)簽，我們沒有其他方法把瀏覽器使用的Java拆分到多個文件。我們需要把用到的每一個Java源文件鏈接放到HTML代碼里。這樣并不方便。社區(qū)找到了一些變通方案：CommonJS（在Node.js中實現(xiàn)了）和AMD。這里有篇文章是關(guān)于它們的介紹。而最終，ES6推出了一套全新的 import/export 語法。

ES6 modules

ES6中定義了模塊的語法。多虧了它，我們終于有了標(biāo)準(zhǔn)的模塊形式，它成為了Java語言規(guī)范的一部分。這并不意味著瀏覽器對此有很好的支持，不過這些正在改進(jìn)。即使有了ES6模塊的原生支持，你可能還是會想把你的多個模塊打包成數(shù)量更少的文件。這個教程的目的是提供你開始使用Webpack時所需的所有知識，讓我們簡單地看看ES6模塊的語法。

export

export語法被用來創(chuàng)建Java模塊。你可以用它來導(dǎo)出對象（包括函數(shù)）和原始值（primitive values）。值得注意的是，導(dǎo)出的模塊使用了嚴(yán)格模式。導(dǎo)出有兩種類型：named和default。

Named導(dǎo)出

在一個模塊中，你可以有多個named導(dǎo)出。

// 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 };

注意到，如果要在聲明之后導(dǎo)出，你需要把它用花括號包起來，就像上面的例子中divide函數(shù)一樣。

Default導(dǎo)出

一個模塊，只能有一個default導(dǎo)出。

// dog.js
export default class Dog {
bark()
{ console.log('bark!');
}
}
imp

ort

import語句用來導(dǎo)入其他模塊。

整個導(dǎo)入

// 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));

你可以為導(dǎo)出的模塊設(shè)置任意的名字。如果你整個導(dǎo)入一個含有default導(dǎo)出的模塊，那么default導(dǎo)出的東西將會放在導(dǎo)入對象的一個default屬性上。

// index.js
import * as Dog from './dog.js';
const dog = new Dog.default();
dog.bark();

導(dǎo)入一個或多個named導(dǎo)出

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

需要注意，相應(yīng)的導(dǎo)入導(dǎo)出名字必須匹配。

導(dǎo)入一個default導(dǎo)出

// index.js
import Dog from './dog.js';
const dog = new Dog();
dog.bark(); // 'bark!'

注意，defualt導(dǎo)出在導(dǎo)入時，可以用任意的名字。所以我們可以這樣做：

import Cat from './dog.js';
const dog = new Cat();
dog.bark(); // 'bark!'

ES6模塊也支持動態(tài)導(dǎo)入，我們會在將來的部分討論到。

可查看MDN關(guān)于導(dǎo)出和導(dǎo)入的文檔。

Webpack的基本概念

從版本4開始，Webpack不需要任何配置也可使用。它有一組默認(rèn)值。如果你想要創(chuàng)建一個配置文件，你可將它命名為webpack.config.js。我們現(xiàn)在來效仿它的默認(rèn)配置，對Webpack相關(guān)的基本概念做一些解釋。

webpack.config.js

注意，我們使用Node.js環(huán)境編寫Webpack的配置文件，所以它使用了CommonJS類型的模塊。

webpack.config.js導(dǎo)出一個單獨的對象。如果你通過命令運行Webpack，它將會去尋找并使用這個文件。

Entry

Webpack需要一個入口起點（entry point）。它指明了Webpack從哪一個模塊開始打包。它的默認(rèn)值如下：

module.exports = {
entry: './src/index.js'
};

它意味著Webpack會找到'./src/index.js'這個文件，從它開始打包。你在index.js中使用的任何導(dǎo)入，Webpack都會處理它們。

你可以有超過一個的入口起點，但對于單頁應(yīng)用（single page applications），它通常只有一個入口。

Output

output是用來配置Webpack把你的包輸出到哪兒的。它默認(rèn)輸出到'./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

在之前的小節(jié)，我們創(chuàng)建了index.js，它導(dǎo)入了lib.js里的函數(shù)。最后讓我們運行Webpack吧！記得把這些文件放到src文件夾下，這樣才和默認(rèn)的設(shè)置匹配。

首先要做的是安裝Webpack。我會使用npm來做它。打開你的終端然后輸入:

npm init -y
nppm install webpack webpack-cli

譯者注：截止到翻譯時webpack版本是4.17.1。原文沒有加后面的webpack-cli。但是在初次運行webpack時，仍然會提示需要安裝webpack-cli或者webpack-command。所有這里選擇webpack-cli提前進(jìn)行安裝。和之前再安裝效果是一樣的。

這樣會創(chuàng)建node_modules文件夾，里面包含Webpack。還有兩個文件package.json和package-lock.json。

如你想要知道關(guān)于package-lock.json和npm中依賴的更多東西，可查看Keeping you dependencies in order when using npm。

現(xiàn)在打開package.json文件然后修改它：

"s": {
"build": "webpack"
}

由于有了上面的修改，運行npm run build將會使用node_modules文件夾下的Webpack。

你可以看到，一個main.js文件在dist文件夾下被創(chuàng)建出來。它包含了來自index.js和lib.js的所有代碼。

多個入口起點

不需要任何配置，就可以實現(xiàn)上面介紹的功能。如果你想做得更多，現(xiàn)在就是時候創(chuàng)建配置文件了。

entries

配置文件里的入口屬性，不一定必須是字符串。如果你想要有多個入口，你可以使用一個對象：

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

利用上面代碼，我們創(chuàng)建了兩個入口起點。如果你是在開發(fā)多頁應(yīng)用（multi-page application），可以需要它。

outputs

這有一個問題：默認(rèn)情況下，只指定了一個輸出。我們可以輕易地修改它：

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

在上面的代碼中，我們表明了可以有多余一個的輸出文件?，F(xiàn)在，所有的輸出文件將有各自獨特的名字，這個例子中，是first.bundle.js和second.bundle.js，就像我們的入口起點。

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

感謝各位的閱讀，以上就是“Webpack4入口、輸入和ES6模塊分析”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Webpack4入口、輸入和ES6模塊分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！