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 的模块化语法，浏览器对这种语法支持并不友好，浏览器不识别，所以就会报错。
既然报错那又如何解决呢？请看下一篇文章安装和配置前端