webpack那些事儿

Webpack是一个前端资源加载（模块加载器）兼打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

grunt/gulp是优化前端开发流程的工具，webpack是一种模块化解决方案，为了解决可以require不同文件的需求引入了loader，初衷是require everything, bundle everything。webpack的plugins选项挤掉了gulp的市场，而npm/package.json里面的scripts很好用，调用任务写一个简单的命令就行。

grunt、gulp的工作方式：在一个配置文件中，指明对某些文件进行编译，组合，压缩，之后工具会自动完成这些步骤。
webpack的工作方式：通过一个主文件index.js，查找项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

温馨提示：本篇文章以webpack1.x为例来入门学习webpack。

一、webpack的安装
cnpm是啥东西？电脑系统识别这个命令吗？请看这里。
保证把nodejs，npm，cnpm都安装好后，下面开始安装webpack。可以用windows系统的命令行，也可以用git bash。

cnpm install webpack -g

二、webpack的使用
demo1
A、创建一个目录

mkdir app

B、在app目录中添加main.js文件

document.write("It works。");

C、在app目录中添加index.html文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>学习webpack</title></head><body><script type="text/javascript" src="bundle.js"></script></body>
</html>

D、执行命令

webpack main.js bundle.js

E、在浏览器中打开index.html

即可看到，It works。

demo2
下面以demo1为基础，添加或修改文件。
A、在app目录中添加inner.js文件

module.exports = "It works from inner.js。";

B、更新main.js

document.write(require("./inner.js"));

C、执行命令

webpack main.js bundle.js

D、在浏览器中打开index.html

即可看到，It works from inner.js。

三、webpack的loader
Webpack本身只能处理原生的JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换。
所以如果我们需要在项目中添加css文件，就需要使用css-loader和style-loader，css-loader会负责遍历css文件，style-loader会把原来的css代码插入页面中的一个style标签中。
1、安装css-loader
以上面的demo2为基础，在当前目录安装css-loader和style-loader

cnpm install css-loader style-loader

全局安装，需要加-g。
执行以上命令后，会在当前目录生成node_modules文件夹，它就是css-loader和style-loader的安装目录。

2、使用css-loader
首先，在app目录中添加style.css文件

body{color:red;
}

其次，介绍3种使用css-loader的方法

方法A：修改main.js文件

require("!style-loader!css-loader!./style.css");
document.write(require("./inner.js"));

执行命令

webpack inner.js bundle.js

在浏览器中打开index.html

即可看到，It works from inner.js字体变红。

方法B：修改main.js文件，在执行命令的时候绑定。

require("./style.css");
document.write(require("./inner.js"));

执行命令

webpack inner.js bundle.js --module-bind 'css=style-loader!css-loader'

在浏览器中打开index.html

即可看到，It works from inner.js字体变红。

方法C：添加配置文件，把编译内容放在文件中，统一管理。

//修改main.js，有两种导入css的方式。
// import './style.css';
require('./style.css');
//在app目录中添加webpack.config.js文件
module.exports = {entry: "./main.js",output: {path: __dirname, // __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style-loader!css-loader" }]}
};

webpack.config.js文件通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块。

接下来我们只需要执行webpack命令，即可生成bundle.js文件。

在浏览器中打开index.html

即可看到，It works from inner.js字体变红。

最后，介绍4种使用url-loader的方法

//require
require("url-loader?mimetype=image/png!./file.png");//cli
webpack --module-bind "png=url-loader?mimetype=image/png"//配置文件
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }//配置文件
{test: /\.png$/,loader: "url-loader",query: { mimetype: "image/png" }
}

四、webpack的plugins
webpack自带一些插件（内置插件），你也可以安装一些插件。

下面以BannerPlugin为例，介绍如何安装和使用内置插件。
1、安装内置插件

cnpm install webpack --save-dev

2、修改webpack.config.js文件

