webpack 从入门到放弃

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

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 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • BookxNote

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

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

    1 引用 • 1 回帖
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    52 引用 • 40 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 627 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    727 引用 • 1322 回帖 • 22 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 6 关注
  • gRpc
    11 引用 • 9 回帖 • 52 关注
  • 架构

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

    142 引用 • 442 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 413 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 4 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 475 关注
  • Unity

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

    25 引用 • 7 回帖 • 196 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 268 回帖 • 67 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 67 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 62 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 247 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 534 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 141 关注
  • 阿里云

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

    89 引用 • 345 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 368 关注
  • JRebel

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

    26 引用 • 78 回帖 • 651 关注
  • 创业

    你比 99% 的人都优秀么?

    83 引用 • 1399 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 130 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    406 引用 • 3569 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 4 关注