webpack入门

ゞ浴缸里的玫瑰 2022-05-30 12:21 205阅读 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 条评论，205人围观）

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

相关阅读

相关【Webpack】Webpack基础入门

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

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

相关 webpack入门

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

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

相关 webpack入门

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

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

相关 webpack入门

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

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

相关 webpack入门

Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码隔离。通过lo

灰太狼/ 2021年12月22日 13:25/ 0 赞/ 365 阅读

相关 Webpack入门

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

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

相关 Webpack 入门

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

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

相关 webpack入门

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

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

相关 webpack入门

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhp

╰+攻爆jí腚メ/ 2021年08月30日 23:50/ 0 赞/ 494 阅读

相关 webpack入门

首先看一下结构目录 ![20200823151520415.png][] 1，新建空的文件夹“webpack\_test”，进入该文件夹dos窗口，输入以下命令生成pac

ゝ一纸荒年。/ 2021年07月25日 16:00/ 0 赞/ 518 阅读