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

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

目录




内容

0、前言

当前web开发面临的困境

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

1、概述

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

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

2、webpack的基本使用

2.1、创建列表隔行变色项目

  1. 新建空白目录,进入并执行

     npm init -y
    
  2. 新建src(源代码)子目录

  3. 新建src/index.html首页

  4. 初始化首页基本的结构

  5. 运行

     npm install jquery -S
    
  6. 通过模块化的形式,实现列表隔行变色效果

    • 创建src/index.js文件
  • 目录结构图示:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qScOJlrK-1596120599891)(./images/2020-07-30_interlaced-discoloration_1.png)]

  • 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:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MBqwDFOr-1596120599892)(./images/2020-07-30_interlaced-dicoloration-graph.png)]

为什么没有效果呢?下面我们通过webpack来实现

3、项目中安装和配置webpack

  1. 安装webpack相关依赖

     npm install webpack webpack-cli -D
    
  2. 在根目录下创建webpack.config.js的webpack配置文件

  3. 在webpack配置文件下,初始化如下配置

     module.exports = {
     	mode: 'development'  // 模式,development-开发模式;production-生产模式
     }
    
  4. 在package.json配置文件中的scripts节点下,新增dev脚本如下:

     "scripts": {
     	"dev": "webpack" // scripts节点下的脚本,可以通过npm run 运行
     }
    
  5. 在终端(命令行)运行 npm run dev 命令,启动webpack进行项目打包

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

  • 打包之后的目录结构图示3-1:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VIxUvWsc-1596120599895)(./images/2020-07-30_package-after.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:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GIroklbl-1596120599896)(./images/2020-07-30_package-after-html.png)]

后记

vue官网地址:https://cn.vuejs.org/

本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785

前端项目源代码地址:https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值