webpack 使用笔记

参考链接：http://www.runoob.com/w3cnote/webpack-tutorial.html

Webpack 是一个前端资源加载/打包工具。

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

PS：安装 Webpack 前，你本地环境需要支持 node.js。

PS：webpack4.0以上版本的webpack的脚手架webpack-cli已经被被分离出来了，需要另外安装。

 npm install webpack  --g
 
npm install webpack-cli  --g

1-1.使用淘宝 NPM 镜像

 npm install -g cnpm --registry=https://registry.npm.taobao.org

1-2.使用 cnpm 安装 webpack

 cnpm install webpack -g

1-3.创建项目app

 mkdir app

1-4.在app里面添加 index.html 和 runoob1.js

 <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src = "bundle.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
 
// runoob1.js
document.write("It works.");

1-5.使用 webpack 命令来打包

 webpack runoob1.js bundle.js

PS: 如果出现错误，那就使用更加严谨的命令

 npx  webpack  runoob1.js  -o  bundle.js  --mode  development

1-6.创建另一个js文件 runoob2.js

 module.exports = "It works from runoob2.js.";

1-7.更新runoob1.js文件

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

1-8.使用webpack进行打包

 npx  webpack  runoob1.js  -o  bundle.js  --mode  development

总结：webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。

2-1.LOADER：ebpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

2-2.安装css-loader 和 style-loader(全局安装需要参数 -g)。

 cnpm install css-loader style-loader

执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。

2-3.创建一个 style.css 文件

 body {
    background: yellow;
}

2-4.修改 runoob1.js 文件

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

2-5. webpack 命令来打包

 npx  webpack  runoob1.js  -o  bundle.js  --mode  development

2-6.访问css和js都被加载。

上一篇vue "keyId=xxxxx&keyId=xxxxx&keyId=xxxxx" 传值办法

下一篇mysql 数据库迁移办法

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961387.html

posted @ 2022-12-06 22:21 轻风细雨_林木木阅读(18) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

轻风细雨_林木木

做最优秀的自己。

webpack 使用笔记

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!-- index.html -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<script src = "bundle.js" charset="utf-8" type="text/javascript"></script>
	</body>
	</html>

	// runoob1.js
	document.write("It works.");

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