前言

成为一个全栈工程师，前端是必不可少的，这位前端构建工具webpack是一门必修的技术。

在学习webpack之前，先熟悉一下npm工具：https://www.runoob.com/nodejs/nodejs-npm.html

什么是webpack？

webpack可以打包所有的样式，脚本，表，资源，生成一个或多个bundle，webpack 能够处理 JS 文件的互相依赖关系，能够处理JS的兼容问题，把高级的、浏览器不是别的语法，转为低级的浏览器能正常识别的语法。

官方文档：https://www.webpackjs.com/concepts/

Hello Word

1 初始化项目 npm init ，创建src,dist目录，在src下建立main.js,index.html

2 安装依赖包jquery ： npm install jquery

3 安装webpack ： npm install --save-dev webpack

4 编写项目

main.js是项目的JS入口文件

// 这是 main.js 是我们项目的JS入口文件

// 1. 导入 Jquery
// import *** from *** 是ES6中导入模块的方式
// 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错
import $ from jquery
// const $ = require('jquery')

$(function () {
  $('li:odd').css('backgroundColor', 'yellow')
  $('li:even').css('backgroundColor', function () {
    return '#' + 'D97634'
  })
})

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>
    <!-- 因为 main 中的代码，涉及到了ES6的新语法，但是浏览器不识别 -->
    <!-- <script src="./main.js"></script> -->
    <!-- 通过 webpack 这么一个前端构建工具， 把 main.js 做了一下处理，生成了一个 bundle.js 的文件 -->
     <script src="../dist/bundle.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>
        <li>这是第10个li</li>
    </ul>
</body>

</html>

5 webpack编译打包main.js

webpack src/main.js --output dist/bundle.js

Webpack开发指南

前言

Hello Word

持续更新中...

猜你喜欢