详解前端模块化工具-Webpack

最新推荐文章于 2024-08-15 09:19:44 发布

会飞的Pikachu

最新推荐文章于 2024-08-15 09:19:44 发布

阅读量4.3k

点赞数 1

分类专栏： Web 文章标签： javascript 前端开发工具 webpack

本文链接：https://blog.csdn.net/u011043843/article/details/49738617

版权

React自发布以来吸引了越来越多的开发者，React开发和模块管理的主流工具webpack也被大家所熟知。那么webpack有哪些优势，可以成为最主流的React开发工具呢？

webpack是什么

CommonJS和AMD是用于JavaScript模块管理的两大规范，前者定义的是模块的同步加载，主要用于NodeJS；而后者则是异步加载，通过requirejs等工具适用于前端。随着npm成为主流的JavaScript组件发布平台，越来越多的前端项目也依赖于npm上的项目，或者自身就会发布到npm平台。因此，让前端项目更方便的使用npm上的资源成为一大需求。

web开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。webpack是一个module bundler(模块打包工具)，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。Webpack对它们进行统一的管理以及打包发布，其官方主页用下面这张图来说明Webpack的作用：

webpack

webpack特性

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
2. 对js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
4. 有独立的配置文件webpack.config.js
5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps，易于调试
7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

React-sample

以 react-sample 为例，简单说明 webpack 如何打包一个 React 组件，其目录结构如下：

其中Hello.js定义了一个简单的React组件，使用ES6语法：

/**
 * Created by pomy on 15/11/4.
 */

import React, {Component} from 'react';

class Hello extends Component {
   
    render(){
        return (
            <div>Hello, {
  this.props.name}!</div>
        );
    }
}

entry.js是入口文件，将一个Hello组件输出到界面：

/**
 * Created by pomy on 15/11/4.
 */

import React from 'react';
import Hello from './hello';

React.render(<Hello name="Nate" />, document.body);

index.html的内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Sample</title>
</head>
<body>
<script src="./assets/bundle.js"></script>