webpack入门

最新推荐文章于 2019-09-09 14:20:52 发布

田江

最新推荐文章于 2019-09-09 14:20:52 发布

阅读量397

点赞数 1

分类专栏： webpack 文章标签： webpack入门 webpack

本文链接：https://blog.csdn.net/jiang7701037/article/details/79528078

版权

webpack 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

webpack可以打包的不仅仅是js了，css，sass，图片都可以进行打包，

下面有入门的一步一步的简单示例：

概念：webpack是模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

作用和优势：
1. webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS 了。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4. 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。

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

一、安装

1、先安装npm，在文章：npm包管理器和package.json入门_npm是什么_npm怎么用里

2、安装webpack

全局安装：npm install webpack -g

查看安装情况：webpack -help

二、示例一：

html代码（demo01.html）：

 HTML代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript" src="js/bundle01.js" ></script>

js代码（demo01.js）：

	document.write("hello webpack!");

用webpack命令，打包demo01.js

在命令行输入：

webpack demo01.js bundle01.js

二、示例二：

田江

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
webpack入门

webpack可以打包的不仅仅是js了，css，sass，图片都可以进行打包，下面有入门的一步一步的简单示例：概念：webpack是模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。作用和优势：1. webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁...
复制链接

扫一扫