webpack 从入门到放弃

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

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 回帖 • 257 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 153 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 585 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2031 回帖
  • V2Ray
    1 引用 • 15 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 18 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 30 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    264 引用 • 665 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 52 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 10 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖 • 2 关注
  • jsoup

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

    6 引用 • 1 回帖 • 482 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    132 引用 • 188 回帖
  • Unity

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

    25 引用 • 7 回帖 • 186 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    565 引用 • 3532 回帖
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 489 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 4 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 2 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 架构

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

    142 引用 • 442 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 453 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    176 引用 • 995 回帖 • 1 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 294 关注
  • 星云链

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

    3 引用 • 16 回帖 • 2 关注