详解前端模块化工具-Webpack

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具有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>
</body>
</html>

webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块:

var path = require(‘path‘);
module.exports = {
    entry: path.resolve(__dirname, ‘./src/entry.js‘),
    output: {
        path: path.resolve(__dirname, ‘./assets‘),
        filename: ‘bundle.js‘
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: [‘babel‘], exclude: /node_modules/ },
            { test: /\.js$/, loader: ‘babel-loader‘, exclude: /node_modules/}
        ]
    },
    resolve:{
        extensions:[‘‘,‘.js‘,‘.json‘]
    },
};

整个代码在 这里,clone之后,切换到react-sample目录下,在终端运行 npm i && npm run build 进行打包,打包后的文件名是 bundle.js, 所在相对目录是 /assets。至此,webpack打包过程就ok了。

Webpack安装和配置

安装

webpack 可以作为全局的npm模块安装,也可以在当前项目中安装。

npm install -g webpack
npm install --save-dev webpack

对于全局安装的webpack,直接执行此命令会默认使用当前目录的webpack.config.js作为配置文件。如果要指定另外的配置文件,可以执行:

webpack —config webpack.custom.config.js

配置

每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js ,就是一个配置项,告诉 webpack 它需要做什么。

前文说了,webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块。在导出的配置对象中有几个关键的参数:

entry

entry 参数定义了打包后的入口文件,可以是个字符串或数组或者是对象;如果是数组,数组中的所有文件会打包生成一个filename文件;如果是对象,可以将不同的文件构建成不同的文件:

{
    entry: {
        page1: "./page1",
        //支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出
        page2: ["./entry1", "./entry2"]
    },
    output: {
        path: "dist/js/page",
        publicPath: "/output/",
        filename: "[name].bundle.js"
    }
}

该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js,并存放到 ./dist/js/page 文件夹下

output

output参数是个对象,定义了输出文件的位置及名字:

output: {
        path: "dist/js/page",
        publicPath: "/output/",
        filename: "[name].bundle.js"
    }
path: 打包文件存放的绝对路径
publicPath: 网站运行时的访问路径
filename:打包后的文件名

当我们在entry中定义构建多个文件时,filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

module

在webpack中JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等静态文件都是模块,不同模块的加载是通过模块加载器(webpack-loader)来统一管理的。loaders之间是可以串联的,一个加载器的输出可以作为下一个加载器的输入,最终返回到JavaScript上:

module: {
        //加载器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
            //.js 文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
            //图片文件使用 url-loader 来处理,小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}
        ]
    }

test 项表示匹配的资源类型,loader或loaders 项表示用来加载这种类型的资源的loader,loader的使用可以参考 using loaders,更多的loader可以参考 list of loaders

! 用来定义loader的串联关系,”-loader”是可以省略不写的,多个loader之间用“!”连接起来,但所有的加载器都需要通过npm来加载。

此外,还可以添加用来定义png、jpg这样的图片资源在小于10k时自动处理为base64图片的加载器:

{
test: /\.(png|jpg)$/,
loader: ‘url-loader?limit=10000‘
}

给css和less还有图片添加了loader之后,我们不仅可以像在node中那样require js文件了,我们还可以require css、less甚至图片文件:

 require(‘./bootstrap.css‘);
 require(‘./myapp.less‘);
 var img = document.createElement(‘img‘);
 img.src = require(‘./glyph.png‘);

注意,require()还支持在资源path前面指定loader,即require(![loaders list]![source path])形式:

require("!style!css!less!bootstrap/less/bootstrap.less");
// “bootstrap.less”这个资源会先被"less-loader"处理,
// 其结果又会被"css-loader"处理,接着是"style-loader"
// 可类比pipe操作

require() 时指定的loader会覆盖配置文件里对应的loader配置项。

resolve

webpack在构建包的时候会按目录的进行文件的查找,resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀:

 resolve: {
        //查找module的话从这里开始查找
        root: ‘/pomy/github/flux-example/src‘, //绝对路径
        //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],
        //模块别名定义,方便后续直接引用别名,无须多写长长的地址
        alias: {
            AppStore : ‘js/stores/AppStores.js‘,//后续直接 require(‘AppStore‘) 即可
            ActionType : ‘js/actions/ActionType.js‘,
            AppAction : ‘js/actions/AppAction.js‘
        }
    }

然后我们想要加载一个js文件时,只要 require(‘common’)就可以加载common.js文件了。

注意一下, extensions 第一个是空字符串 ! 对应不需要后缀的情况.

plugin

webpack提供了[丰富的组件]用来满足不同的需求,当然我们也可以自行实现一个组件来满足自己的需求:

plugins: [
     //your plugins list
 ]

在webpack中编写js文件时,可以通过require的方式引入其他的静态资源,可通过loader对文件自动解析并打包文件。通常会将js文件打包合并,css文件会在页面的header中嵌入style的方式载入页面。但开发过程中我们并不想将样式打在脚本中,最好可以独立生成css文件,以外链的形式加载。这时extract-text-webpack-plugin插件可以帮我们达到想要的效果。需要使用npm的方式加载插件,然后参见下面的配置,就可以将js中的css文件提取,并以指定的文件名来进行加载。

npm install extract-text-webpack-plugin –save-dev
plugins: [
    new ExtractTextPlugin(‘styles.css‘)
]

externals

当我们想在项目中require一些其他的类库或者API,而又不想让这些类库的源码被构建到运行时文件中,这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题:

 externals: {
     "jquery": "jQuery"
 }

这样我们就可以放心的在项目中使用这些API了:var jQuery = require(“jquery”);

