Webpack的基本使用

1. 当前 Web 开发所面临的困境

  • 文件依赖关系错综复杂
  • 静态资源请求效率低
  • 模块化支持不友好
  • 浏览器对高级 Javascript 特性兼容性低
  • 等等....

面临这么多困境,怎么去解决呢?当然是 webpack 啦~

1. webpack 是什么?

webpack 是一个流行的 前端项目构建工具(打包工具),可以解决当前 Web 开发中所面临的困境。
webpack 提供友好的模块化支持,以及代码压缩混淆、处理 JS 兼容问题、性能优化等强大的功能,从而让程序员把工具的重心放到具体的功能实现上,提高了开发效率和项目的可维护性。

webpack

2. webpack 的基本使用

2.1 创建列表隔行变色项目

  1. 新建项目空白目录,并在根目录终端运行如下命令,初始化包管理配置文件 package.json
npm init -y 
  1. 新建 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>
  1. 在终端执行如下命令,安装 jQuery
npm install jquery -s
  1. 继续在 src 下面创建 index.js,并写入代码 如下
// 用 import 导入 jquery
import $ from 'jquery'
$(function(){
    $('li:odd').css('background','blue')
    $('li:even').css('background','lightblue')
})

此时运行 html 文件,会发现浏览器报错,为什么会报错呢?
因为 import 语法属于 ES6 的模块化语法,浏览器对这种语法支持并不友好,浏览器不识别,因此就会报错。
既然报错那又如何解决呢?请看下一篇文章 安装和配置

posted @ 2019-11-22 16:36  木子蔻  阅读(346)  评论(0编辑  收藏  举报