webpack入门

ゞ浴缸里的玫瑰 2022-05-30 12:21 230阅读 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怎么用][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

二、示例二：

[npm_package.json_npm_npm]: http://blog.csdn.net/jiang7701037/article/details/79384402

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关【Webpack】Webpack基础入门

目录 1. 模块化相关概念 1.1 模块化的概念 1.2 模块化规范

红太狼/ 2023年02月17日 11:13/ 0 赞/ 271 阅读

相关 webpack入门

文章目录前言一、webpack介绍 1.webpack是什么？ 2.webpack特点 3.webpack的核心

墨蓝/ 2022年12月22日 01:00/ 0 赞/ 10 阅读

相关 WebPack入门

前端模块化新选择：WebPack Webpack具有Grunt、Gulp对于静态资源自动化构建的能力，但更重要的是，Webpack弥补了requireJS在模块化方面的缺陷，

以你之姓@/ 2022年07月16日 06:45/ 0 赞/ 24 阅读

相关 webpack入门

安装nodejs、npm省略，webpack版本使用2.6.1 1、安装webpack 由于使用npm安装很慢，因此切换成cnpm，安装命令： npm insta

拼搏现实的明天。/ 2022年06月14日 10:06/ 0 赞/ 219 阅读

相关 webpack入门

webpack可以打包的不仅仅是js了，css，sass，图片都可以进行打包，下面有入门的一步一步的简单示例：概念：webpack是模块加载器兼打包工具，它能

ゞ浴缸里的玫瑰/ 2022年05月30日 12:21/ 0 赞/ 231 阅读

相关 webpack入门

文章目录前言安装开始项目结构 webpack配置 loader加载器 plu

悠悠/ 2022年03月16日 11:24/ 0 赞/ 251 阅读

相关 Webpack入门

Webpack入门简介 Webpack是一个前端构建工具，本文将简要介绍它最常用的功能，并创建一个基于webpack的前端开发环境。范例项目包含两个页

绝地灬酷狼/ 2022年01月05日 17:51/ 0 赞/ 158 阅读

相关 Webpack入门

Webpack入门简介 Webpack是一个前端构建工具，本文将简要介绍它最常用的功能，并创建一个基于webpack的前端开发环境。范例项目包含两个页

小灰灰/ 2021年12月12日 02:55/ 0 赞/ 313 阅读

相关 Webpack 入门

为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出

系统管理员/ 2021年09月15日 01:28/ 0 赞/ 449 阅读

相关 webpack入门

定义自动化构建工具： webpack:模块化打包工具 gulp:文件转移、文件压缩。。。前端工程（前端项目）中文：[https://doc.webpac

深藏阁楼爱情的钟/ 2021年09月14日 10:02/ 0 赞/ 475 阅读