var webpack=require('webpack');module.exports = {entry: "./main.js",output: {path: __dirname,filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style-loader!css-loader" }]},plugins:[new webpack.BannerPlugin('尝试webpack的内置插件');]
};

执行命令webpack，打开bundle.js，可以看到文件头部出现了我们指定的注释信息，BannerPlugin插件的作用就是在编译文件中的首部插入注释信息。

上面通过一个main.js入口文件，一个index.html，一个index.js，一个style.css文件，和webpack命令，帮我们生成构建后的bundle.js。

五、常用命令
1、构建一个开发目录

webpack

2、查看所有命令

webpack -h
webpack --help

3、构建一个生产目录，对打包后的文件进行压缩混淆

webpack -p

4、生成map映射文件

webpack -d

5、连续构建，监听

webpack --watch

6、美化展示信息

webpack --colors

7、找出详细的错误信息

webpack --display-error-details

8、使用webpack.config.prod.js配置文件来打包

webpack --config webpack.config.prod.js

六、开发环境
上面都是修改完文件，执行命令后，直接打开index.html，手动刷新看效果。
这里介绍的webpack-dev-server可以实现自动刷新，它是一个小型的Node.js Express静态文件服务器，使用webpack-dev-middleware来服务于webpack的包，安装及使用方法如下。
1、安装和使用
A、安装webpack-dev-server

cnpm install webpack-dev-server -g

B、在app目录中执行webpack-dev-server

webpack-dev-server

如果自动刷新，可以这么做，不要--hot。

webpack-dev-server --inline

C、在浏览器打开http://localhost:8080/
可以浏览项目中的页面和编译后的资源输出。

也可以通过命令打开浏览器，写法如下：

webpack-dev-server --open
webpack-dev-server && open http://localhost:8080 -a 'google chrome'

注意：webpack-dev-server生成的bundle.js包并没有放在真实目录中，而是放在了内存中。

2、两种模式
webpack-dev-server支持两种模式来自动刷新页面，分别是iframe模式和inline模式，这两种模式都支持热模块替换，好处是只替换更新的部分，而不是页面重载。
A、iframe模式

这种模式不用额外配置，只要按照http://localhost:8080/webpack-dev-server/index.html格式访问url即可。

B、inline模式
这种模式，url不用变化，但是需要配置。
先配置webpack.config.js文件，可以参考官网

output:{path: 'lib',publicPath: "http://127.0.0.1:8080/lib/",filename: 'bundle.js'
},
devServer:{contentBase: path.join(__dirname, ""),historyApiFallback: true, //不跳转hot: true,inline: true //实时刷新
},
plugins:[new webpack.DefinePlugin({'process.env.NODE.ENV':"development"}),new webpack.HotModuleReplacementPlugin()
]

每次敲一长串命令，是不是有些麻烦呢？配置一下package.json文件即可。

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack","server": "webpack-dev-server --open","build": "webpack-dev-server --inline"
}

npm run start 替代 webpack
npm run build 替代 webpack-dev-server --inline

"scripts": {"dev": "webpack-dev-server","build": "webpack --config webpack.config.prod.js"
}

运行npm run build来编译生成生产模式下的bundles；
运行npm run dev来生成开发模式下的bundles以及启动本地server。

webpack打包输出真实的文件，而webpack-dev-server开启服务输出的文件只存在于内存中，不输出真实的文件！

做过一些尝试后，你会发现webpack比较灵活，webpack.config.js和package.json对于运行项目来说，都很有用。而且，webpack.config.js文件中的参数发挥的作用等价于package.json文件中的scripts条款，如果不想在命令中拼接太多参数，可以配置webpack.config.js。

七、打包原理

在入口文件中，对每个require资源文件配置一个id。对于同一个资源，不管require多少次，它的id都是一样的，所以无论在多少个文件中require，它都只会打包一份。

转载于:https://www.cnblogs.com/camille666/p/webpack.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/400335.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

卡拉丁发布第四代车用空调滤清器

卡拉丁发布第四代车用空调滤清器

5月15日&#xff0c;卡拉丁“全澄行动”第四代车用空调滤清器产品发布会在京举行&#xff0c;据悉&#xff0c;该车用空调滤清器PM2.5过滤效率可高达99%。经国家权威检测机构广东省微生物分析检测中心检测&#xff0c;卡拉丁第四代车用空调滤清器对大肠杆菌、金***葡萄球菌抗菌…
阅读更多...
【 Grey Hack 】大数四则运算

