前端项目-webpack-安装和基本配置-
目录
内容
0、前言
当前web开发面临的困境
- 文件关系依赖错综复杂
- 静态资源请取消率低
- 模块化支持不友好
- 浏览器对高级javascript特性兼容程度低
- etc…
1、概述
webpack是一个流行的前端项目构建工具(打包工具),可以解决web开发中所面临的困境。
webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了 开发效率和项目的可维护性。
2、webpack的基本使用
2.1、创建列表隔行变色项目
-
新建空白目录,进入并执行
npm init -y
-
新建src(源代码)子目录
-
新建src/index.html首页
-
初始化首页基本的结构
-
运行
npm install jquery -S
-
通过模块化的形式,实现列表隔行变色效果
- 创建src/index.js文件
-
目录结构图示:
-
index.html源代码2.1-1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隔行变色</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> <li>我是第10个li</li> </ul> </body> </html>
-
index.js
import $ from 'jquery' $(function () { $('li:odd').css('backgroundColor', 'pink') $('li:even').css('backgroundColor', 'lightblue') })
-
效果图示:2.1-2:
为什么没有效果呢?下面我们通过webpack来实现
3、项目中安装和配置webpack
-
安装webpack相关依赖
npm install webpack webpack-cli -D
-
在根目录下创建webpack.config.js的webpack配置文件
-
在webpack配置文件下,初始化如下配置
module.exports = { mode: 'development' // 模式,development-开发模式;production-生产模式 }
-
在package.json配置文件中的scripts节点下,新增dev脚本如下:
"scripts": { "dev": "webpack" // scripts节点下的脚本,可以通过npm run 运行 }
-
在终端(命令行)运行 npm run dev 命令,启动webpack进行项目打包
- 打包之后的目录结构图示3-1:
4、重新导入js
js更换给打包之后的’…/dist/main.js’
-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隔行变色</title> <script src="../dist/main.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>
-
页面效果4-1:
后记 :
vue官网地址:https://cn.vuejs.org/
本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785
前端项目源代码地址:https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA