第一章、Webpack入门
-
Webpack安装的两种方式
-
运行
npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令npm i webpack -g -
在 项目根目录运行
npm i webpack --save-dev安装得到项目依赖中npm i webpack --save-dev -
简单的案例（隔行换色）
-
创建将一个空项目和创建将对应的文件
web01.png┌─dist 发布好的文件
│─node_modules npm导入的文件
└─src 编程源码
└─css 外部样式
└─img 外部图片
└─js 外部JS
└─index.html 主页
└─main.js JS入口文件 -
引入npm
npm init -y -
导入jquery
npm i jquery -s -
在首页编写对应的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> <script src="main.js"></script> </html> -
编写main.js
//这是 main.js是我们项目的JS入口文件 /* * 1.导入jquery * 和导入const $= require('jquery')一样 * import $ from 'jquery'是ES6导入模块的方式 * */ import $ from 'jquery' $(function () { $('li:odd').css('backgroundColor', 'lightblue') $('li:even').css('backgroundColor', function () { return '#' + 'D97634' }) }) -
运行页面
web02.png问题原因：
网页ES6代码太高级了浏览器识别不了所以报错
也就也就是我我们在JS里面定义的import哪里
-
解决报错
-
安装Webpack和webpack-cli，在控制台执行下面两条语句就行了这里用的是webpack5（我用的是项目配置没有用全局的）
npm install --save-dev webpack npm install --save-dev webpack-cli注意：
没有结果建议重启编译器，再没有结果就是前面步骤有问题
-
然后查询是否安装成功
webpack -v显示结果：
web03.png -
在根目录创建webpack.config.js这文件
//文件内容 const path = require('path') module.exports = { // 入口文件(从根目录开始到文件名) entry: './src/main.js', // 输出文件 output: { //这里文件会输出到dist目录下，dist目录可建可不建，再是filename是你要编译的名字 filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } } -
再把编译后的JS导入主页上（dist文件里的编译的JS）
显示结果：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../dist/bundle.js"></script> </head> <body> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>web04.png
-
-
-