【 Grey Hack 】大数四则运算

目录效果加减乘除乘方源码版本&#xff1a;Grey Hack v0.7.3619 - Alpha 在Gs中&#xff0c;位数大于15的整数将以科学计数法显示&#xff0c;故这里提供一种基于字符串加法的四则大数运算算法。由于位数大于10的字符串无法用to_int方法转化为整数&#xff0c;因此本示例中以长…
阅读更多...
radio和文字无法对齐

radio和文字无法对齐

span.my-radio-padding {vertical-align: -3px; } https://blog.csdn.net/qq_29498555/article/details/79487141
阅读更多...
uniapp打包小程序上传测试后，使用有的插件显示空白页面，问题解决方【有效 / 最新】

uniapp打包小程序上传测试后，使用有的插件显示空白页面，问题解决方【有效 / 最新】

目录 问题1图在微信开发者平台正常能使用 打包上传微信小程序测试问题2图在微信开发者平台正常能使用 打包上传微信小程序测试解决步骤一1.2.3. 解决步骤二打开微信小程序官网看图跨域网址 最后 问题1图 在微信开发者平台正常能使用 未上传小程序&#xff0c;开发过程中&…
阅读更多...
django加载本地html

django加载本地html

django加载本地html from django.shortcuts import renderfrom django.http import HttpResponse from django.shortcuts import render,render_to_response # Create your views here. def hello(request): return render_to_response("hello.html") 传递数据到htm…
阅读更多...
IText 生成页脚页码

IText 生成页脚页码

做doc文档报表的时候可能遇到这样的需求&#xff1a; 每一个页面需要页码&#xff0c;用IText可以完成这样的需求。 IText生成doc文档需要三个包&#xff1a;iTextAsian.jar&#xff0c;iText-rtf-2.1.4.jar&#xff0c;iText-2.1.4.jar 代码亲测无错&#xff0c;如下所示&…
阅读更多...
Java知多少（68）面向字符的输出流

Java知多少（68）面向字符的输出流

面向字符的输出流都是类 Writer 的子类&#xff0c;其类层次结构如图 10-5 所示。 图10-5 Writer的类层次结构图表 10-3 列出了 Writer 的主要子类及说明。 表 10-3 Writer 的主要子类类名功能说明CharArrayWriter写到字符数组的输出流BufferedWriter缓冲输出字符流PipedWriter…
阅读更多...
Linux虚拟机的替代品：Docker与WSL2上手笔记

Linux虚拟机的替代品：Docker与WSL2上手笔记

目录安装Docker可能出现的问题内核需更新Linux 内核更新包将 WSL 2 设置为默认版本An error occurred安装镜像使用Microsoft Store安装所选的 Linux 分发手动安装镜像及文件夹的共享Docker run 命令Windows Terminal的安装在Windows Terminal中直接运行已有的容器Windows 10 20…
阅读更多...
Mac/Linux/Centos终端中上传文件到Linux云服务器

Mac/Linux/Centos终端中上传文件到Linux云服务器

Mac/Linux/Centos终端中上传文件到Linux云服务器 1、mac上传文件到Linux服务器 scp 文件名 用户名服务器ip:目标路径如&#xff1a;scp /Users/test/testFile testwww.linuxidc.com:/test/ 2、mac上传文件夹到Linux服务器&#xff0c;与上传文件相比多加了-r scp -r 文件夹目录…
阅读更多...
flask需求文件requirements.txt的创建及使用

flask需求文件requirements.txt的创建及使用

1.简介 Python项目中必须包含一个 requirements.txt 文件&#xff0c;用于记录所有依赖包及其精确的版本号用以新环境部署。 2.进入虚拟环境然后输入pip freeze > requirements.txt 每次安装或者升级了包之后最好也一并使用这个命令更新这个文件。 需求文件的内容示例…
阅读更多...
DHT(Distributed Hash Table，分布式哈希表)

