前端工程化--webpack配置和脚手架的简单应用

前端工程化

也可以叫做前端模块化。首先先了解对比一下传统开发的主要问题：

• 命名冲突问题：多个js文件之间如果有重名的变量，则会发生覆盖问题
• 文件依赖问题：js文件之间无法实现相互的引用

为了解决传统开发的问题，所有出现了模块化的方案：

• 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
• 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

webpack

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

webpack的基本使用

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

1. 新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json

2. 新建src源代码目录

3. 新建scr中index.html首页

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

5. 运行npm install jquery -s命令，安装jQuery

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

   //这是ES6模块化的语法
   import $ from 'jquery'
   
   $(function () {
        
       $('li:odd').css('backgroundColor', 'pink')
       $('li:even').css('backgroundColor', 'red')
   })
   

   这样的方式是ES6模块的语法，浏览器支持的不是很好，所以需要用webpack处理一下

2、在项目中安装和配置webpack

1. 运行npm install webpack webpack-cli -D命令，安装webpack相关的包

2. 在项目根目录中，创建webpack.config.js的webpack配置文件

3. 在webpack的配置文件中，初始化如下基本配置

   module.exports={
        
   	mode:'development'//mode用来指定构建模式
       //development开发期间
       //production上线之后
   }
   

4. 在package.json配置文件中的script节点下，新增dev脚本如下：

   "script":{
        
   	"dev":"webpack"//script 节点下的脚本，可以通过npm run执行	
   }
   

5. 在终端中运行 npm run dev命令，启动webpack进行项目打包

成功后自动创建了dist文件夹，里面自动创建了main.js

6. 在index.html文件中，修改<script src="../dist/main.js"></script>

3、webpack配置打包的入口与出口

webpack的4.x版本中默认约定：

• 打包的入口文件为src–>index.js
• 打包的输出文件为dist–>main.js

如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息：