前端_webpack简介及使用
一、webpack简介
前端资源构建工具:就是把一些浏览器不支持的文件比如less,sass,转换成浏览器支持的css这样的工具。
静态模块打包器: 前端的所有资源文件(js/json/css/img/less/…)都会被webpack作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。
二、webpack五个核心概念
2.1 Entry
指定 webpack 打包的入口
2.2 Output
指定 webpack 打包资源的存放位置
2.3 Loader
让 webpack 能够处理非 JavaScript 文件 (webpack 自身只能处理JavaScript)
2.4 Plugins
可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩, 一直到重新定义环境中的变量等。
2.5 mode
指定 webpack 当前的构建环境类型。设置mode可以自动触发webpack内置的函数,达到优化的效果。
development
会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
development打包后,一些没有依赖的方法 变量 文件会保留,production则会移除。
production
会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。
production打包后,代码会进行压缩,比development的文件小。
三、webpack体验
3.1 初始化项目
手动创建如下目录结构
目录说明:
- dist :用于保存打包后的文件,例如
bundle.js
- src : 用于存放开发源代码文件
- css : 用于存放源代码css文件
- images:用于存放源图片文件
- js: 用于存放源 js 文件
- index.html: 源html文件
- main.js : 入口js文件,所有需要引入的
js
以及css
都在这里编写。
创建完后,启用终端,进入项目根目录,执行命令 npm init -y
执行成功后,会生成一个package.json文件,面包含许多元信息,比如项目名称,项目版本,项目执行入口文件,项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。
3.2 在全局和开发环境安装webpack模块及依赖
在终端输入下面命令全局安装webpack
npm install webpack webpack-cli -g
在终端输入下面命令在开发环境安装webpack
npm install webpack webpack-cli -D
注:在全局安装是为了在终端能运行webpack命令,实际开发中,为了防止全局安装出现的版本冲突,一般都把webpack安装到本地项目中
说明:npm是通过国外镜像获取资源,有时候下载不了资源,使用cnpm工具从国内镜像获取资源。
3.3 打包应用
3.3.1 在index.html编写 li 标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <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> <li>这是第10个li</li> </ul> </body> </html>
3.3.2 在 main.js
中通过import引入一个有li标签样式的js文件
main.js文件代码
/* 这是入口主文件,webpack会根据这个主文件找到项目中其他所有的依赖文件 需要在html中引入该文件 */ // import *** from *** 是ES6中导入模块的方式 // 由于 ES6的代码,太高级了,浏览器解析不了,所以,这一行执行会报错 import "./js/li_style.js"
li_style.js文件代码
// 1. 导入 Jquery import $ from 'jquery' $(function(){ $("li:odd").css("backgroundColor", "pink") $("li:even").css("backgroundColor", "yellow") })
此时如果直接在index.html中引入src目录下的main.js,在浏览器打开index.html文件会报错,因为main.js中 import **
为ES6的语法,太高级了,浏览器解析不了。
此时,就需要用到webpack,对应用进行编译,将高级语法转换为低级语法。
3.3.3 打包文件
# 开发环境。webpack会以 ./src/main.js 为入口文件开始打包,打包后输出到 ./dist/main.js 整体打包环境,是开发环境 webpack --entry ./src/main.js -o ./dist/ --mode=development # 生产环境。webpack会以 ./src/main.js 为入口文件开始打包,打包后输出到 ./dist/main.js 整体打包环境,是生产环境 webpack --entry ./src/main.js -o ./dist/ --mode=production
在index.html文件中引用 ../dist/main.js ,在浏览器打开index.html文件效果如下
3.4 使用webpack配置文件打包应用
每次打包都需要在命令后添加一长串参数,这种操作方式就显得很繁琐,我们可将这些参数放到webpack的配置文件中简化我们的操作。
在根目录创建 webpack.config.js 文件,注意,文件名称不可修改。文件代码如下:
// 由于webpack 是基于Node 进行构建的,所以webpack的配置文件中,任何合法的Node代码都是支持的。但是不支持es6的导包方式 // 获取根目录的绝对路径 const path = require('path') // 这里引入的webpack需要使用 npm install webpack -D 安装模块 const webpack = require("webpack") // 这个配置文件,起始就是一个 JS 文件,通过 Node 中的模块操作,向外暴露了一个 配置对象 module.exports = { mode: "development", entry: './src/main.js',// 入口,表示,要使用 webpack 打包哪个文件 output: { // 输出文件相关的配置 path: path.resolve(__dirname, 'dist'), // 指定 打包好的文件,输出到哪个目录中去 filename: 'bundle.js' // 这是指定 输出的文件的名称 }, }
完成配置后,在终端命令行直接输入 webpack 就能直接进行打包了。
3.5 使用 webpack-dev-server 工具自动完成webpack打包
使用配置文件打包,虽然简化了打包过程,但是如果我们频繁的修改代码(比如:修改颜色),每次修改后都需要手动打包,这又显得很繁琐了,我们可以用 webpack-dev-server 工具自动打包。
使用命令 cnpm install webpack-dev-server -D
安装 webpack-dev-server 工具
在package.json文件中,参考下图,增加一行代码。
注意:webpack5默认只读取public目录下的资源,src目录下的资源就无法读取,所以需要使用 --static src 修改读取目录。static为webpack5变更字段,变更前为contentBase
完成配置后,在终端运行命令:npm run dev
成功运行命令后,访问 http://localhost:8080,就可以访问src目录下的资源了。
打开index.html后,会发现列表没有背景颜色且在报错,这是因为前面的引用地址“../dist/main.js”,在采用域名访问方式时无法被访问,原因是未暴露dist目录。
修改引用地址为: <script src="/bundle.js"></script>
就可以正常渲染li标签了
修改说明:
- 因为在自动打包重新定义打包后文件名称为/bundle.js ,所以引用文件名称不再是 main.js。
- 自动打包后会在内存中生成一份同名文件,使用
/文件名称
可直接访问
3.6 在webpack配置文件中添加webpack-dev-server工具参数
在package.json中添加的工具命令,使用了 --static参数,我们可以将其配置到 webpack.config.js文件中,具体添加位置见下图
devServer 常用配置说明:
devServer: { // webpack-dev-server配置参会 open: true, // 启动后,在浏览器自动打开首页,为false则不自动打开。 hot: true, // 启用热更新,热重载 port: 3000, // 启动服务的端口号 compress: true, // 开启服务gzip压缩 // historyApiFallback: true,// 使用 History 路由模式时,若404错误,则被替代为 index.html static: { // 告诉服务器获取资源的目录 directory: path.join(__dirname, 'src'), // 添加src为资源获取目录,webpack5默认获取资源是public目录 // publicPath: '/test', // 设置内存中的打包文件的虚拟路径映射,设置后所有的uri都需要在之前拼接上 /test }, // contentBase:path.resolve(__dirname,'asset') //webpack5弃用,在static中被修改为 directory // publicPath:'/test', // webpack5弃用,在static中定义 },
使用 npm run dev启动项目后,浏览器会自动打开浏览器访问 http://localhost:3000/
3.7 插件配置
webpack插件有很多,这里以 html-webpack-plugin
插件为例演示如何在webpack中使用插件
html-webpack-plugin插件有两个作用
- 自动在内存中根据指定页面生成一个内存的页面
- 自动把打包好的 bundle.js 追加到页面中去
3.7.1 安装插件工具
使用命令:cnpm install html-webpack-plugin -D
安装插件
3.7.2 在webpack.config.js 添加插件配置
参考上图,在 webpack.config.js 中配置如下代码:
plugins: [ // 配置插件的节点 new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML 页面的插件 template: path.resolve(__dirname, './src/index.html'), // 指定 模板页面,将来会根据指定的页面路径,在内存中保存对应的 页面 filename: 'index.html' // 指定生成的页面的名称 }) ],
重新启动项目,查看index.html源码,可以看到插件自动引用 bundle.js
3.8 加载器
webpack, 默认只能打包处理 JS 类型的文件,无法处理 其它的非 JS 类型的文件。
比如,在 ./src/css 目录下新建 index.css文件,文件代码如下:
// 取消li标签的点 li { list-style: none; }
然后在main.js文件中引用这个css文件
此时,启动项目就会提示如下错误
如果要处理 非JS类型的文件,我们需要手动安装一些 合适 第三方 loader 加载器。比如,
- 处理 .css 文件需要安装
style-loader、css-loader
- 处理 .less 文件需安装
less、less-loader
- 处理 .scss 文件需安装
sass、node-sass、scss-loader
- 处理 图片文件、字体文件需安装
url-loader、file-loader
- 处理 一些ES6高级语法 或 ES7语法
下面以处理css为例演示插件处理过程
3.8.1 安装需处理类型文件的加载器
3.8.2 在webpack.config.js 添加处理器配置
打开 webpack.config.js 这个配置文件,在 里面,新增一个 module 配置节点,它是一个对象,在这个对象身上,有个 rules 属性,
这个 rules 属性是 数组,这个数组中,配置所有第三方文件的匹配和处理规则。
参考上图,在 webpack.config.js 中配置如下代码:
module: { // 这个节点,用于配置 所有 第三方模块 加载器 rules: [ // 所有第三方模块的 匹配规则 {test: /\.css$/, use: ['style-loader', 'css-loader']}, // 配置处理 .css 文件的第三方loader 规则, 需要安装 style-loader、css-loader // { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则,需安装 less、less-loader // { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则,需安装 sass、node-sass、scss-loader // { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader // // limit 给定的值,是图片的大小,单位是 byte, 如果我们引用的 图片,大于或等于给定的 limit值,则不会被转为base64格式的字符串, 如果 图片小于给定的 limit 值,则会被转为 base64的字符串 // { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader // { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法 ] }
重新启动项目,查看界面,可以看到 index.css 中定义的样式已生效。
3.8.3 webpack 处理第三方文件类型的过程
- 发现处理的文件不是JS类型,就会去 配置文件中,查找有没有对应的第三方 loader 规则;
- 如果能找到对应的规则, 就会调用 对应的 loader 处理 这种文件类型;
- 在调用loader 的时候,是从后往前调用的,比如演示中是先调用 css-loader 再调用 style-loader;
- 当最后的一个 loader 调用完毕,会把 处理的结果,直接交给 webpack 进行 打包合并,最终输出到 bundle.js 中去
四、其它
4.1 关闭console中"DevTools 无法加载来源映射:无法加载" 的告警
现象如下:
解决方法
在webpack.config.js文件中添加
devtool: "inline-source-map",
五、webpack 结合 vue 的使用
https://www.cnblogs.com/testlearn/p/16692301.html