Webpack的基础使用

一、当前Web开发面临的一些困境：
1、文件依赖关系复杂
2、静态资源请求效率低
3、模块化支持不友好
4、浏览器对高级JavaScript特性兼容程度较低
二、webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发所面临的困境。
webpack提供了友好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等强大的功能，从而让开发人员把工作的重心放到具体的功能实现上，提高了开发效率和项目可维护性。
三、webpack的基本使用
项目建好之后，执行npm init -y进行初始化，这样会生成package.json包配置文件。
1、在项目中安装和配置webpack
（1）运行npm install webpack webpack-cli -D，安装webpack相关的包。
（2）在项目根目录中，创建名为“webpack.config.js”的webpack配置文件。
（3）在webpack的配置文件中，初始化如下基本配置：

module.exports = {
   
    //mode用来指定编译模式
    mode: 'development', //development/production
}

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

"scripts": {
   
    "dev": "webpack"
  }

（5）在终端运行npm run dev命令，启动webpack进行项目打包。
2、配置打包的入口和出口
（1）webpack的4.x版本中默认约定：
打包的入口文件为src目录下的index.js文件；
打包的出口文件为dsit目录下的main.js文件。
（2）如果想要修改默认打包的入口和出口，可以在webpack.confgi.js文件中新增如下配置信息：