前端项目-webpack-安装和基本配置

最新推荐文章于 2023-07-03 14:58:46 发布

gaog2zh

最新推荐文章于 2023-07-03 14:58:46 发布

阅读量338

点赞数

文章标签： webpack 前端

本文链接：https://blog.csdn.net/gaogzhen/article/details/107702829

版权

前端项目-webpack-安装和基本配置-

文章目录

0、前言
1、概述
2、webpack的基本使用
- 2.1、创建列表隔行变色项目
3、项目中安装和配置webpack
4、重新导入js
- ***后记*** ：

内容

0、前言

当前web开发面临的困境

文件关系依赖错综复杂
静态资源请取消率低
模块化支持不友好
浏览器对高级javascript特性兼容程度低
etc…

1、概述

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JvEgc6Qb-1596120599887)(./images/2020-07-30_webpack.png)]

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进行项目打包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5aDyPlyk-1596120599893)(./images/2020-07-30_webpack-package-process.png)]

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

gaog2zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端项目-webpack-安装和基本配置

前端项目-webpack-安装和基本配置-目录文章目录0、前言1、概述2、webpack的基本使用2.1、创建列表隔行变色项目3、项目中安装和配置webpack4、重新导入js***后记*** ：内容0、前言当前web开发面临的困境文件关系依赖错综复杂静态资源请取消率低模块化支持不友好浏览器对高级javascript特性兼容程度低etc…1、概述webpack是一个流行的前端项目构建工具（打包工具），可以解决web开发中所面临的困境。webpack提供了友好的模块化支
复制链接

扫一扫