# 2、webpack * [2.1当前Web开发面临的困境](https://www.kancloud.cn/zheng1234/vuejs/2393807#21Web_2) * [2.1 webpack概述](https://www.kancloud.cn/zheng1234/vuejs/2393807#21_webpack_11) * [2.2 webpack的基本使用](https://www.kancloud.cn/zheng1234/vuejs/2393807#22_webpack_18) * [2.在项目中安装和配置webpack](https://www.kancloud.cn/zheng1234/vuejs/2393807#2webpack_43) * [3.配置打包的入口与出口](https://www.kancloud.cn/zheng1234/vuejs/2393807#3_61) * [4.配置webpack的自动打包功能](https://www.kancloud.cn/zheng1234/vuejs/2393807#4webpack_81) * [5.配置html-webpack-plugin生成预览页面](https://www.kancloud.cn/zheng1234/vuejs/2393807#5htmlwebpackplugin_95) * [6.配置自动打包相关的参数 (打包完自动打开浏览器)](https://www.kancloud.cn/zheng1234/vuejs/2393807#6____114) 2. webpack # 2.1当前Web开发面临的困境 ~~~ ● 文件依赖关 系错综复杂 ● 静态资源请求效率低 ● 模块化支持不友好 ● 浏览器对高级 Javascript特性兼容程度较低 ● etc... ~~~ # 2.1 webpack概述 **webpack**是一个流行的**前端项目构建工具(打包工具)**，可以解决当前web开发中所面临的困境。 webpack提供了**友好的模块化支持**，以及**代码压缩混淆**、**处理js兼容问题**、**性能优化**等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。 目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。  # 2.2 webpack的基本使用 1.创建列表隔行变色项目 ① 新建项目空白目录， 并运行**npm init -y**命令，初始化包管理配置文件package.j son ② 新建**src**源代码目录 ③ 新建src -> index.html 首页 ④ 初始化首页基本的结构 ⑤ 运行npm install jquery -S命令，安装jQuery ⑥ 通过模块化的形式，实现列表隔行变色效果  ~~~ <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> </ul> ~~~ ## 2.在项目中安装和配置webpack ① 运行**npm install webpack webpack-cli -D**命令，安装webpack相关的包 ② 在项目根目录中，创建名为**webpack. config.js**的webpack 配置文件 ③ 在webpack的配置文件中，初始化如下基本配置: ~~~ module.exports = { mode :'development'// mode用来指定构建模式 开发可选 'development' 上线可选：production } ~~~ ④ 在package.json 配置文件中的scripts 节点下，新增dev脚本如下: ~~~ "scripts": { "dev": "webpack" // script 节点下的脚本，可以通过npm run执行 } ~~~ ⑤ 在终端中运行**npm run dev**命令，启动webpack 进行项目打包 ## 3.配置打包的入口与出口 webpack的4.x版本中默认约定: ● 打包的**入口文件**为src -> index.js ● 打包的**输出文件**为dist -> main.js 如果要修改打包的入口与出口，可以在**webpack.config.js**中新增如下配置信息: ~~~ const path = require('path') //导入node.js 中专门门操作路径的模块 module.exports = { entry: path.join(_ dirname, ' ./src/index.js'), //打包入口文件的路径 output : { path: path.join(_ dirname, ' ./dist'), //输出文件的存放路径 filename: 'bundle.js' //输出文件的名称 } } ~~~  ## 4.配置webpack的自动打包功能 ① 运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具 ② 修改 package.json -> scripts中的dev命令如下: "scripts":{ "dev": "webpack-dev-server" // script 节点下的脚本，可以通过npm run执行 } ③ 将src -> index.html 中，script脚本的引用路径，修改为"/buldle.js" . ④ 运行npm run dev命令，重新进行打包 ⑤ 在浏览器中访问[http://localhost:8080](http://localhost:8080/)地址，查看自动打包效果 **注意: webpack-dev-server会启动一 个实时打包的http服务器 webpack-dev-server打包生成的输出文件,默认放到了项目根目录中，而且是虚拟的、看不见的** ## 5.配置html-webpack-plugin生成预览页面 ① 运行**npm install html-webpack-plugin -D**命令，安装生成预览页面的插件 ②修改**webpack.config.js**文件头部区域，添加如下配置信息: ~~~ //导入生成预览页面的插件，得到一个构造函数 const HtmlWebpackPlugin = require ( 'html -webpack- plugin' ) const htmlPlugin = new HtmlWebpackPlugin({ //创建插件的实例对象 template: ' ./src/index.html', //指定要用到的模板文件 filename: ' index.html' //指定生成的文件的名称，该文件存在于内存中，在目录中不显示 }) ~~~ ③修改 webpack. config. js文件中向外暴露的配置对象，新增如下配置节点: ~~~ module.exports = = { plugins: [ htmlPlugin ] // plugins 数组是webpack 打包期间会用到的一些插件列表 } ~~~  ## 6.配置自动打包相关的参数 (打包完自动打开浏览器) ~~~ // package. j son中的配置 // --open打包完成后自动打开浏览器页面 // --host配置IP地址 // --port配置端口 "scripts": "dev": "webpack-dev server --open --host 127.0.0.1 --port 8888" }, ~~~