Webpack的基本使用

時間 2019-11-24

標籤 webpack 基本使用简体版

原文原文鏈接

1. 當前 Web 開發所面臨的困境

文件依賴關係錯綜複雜
靜態資源請求效率低
模塊化支持不友好
瀏覽器對高級 Javascript 特性兼容性低
等等....

面臨這麼多困境，怎麼去解決呢？固然是 webpack 啦～css

1. webpack 是什麼？

webpack 是一個流行的前端項目構建工具（打包工具），能夠解決當前 Web 開發中所面臨的困境。
webpack 提供友好的模塊化支持，以及代碼壓縮混淆、處理 JS 兼容問題、性能優化等強大的功能，從而讓程序員把工具的重心放到具體的功能實現上，提升了開發效率和項目的可維護性。html

2. webpack 的基本使用

2.1 建立列表隔行變色項目

新建項目空白目錄，並在根目錄終端運行以下命令，初始化包管理配置文件 package.json

npm init -y

新建 src 源代碼目錄，而且在 src 下面新建 index.html 首頁，而後初始化首頁基本的結構，代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 傳統模式是以下引入，可是咱們要用模塊化思惟 -->
    <!-- <script src="./index.js"></script> -->
</head>
<body>
    <ul>
        <li>這是第 1 個li</li>
        <li>這是第 2 個li</li>
        <li>這是第 3 個li</li>
        <li>這是第 4 個li</li>
        <li>這是第 5 個li</li>
        <li>這是第 6 個li</li>
        <li>這是第 7 個li</li>
        <li>這是第 8 個li</li>
        <li>這是第 9 個li</li>
    </ul>
</body>
</html>

在終端執行以下命令，安裝 jQuery

npm install jquery -s

繼續在 src 下面建立 index.js,並寫入代碼以下

// 用 import 導入 jquery
import $ from 'jquery'
$(function(){
    $('li:odd').css('background','blue')
    $('li:even').css('background','lightblue')
})

此時運行 html 文件，會發現瀏覽器報錯，爲何會報錯呢？
由於 import 語法屬於 ES6 的模塊化語法，瀏覽器對這種語法支持並不友好，瀏覽器不識別，所以就會報錯。
既然報錯那又如何解決呢？請看下一篇文章安裝和配置前端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。