context

当我们在require一个模块的时候,如果在require中包含变量,像这样:

 require("./mods/" + name + ".js");

那么在编译的时候我们是不能知道具体的模块的。但这个时候,webpack也会为我们做些分析工作:

  1. 分析目录:’./mods’;
  2. 提取正则表达式:’/^.*.js$/’;

于是这个时候为了更好地配合wenpack进行编译,我们可以给它指明路径,像在cake-webpack-config中所做的那样(我们在这里先忽略abcoption的作用):

 var currentBase = process.cwd();
 var context = abcOptions.options.context ? abcOptions.options.context :
 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

关于 webpack.config.js 更详尽的配置可以参考 这里

Webpack常用命令

webpack的使用通常有三种方式:

1、命令行使用:webpack 其中entry.js是入口文件,result.js是打包后的输出文件
2、node.js API使用:

var webpack = require(‘webpack‘);
webpack({
//configuration
}, function(err, stats){});

3、默认使用当前目录的 webpack.config.js 作为配置文件。如果要指定另外的配置文件,可以执行:webpack –config webpack.custom.config.js

webpack 的执行也很简单,直接执行

webpack --display-error-details

常用命令

webpack的使用和browserify有些类似,下面列举几个常用命令:

webpack 最基本的启动webpack命令
webpack -w 提供watch方法,实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供SourceMaps,方便调试
webpack --colors 输出结果带彩色,比如:会用红色显示耗时较长的步骤
webpack --profile 输出性能数据,可以看到每一步的耗时
webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
时间: 2024-10-09 11:06:57

详解前端模块化工具-Webpack的相关文章

前端模块化工具-webpack

详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合理有序就显得尤为必要,也应运而生了很多模块化工具.从服务器端到浏览器端,从原生的没有模块系统的`<script>`到基于Commonjs和AMD规范的实现到ES6 modules.为了模块化和更好的模块化,我们总是走在探索的路上. 但是这些实现模块化的方法或多或

【webpack学习笔记(一)】流行的前端模块化工具webpack初探

从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是浏览器它本身是并不能够"理解"这些语法的呀.就像下面这张图: 在开发代码文件 --> 生产代码文件的转换过程中,我们到底需要做些什么呢?没错,这一切都和webpack(或gulp)有关: 转一张webpack官网的图,webpack能把less/sass文件,json文件,乃至css

各种Notification详解,含工具类

                                                                 昨天一天只写了两篇文章,效率超低.追其原因呢,其实我一直在研究notification的实现方式,今天研究完了给大家分享一下.本来想写个工具类来封装一下代码的,但是我发现notification的个性化元素太多了,做成一个方法的话参数又多的要死,于是我就将比较常见的方法做了封装,写了个不是很规整的工具类,至于内部的逻辑啊,点击跳转的事件啊,大家下载demo后看看代码应

vue2.0生命周期详解(前端网备份)

这篇大佬用图文分析详解vue2.0里面的生命周期<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>;页面中渲染的优先值:所以综合排名优先级:render函数选项 > template选项 > outer HTML. https://segmentfault.com/a/1190000011381906 下面这个链接的console更清晰https://www.cnblogs

Git详解之六 Git工具(转)

Git 工具 现在,你已经学习了管理或者维护 Git 仓库,实现代码控制所需的大多数日常命令和工作流程.你已经完成了跟踪和提交文件的基本任务,并且发挥了暂存区和轻量级的特性分支及合并的威力. 接下来你将领略到一些 Git 可以实现的非常强大的功能,这些功能你可能并不会在日常操作中使用,但在某些时候你也许会需要. 6.1  修订版本(Revision)选择 Git 允许你通过几种方法来指明特定的或者一定范围内的提交.了解它们并不是必需的,但是了解一下总没坏处. 单个修订版本 显然你可以使用给出的

ui-router详解(二)ngRoute工具区别

我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用. angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去驱动视图. angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图. 后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等. ngRoute 使用时需要ui中用ng-view指令指定 如:<div ng-view>

详解用Navicat工具将Excel中的数据导入Mysql中

第一步:首先需要准备好有数据的excel: 第二步:选择"文件"->"另存为",保存为"CSV(逗号分隔)(*.csv)",将excel表另存为csv文档  第三步:(很重要):如果你的数据中有中文,那么需要将CSV文件处理一下,负责会导入失败:用editplus或者其他编辑器(另存时可以选择保存编码的编辑器)打开CSV文件,然后另存为,选择utf-8(你的数据库也是utf-8哦),点击保存. 第四步:开始导入了,使用mysql图形化工具(

UML企业项目设计工具Visual Paradigm新功能详解之DoDAF 工具

Visual Paradigm是包含设计共享.线框图和数据库设计新特性的企业项目设计工具.只需要这样单独的一款模型软件 Visual Paradigm就可以完成用UML设计软件,用BPMN去执行业务流程分析,用ERD企业设计数据库的任务. 视觉范式与DoDAF Visual Paradigm提供了一个易于使用的,模型驱动的解决方案,该解决方案支持DoDAF 2.02视图和模型的开发. 创建集成的DoDAF产品,并在视图之间保持可追溯性. 生成有助于组织有效地协调企业架构计划的架构文档. 通过网格

通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

  前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输给注册页后台-->>注册页后台经过转码保存实例化的文件 ② 在登录页输入账户密码,点击登录时,获得触发函数:获得由后台传输过来的true或者false---转换页面或者弹出输入错误.    登录页后台获取保存账户密码的实例化文件,通过转码,if判断之后传输给前台登录页TURE或者FALSE. 总共