webpack初體驗之模塊化開發

時間 2019-12-01

標籤 webpack 體驗模塊化開發简体版

原文原文鏈接

寫在前面的話

上次寫過一篇關於webpack入門的博客，當時只是說藉助node來完成開發，並用webpack打包以讓瀏覽器識別。其實其主要思想就是實現前端模塊化開發。html

衆所周知，歷史上，JavaScript 一直沒有模塊（module）體系，沒法將一個大程序拆分紅互相依賴的小文件，再用簡單的方法拼裝起來。這在開發大型的、複雜的項目時就變得很困難。這就須要一種模塊加載機制，在ES6以前，就有一些模塊加載方案，好比CommonJS和AMD，上篇文章就是用到CommonJS規範。但如今，ES6已經填補了Module這塊空白。下面就簡單說下利用webpack實現前端模塊化開發。前端

實例

介紹

本文主要介紹webpack的入門，由於我本身也是剛上手webpack，還在學習階段，因此會講得很基礎。對於沒用過webpack的童鞋，看完能懂就是個人目的。你也能夠參考個人上篇博客webpack入門。另外關於ES6模塊化,我以爲你應該要提早會懂，我就不講了，這裏有更好的文檔 ES6 Modulenode

使用webpack以前的準備

新建一個文件夾，好比叫 webpack-demo，這個就是你的項目目錄，而後在這個文件夾裏再新建一個 src文件夾，名字可任意，在 src 文件夾裏，如圖新建幾個文件：webpack

每一個文件其實都是一個模塊，es6

a.js中：web

export default function(){
    console.log('Module A');
}

b.js中：npm

export default function(){
    console.log('Module B');
}

index.js中：json

import A from './a.js'
import B from './b.js'

A();
B();

index.html中：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack模塊化開發</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>

很顯然，這就是一個模塊化開發過程，html文件引入index.js，而index.js又依賴於a.js和b.js。咱們想要的結果是在瀏覽器中打開html文件時，控制檯中打印出：模塊化

Module A
Module B

然而事實上，當咱們打開控制檯時，顯示：

這是由於目前咱們前端開發，瀏覽器還不支持模塊化，想要實現模塊化功能，需藉助webpack。

安裝webpack

在此以前，你須要安裝好node，並對npm有些瞭解，node安裝完就自帶了npm。

終端進入 webpack-demo 文件夾裏，執行：

npm init

輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，一路回車默認便可。

你也能夠執行：

npm init -y

以免被問一些問題。

這個命令執行後，會自動生成一個package.json文件，這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。

接下來，就在本項目裏安裝webpack依賴，一樣是在 webpack-demo 文件夾裏，執行：

npm install webpack --save-dev

可能會等一下子，執行完畢後會生成一個node_modules文件夾，可能還有一個package-lock.json文件，你先沒必要在乎它們幹嗎的。

安裝完webpack後，還須要新建一個webpack配置文件，默認文件名是webpack.config.js。

完成以上全部步驟後，文件夾的內容以下：

配置webpack.config.js文件

接下來，咱們來配置一下 webpack.config.js 這個文件：

var path = require('path');

module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'main.js'
    }
}

entry是入口文件地址，本項目中，需引用的是index.js文件，因此它就是入口文件；

output定義出口，path是打包後的文件存儲路徑，它必須是一個絕對路徑，能夠藉助node中的path模塊，來拼接一個絕對路徑。dist是一個文件夾，用來存儲打包文件，沒有則自動建立。filename則定義打包後的文件名，此文件就是存儲在dist中的。