webpack

当前Web开发面临的困境

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

webpack概述

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

webpack的基本使用

1.创建列表隔行变色项目
①新建项目空白目录， 并运行npm init -y命令,初始化包管理配置文件package.json
②新建 src 源代码目录
③新建 src -> index.html 首页
④初始化首页基本的结构
⑤运行npm install jquery -S命令,安装jQuery
⑥通过模块化的形式， 实现列表隔行变色效果

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'), //打包入口文件的路径，__dirname代表当前文件所处的目录
    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 脚本的引用路径,修改为"/bundle.js"
④运行npm run dev命令，重新进行打包
⑤在浏览器中访问 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中的配置
11 --open打包完成后自动打开浏览器页面
// --host配置IP地址
// --port配置端口
"scripts": {
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888" 
},