webpack学习使用

webpack使用案例

案例一：webpack打包自定义工具一、优点二、使用步骤1、在编写的项目代码（非中文）文件夹里面输入cmd命令 npm init -y，会在根目录生成一个package.json文件，如下图2、npm install webpack webpack-cli，会在根目录生成一个文件夹node_modules3、手动新建文件webpack.config.js,写入以下内容：4、新建指定的入文件（entry: './src/index.js',）index.js,写入需要导出的方法有哪些，模块化导出的内容、语法可参考以下代码：5、在package.json文件中加入脚本，内容如下：6、输入打包cmd命令：npm run build:watch 。打包成功后看到如下文件7、测试使用。新建html文件，引入打包后的js文件，如下图：

三、上传npm仓库

案例二：初始化列表隔行变色一、使用步骤1、初始化package.json文件2、下载安装jQuery3、新建源代码目录src4、运行调试

webpack总结1、webpack.config.js文件的作用2、webpack中的默认约定3、自定义打包的入口和出口

案例一：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代码如下：

• 这是第1个li
• 这是第2个li
• 这是第3个li
• 这是第4个li
• 这是第5个li
• 这是第6个li
• 这是第7个li
• 这是第8个li
• 这是第9个li

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代码：

再次打开页面，效果出现

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文件路径也要跟着改变

每次修改index.js需要重新npm run dev进行打包，页面才能展示修改后的内容，很麻烦，下面使用插件来解决 1. webpack插件使用可以参考Vue 2.0 学习笔记（一） 2. 其中使用相对路径和base24路径都能显示相同的小图片。使用base24可以防止浏览器发起不必要的请求（标签一次请求，logo.jpg又是一次请求），缺点是会稍微增加体积。所以一般图片用base24。可以参考博客webpack和Vue.config.js中配置url-loader

推荐链接

 您阅读本篇文章共花了：