DHT(Distributed Hash Table，分布式哈希表)

DHT(Distributed Hash Table&#xff0c;分布式哈希表)类似Tracker的根据种子特征码返回种子信息的网络。 DHT全称叫分布式哈希表(Distributed Hash Table)&#xff0c;是一种分布式存储方法。 在不需要服务器的情况下&#xff0c;每个客户端负责一个小范围的路由&#xff0c;并…
阅读更多...
Delphi 自带的 Base64 编解码函数

Delphi 自带的 Base64 编解码函数

今天帮别人解决一个关于 Base64 编解码的问题&#xff0c;竟然发现 Delphi 自带了 Base64 编解码的单元&#xff0c;叫 EncdDecd&#xff0c;这名字很拗口而且不直观&#xff0c;估计这是一直很少人关注和知道的原因。这个单元提供两套四个公开函数&#xff1a;对流的编解码&am…
阅读更多...
微信分享相关

微信分享相关

一、微信js-SDK说明文档 1.概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK&#xff0c;网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力&#xff0c;同时可以直接使用微信分享、扫一扫、卡券、支付…
阅读更多...
【联盛德W806上手笔记】一、开发环境和烧录程序

【联盛德W806上手笔记】一、开发环境和烧录程序

目录简介芯片外观MCU 特性安全特性低功耗模式芯片结构管脚定义极限参数开发环境SDK的获取从官网获取从Q群获取iosetting大佬 维护的wm-sdk-w806打开工程编译固件烧录现象Windows 10 20H2 HLK-W806-V1.0-KIT WM_SDK_W806_v0.6.0 引自《W80X_MCU_快速入门V0.2》、《W806 MCU 芯片…
阅读更多...
MySQL的mysql_insert_id和LAST_INSERT_ID

MySQL的mysql_insert_id和LAST_INSERT_ID

摘要&#xff1a;mysql_insert_id和LAST_INSERT_ID二者作用一样&#xff0c;均是返回最后插入值的ID 值 1 mysql_insert_id 一、PHP获取MYSQL新插入数据的ID mysql_insert_id(); 二、 php5和新增了获取最新插入值的ID的函数&#xff1a;mysqli_insert_id($conn)&#xff0c;和…
阅读更多...
Mac os + Flask + PyCharm python开发环境集成

Mac os + Flask + PyCharm python开发环境集成

1. 打开mac自带终端安装virtualenv 执行 sudo easy_install virtualenv / sudo pip install virtualenv 2.安装完 virtualenv &#xff0c;打开一个 shell &#xff0c;创建自己的环境。 $ mkdir myapp $ cd myapp $ virtualenv venv New python executable in env/bin/py…
阅读更多...
zookeeper注意几点

zookeeper注意几点

为什么80%的码农都做不了架构师&#xff1f;>>> Zookeeper 作为一个分布式的服务框架&#xff0c;主要用来解决分布式集群中应用系统的一致性问题&#xff0c;它能提供基于类似于文件系统的目录节点树方式的数据存储&#xff0c;但是 Zookeeper 并不是用来专门存储…
阅读更多...
【51单片机快速入门指南】7：片上EEPROM

【51单片机快速入门指南】7：片上EEPROM

目录硬知识IAP及EEPROM新增特殊功能寄存器介绍EEPROM空间大小及地址小常识大建议常见问题示例程序EEPROM.cEEPROM.h测试程序main.c普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬知识 摘自《STC89C52系列单片机器件手册》 ST…
阅读更多...
Flask从入门到做出一个博客的大型教程

Flask从入门到做出一个博客的大型教程

https://blog.csdn.net/u014793102/article/category/7661475
阅读更多...
Effective C++ 条款03：尽可能使用const

Effective C++ 条款03：尽可能使用const

场景一 用于修饰指针 char greeting[] "Hello"; char* p greeting; // non-const pointer, non-const data const char* p greeting; // non-const pointer, const data char* const p greeting; // const pointer, non-const data co…
阅读更多...
最新文章

Copyright @ 2022~2023