webpack 从入门到放弃

本贴最后更新于 1856 天前,其中的信息可能已经事过境迁

Webpack 是一个前端的静态模块资源打包工具,能让浏览器也支持模块化。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

常用命令

webpack -v 查看版本号
webpack ./js/main.js -o ./js/bundle.js 第一个路径为入口js的路径,第二个路径参数为生成文件的路径

使用配置文件之后,直接使用 webpack 命令,不需要参数也可以打包,配置文件的名字为“webpack.config.js”。
下面是一个完整配置的内容:

// 引用 Node.js 中的 path 模块,处理文件路径的小工具
const path = require("path");
// 1. 导出一个webpack具有特殊属性配置的对象
module.exports = {
	// 指定模式配置,取值: none(什么也没有), development or production(默认的),不写的话会出现黄色警告
	// 如, production 模式打包后 bundle.js是压缩版本的, development则不是压缩的
	mode: 'none',
	// 入口
	entry: './src/main.js', // 入口模块文件路径
	// 出口是对象
	output: {
		// path 必须是一个绝对路径 , __dirname 是当前js的绝对路径:D: \StudentProject\ WebStudy\ webpack - demo2
		path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
		filename: 'bundle.js' // 打包的结果文件名
	}
}

webpack 应该作为本地安装,并且只需要存在于开发环境中,所以需要安装到开发环境依赖:

npm init -y 初始化项目
npm install webpack@v4.35.2 -D 把webpack安装到项目的开发环境依赖
npm install webpack-cli@3.3.6 -D  V4+版本的webpack需要安装cli

然后在 package.json 中添加映射:

	"scripts": {
		"show": "webpack -v",
		"start": "node ./src/main.js",
		"build": "webpack"
	}

完整的 package.json 配置:

{
	"name": "webpack3",
	"version": "1.0.0",
	"description": "",
	"main": "webpack.config.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"show": "webpack -v",
		"start": "node ./src/main.js",
		"build": "webpack"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
		"webpack": "^4.35.2",
		"webpack-cli": "^3.3.6"
	}
}

查看 webpack 版本号:npm run show
运行 main.js 模块:npm run start,如果命令映射的别名是 start ,可省略 run 进行简写执行,即:npm start
打包构建:npm run build

打包完成后,在 html 中引入打包生成的 bundle.js 文件,浏览器就可以正常识别了。

webpack 除了用来打包 js,还可以用来打包其他资源文件,比如 css,图片。

  • 打包 css 资源

    1. 安装打包相关的工具插件:npm install --save-dev style-loader css-loader,css-loader 是将 css 装载到 javascript,style-loader 是让 javascript 认识 css。
    2. 在 webpack.config.js 中新增以下配置:
    module: { // 模块
    	rules: [ // 规则
    		{
    			test: /\.css$/, // 正则表达式,匹配 .css 文件资源
    			use: [ // 使用的 Loader ,注意顺序不能错
    				'style-loader',
    				'css-loader'
    			]
    		}
    	]
    }
    

    整个 webpack.config.js 中的配置内容如下:

    // 引用 Node.js 中的 path 模块,处理文件路径的小工具
    const path = require("path");
    // 1. 导出一个webpack具有特殊属性配置的对象
    module.exports = {
    	// 指定模式配置,取值: none(什么也没有), development or production(默认的)
    	// 如, production 模式打包后 bundle.js是压缩版本的, development则不是压缩的
    	mode: 'none',
    	// 入口
    	entry: './src/main.js', // 入口模块文件路径
    	// 出口是对象
    	output: {
    		// path 必须是一个绝对路径 , __dirname 是当前js的绝对路径:D: \StudentProject\ WebStudy\ webpack - demo2
    		path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
    		filename: 'bundle.js' // 打包的结果文件名
    	},
    
    	module: { // 模块
    		rules: [ // 规则
    			{
    				test: /\.css$/, // 正则表达式,匹配 .css 文件资源
    				use: [ // 使用的 Loader ,注意顺序不能错
    					'style-loader',
    					'css-loader'
    				]
    			}
    		]
    	}
    }
    
    

    3.在 src 目录下新建一个 style.css 文件,内容如下:

    body {
    	background: red
    }
    
    

    4.在 main.js 中引入 style.css 文件

    // 模块方式导入 css , 最终会打包成js,打包在 bundle.js 中
    import './css/style.css'
    

    5.打包编译

    npm run build
    

    最后打开 html 文件,就可以看见 css 已经生效了。

  • 打包图片资源
    1.安装相关工具

    npm install --save-dev file-loader
    

    2.修改 webpack.config.js 文件配置,内容如下:

    // 引用 Node.js 中的 path 模块,处理文件路径的小工具
    const path = require("path");
    // 1. 导出一个webpack具有特殊属性配置的对象
    module.exports = {
    	// 指定模式配置,取值: none(什么也没有), development or production(默认的)
    	// 如, production 模式打包后 bundle.js是压缩版本的, development则不是压缩的
    	mode: 'none',
    	// 入口
    	entry: './src/main.js', // 入口模块文件路径
    	// 出口是对象
    	output: {
    		// path 必须是一个绝对路径 , __dirname 是当前js的绝对路径:D: \StudentProject\ WebStudy\ webpack - demo2
    		path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
    		filename: 'bundle.js' // 打包的结果文件名
    	},
    
    	module: { // 模块
    		rules: [ // 规则
    			{
    				test: /\.css$/, // 正则表达式,匹配 .css 文件资源
    				use: [ // 使用的 Loader ,注意顺序不能错
    					'style-loader',
    					'css-loader'
    				]
    			},
    			{
    				test: /\.(png|svg|jpg|gif)$/,
    				use: [
    					'file-loader',
    				]
    			}
    		]
    	}
    }
    
    

    3.修改 style.css,内容如下:

    body {
    	background: red;
    	background-image: url(./1.jpg)
    }	
    

    4.打包编译

    npm run build
    

    5.如果直接访问根目录下的 index.html,那么图片资源路径就无法访问到。
    解决方案:就是把 index.html 放到 dist 目录中。
    但是 dist 是打包编译的结果,而非源码,所以把 index.html 放到 dist 就不合适。
    而且如果我们一旦把打包的结果文件名 bundle.js 改了之后,则 index.html 也要手动修改。
    综合以上遇到的问题,可以使用一个插件: html-webpack-plugin 来解决。

  • 使用 HtmlWebpackPlugin 插件
    作用:解决文件路径问题
    将 index.html 打包到 bundle.js 所在目录中
    同时也会在 index.html 中自动的

  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 261 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 529 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 177 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    125 引用 • 169 回帖
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 27 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 211 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 589 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖 • 1 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 1 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 49 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 172 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 699 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 385 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 62 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • abitmean

    有点意思就行了

    29 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 210 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 633 关注