前言
成为一个全栈工程师,前端是必不可少的,这位前端构建工具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