入门介绍
- 自动化构建工具:
- gulp
- webpack
- web开发存在的困境
- 文件依赖关系错综复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对高级JavaScript特性兼容程度低
- 什么是webpack?
- 概述
- webpack是一个流行的前端项目构建工具(打包工具),提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能。
- 目前绝大多数企业中的前端项目,都是基于webpack进行打包构建的
- 构建图分析
- 立方体代表webpack的logo
- 箭头代表打包的过程
- 左侧表示没有经过webpack打包前构建之前的项目状态
- 右侧代表经过打包构建之后的项目状态
- 概述
基本使用
- 列表隔行变色项目
- 新建项目空白目录,并运行
npm init -y
,初始化包管理配置化文件package.json
- 新建
src
源代码目录 - 在
src
--> index.html 首页 - 初始化首页基本的结构
- 运行
npm install jquery -s
命令,安装jQuery - 通过模块化的形式,实现列表隔行变色
- 新建项目空白目录,并运行
- 在项目中安装和配置webpack
- 运行
npm install webpack webpack-cli -D
,安装webpack相关的包 - 在项目根目录中,创建名为webpack.config.js 的webpack配置文件
- 在webpack的配置文件中,初始化如下基本配置:
module.exports = { mode:'development' //production 为上线模式 指定构建模式 此为开发模式 }
- 在pack.json 配置文件中的script节点下,新增dev脚本
"script": { "dev":"webpack" //script 节点下的脚本,可以通过`npm run`执行 }
- 在终端中运行
npm run dev
命令,启动webpack进行项目打包 - webpack配置文件中两种模式的不同点在于production对index.js进行了压缩
- 运行
- 配置打包的入口与出口
- webpack的
4.x
版本中默认约定:- 入口文件:src --> index.js
- 出口文件:dist --> main.js
- 如果要修改打包的入口与出口,可以在
weback.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' // 输出文件的名称 } }
- webpack的
- 配置自动打包功能
- 每次修改完代码,都需要看到最新的效果,每次都需要执行打包命令
npm run dev
- 实现:
- 运行
npm i webpack-dev-server -D
安装支持自动化打包的工具 - 修改
package.json
-->script
中的dev
命令如下:"script": { "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
打包生成的输出文件,默认放到项目根目录中,而且是虚拟的、看不见的
- 每次修改完代码,都需要看到最新的效果,每次都需要执行打包命令
- 配置html-webpack-plugin生成预览页面
- 运行
npm install html-webpack-plugin -D
命令,安装生成预览页面的插件 - 修改
webpack.config.js
文件头部区域,添加如下配置信息:// 导入生成预览页面的插件,得到一个构造函数 const HtmlWebpackPlugin = require('html-webpack-pluguin') const htmlplugin = new HtmlWebpackPlugin({ template: './src/index.html', // 指定要用到的模板文件 filename: 'index.html' //指定生成的文件的名称,该文件存在于内存中在目录中不显示 })
- 修改
webpack.config.js
文件中向外暴露的配置对象,新增如下配置节点:module.exports = { plugins: [ htmlPlugin ] // plugins数组是webpack打包期间会用到的一些插件列表 }
- 运行
- 配置自动打包的相关参数
- 配置
package.json
"scripts": { "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080" }
- 配置