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

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

---

目录

---

---

内容

---

0、前言

当前web开发面临的困境

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

1、概述

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

2、webpack的基本使用

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

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

    npm init -y
   

2. 新建src（源代码）子目录

3. 新建src/index.html首页

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

5. 运行

    npm install jquery -S
   

6. 通过模块化的形式，实现列表隔行变色效果

   • 创建src/index.js文件

• 目录结构图示：

• index.html源代码2.1-1

    
    
    
    	
    	
    	
    	
    
    
    	
  
    		
  我是第1个li
    		
  我是第2个li
    		
  我是第3个li
    		
  我是第4个li
    		
  我是第5个li
    		
  我是第6个li
    		
  我是第7个li
    		
  我是第8个li
    		
  我是第9个li
    		
  我是第10个li
    	
    
    
  

• index.js

    import $ from 'jquery'
  
    $(function () {
    	$('li:odd').css('backgroundColor', 'pink')
    	$('li:even').css('backgroundColor', 'lightblue')
    })
  

• 效果图示：2.1-2：

为什么没有效果呢？下面我们通过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进行项目打包

• 打包之后的目录结构图示3-1：

4、重新导入js

js更换给打包之后的’…/dist/main.js’

• index.html

    
    
    
    	
    	
    	
    	
    
    
    	
  
    		
  我是第1个li
    		
  我是第2个li
    		
  我是第3个li
    		
  我是第4个li
    		
  我是第5个li
    		
  我是第6个li
    		
  我是第7个li
    		
  我是第8个li
    		
  我是第9个li
    		
  我是第10个li
    	
    
    
  

• 页面效果4-1：

后记 ：

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

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

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA