webpack使用案例
- 案例一：webpack打包自定义工具
- 一、优点
- 二、使用步骤
- 1、在编写的项目代码（非中文）文件夹里面输入cmd命令 npm init -y，会在根目录生成一个package.json文件，如下图
- 2、npm install webpack webpack-cli，会在根目录生成一个文件夹node_modules
- 3、手动新建文件webpack.config.js,写入以下内容：
- 4、新建指定的入文件（entry: './src/index.js',）index.js,写入需要导出的方法有哪些，模块化导出的内容、语法可参考以下代码：
- 5、在package.json文件中加入脚本，内容如下：
- 6、输入打包cmd命令：npm run build:watch 。打包成功后看到如下文件
- 7、测试使用。新建html文件，引入打包后的js文件，如下图：
- 三、上传npm仓库
- 案例二：初始化列表隔行变色
- webpack总结
案例一：webpack打包自定义工具
一、优点
1、文件小，打包后仅一个js文件
2、引入js后可全局使用，不必单独import每个方法
3、上传仓库可供他人npm下载使用
补充：封装自定义工具代码包：代码包
二、使用步骤
1、在编写的项目代码（非中文）文件夹里面输入cmd命令 npm init -y，会在根目录生成一个package.json文件，如下图
2、npm install webpack webpack-cli，会在根目录生成一个文件夹node_modules
3、手动新建文件webpack.config.js,写入以下内容：
//引入 nodeJS 内置模块 path
const path = require('path');
module.exports = {
// 模式
mode: 'development', // 也可以使用 production
// 入口
entry: './src/index.js',
// 出口
output: {
// 打包文件夹
path: path.resolve(__dirname, 'dist'),
// 打包文件
filename: 'furenqiang-utils.js',
// 向外暴露的对象的名称
library: 'utils',
// 打包生成库可以通过esm/commonjs/reqirejs的语法引入
libraryTarget: 'umd',
},
}
4、新建指定的入文件（entry: ‘./src/index.js’,）index.js,写入需要导出的方法有哪些，模块化导出的内容、语法可参考以下代码：
// 暴露函数相关API
export { apply } from "./function/apply";
export { bind } from "./function/bind";
export { call } from "./function/call";
export { debounce } from "./function/debounce";
export { throttle } from "./function/throttle";
// 暴露数组相关API
export { chunk } from "./array/chunk";
export { concat } from "./array/concat";
export {
map,
reduce,
filter,
find,
findIndex,
every,
some,
} from "./array/declares";
export { difference } from "./array/difference";
export { drop, dropRight } from "./array/drop";
export { flatten } from "./array/flatten";
export { pull, pullAll } from "./array/pull";
export { slice } from "./array/slice";
export { unique } from "./array/unique";
// 暴露对象相关API
export { clone1, clone2 } from "./object/clone";
export {
deepClone1,
deepClone2,
deepClone3,
deepClone4,
} from "./object/deepClone";
export { mergeObject } from "./object/mergeObject";
export { myInstanceOf } from "./object/myInstanceOf";
export { newInstance } from "./object/newInstance";
// 暴露字符串相关API
export { reverseString, palindrome, truncate } from "./string/reverseString";
// 暴露事件相关API
export { myAddEventListener } from "./eventBind/myAddEventListener";
export { eventBus } from "./eventBind/eventBus";
export { PubSub } from "./eventBind/myPubSub";
5、在package.json文件中加入脚本，内容如下：
"scripts": {
"build:watch": "webpack --watch",
},
6、输入打包cmd命令：npm run build:watch 。打包成功后看到如下文件
7、测试使用。新建html文件，引入打包后的js文件，如下图：
三、上传npm仓库
上面第一步中package.json可参考以下代码:
{
"name": "furenqiang-own-util",
"version": "1.0.1",
"description": "",
"main": "./dist/furenqiang-utils.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:watch": "webpack --watch"
},
"keywords": [
"furenqiang",
"utils",
"array",
"object",
"function",
"string",
"axios",
"event-bus",
"pub-sub"
],
"author": "furenqiang",
"license": "ISC",
"dependencies": {
"webpack": "^5.16.0",
"webpack-cli": "^4.4.0"
}
}
案例二：初始化列表隔行变色
一、使用步骤
1、初始化package.json文件
在编写的项目代码（非中文）文件夹里面输入cmd命令 npm init -y，会在根目录生成一个package.json文件，如下图
2、下载安装jQuery
3、新建源代码目录src
index.html代码如下：
<!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>
<script src="./index.js"></script>
</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>
</ul>
</body>
</html>
index.js代码如下：
/*
*index.js
*/
// 1、使用ES6导入语法，导入jquery
import $ from 'jquery'
// 2、定义jquery的入口函数
$(function () {
// 实现奇偶行变色
$('li:odd').css('background-color', 'red')
$('li:even').css('background-color', 'pink')
})
4、运行调试
此时打开index.html发现浏览器默认不支持es6语法import的，需要用webpack来转换浏览器之间的兼容性，使浏览器识别es6代码
解决步骤：
- 安装webpack依赖，输入命令（后面的
-D是为了此依赖仅在开发环境中使用，打包好上线后不需要webpack）
- 手动新建文件webpack.config.js,写入以下内容：
// 使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
// 代表webpack的运行模式，有 development 和 production
mode: 'development'
}
对上面运行模式dev和pro的补充说明
mode的可选值
（1）development：开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合在开发阶段使用
（2）production ：生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用
- 在package.json文件中加入dev脚本，内容如下（script节点下的脚本，可以通过 npm run 执行例如 npm run dev进行打包构建，此时真正执行的命令是"webpack"）
"scripts": {
"dev": "webpack"
},
4. 构建成功后生成dist文件夹，下面有个main.js，此时index.html引入main.js就没有兼容性问题了
修改index.html代码：
<!-- <script src="./index.js"></script> -->
<script src="../dist/main.js"></script>
- 再次打开页面，效果出现
webpack总结
1、webpack.config.js文件的作用
是webpack的配置文件。webpack在真正开始打包构建之前，会读取这个配置文件（拿到向外导出的配置选项），从而基于给定的配置，对项目进行打包。
注意：由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置。
2、webpack中的默认约定
在webpack 4.x和5.x的版本中有如下默认约定：
（1）默认的入口打包文件为 src -> index.js （没有会报错）
（2）默认的输出文件路径为 dist -> main.js
注意：可以在webpack.config.js中修改打包的默认约定
3、自定义打包的入口和出口
在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。示例代码：
const path=require('path')//导入node.js中专门操作路径的模块
module.exports = {
entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
output:{
path:path.join(__dirname,'./dist'),//输出文件的存放路径
filename:'bundle.js'//输出文件的名称
}
}
-
__dirname代表当前文件的存放路径
-
记得index.html中引用的js文件路径也要跟着改变
<!-- <script src="./index.js"></script> -->
<!-- <script src="../dist/main.js"></script> -->
<script src="../dist/bundle.js"></script>
每次修改index.js需要重新npm run dev进行打包，页面才能展示修改后的内容，很麻烦，下面使用插件来解决
1. webpack插件使用可以参考Vue 2.0 学习笔记（一）
2. 其中使用相对路径和base24路径都能显示相同的小图片。使用base24可以防止浏览器发起不必要的请求（标签一次请求，logo.jpg又是一次请求），缺点是会稍微增加体积。所以一般图片用base24。可以参考博客webpack和Vue.config.js中配置url-loader
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
