前端模块构建工具webpack入门教程_蓝戒的博客


前端模块构建工具webpack入门教程

Webpack是什么

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过  loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS等。可以说是目前前端构建领域最有竞争力的解决方案之一。

官方文档:http://webpack.github.io/

webpack-demos:https://github.com/ruanyf/webpack-demos#demo01-entry-file-source

 webpack

前端模块加载

前端模块要在客户端中执行,所以他们需要增量加载到浏览器中。

模块的加载和传输,我们首先能想到两种极端的方式,一种是每个模块文件都单独请求,另一种是把所有模块打包成一个文件然后只请求一次。显而易见,每个模块都发起单独的请求造成了请求次数过多,导致应用启动速度慢;一次请求加载所有模块导致流量浪费、初始化过程慢。这两种方式都不是好的解决方案,它们过于简单粗暴。

分块传输,按需进行懒加载,在实际用到某些模块的时候再增量更新,才是较为合理的模块加载方案。

要实现模块的按需加载,就需要一个对整个代码库中的模块进行静态分析、编译打包的过程。

 

为什么使用Webpack

他类似browserify 但是可以把你的应用分离成许多文件,如果你有许多页面在你的单页应用里面,用户只需要下载当前页面所需要的代码。如果你跳转到另一个页面,他们不需要重新加载通用的代码。

他能替代grunt或者gulp大部分的功能 因为他可以构建和打包CSS,预处理CSS,编译JS和打包处理图片,甚至更多事情。

他支持AMD和CommonJs以及其他的模块化系统(Angular,ES6)。如果你不知道用什么,那么可以用CommonJs。

Webpack 的特点

Webpack 和其他模块化工具有什么区别呢?

代码拆分

Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的

块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。

Loader

Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。

智能解析

Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式require("./templates/" + name + ".jade")  。

插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还

可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。

快速运行

Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的

速度快速增量编译。

怎么安装Webpack

安装node.js

首先需要安装 Node.js ,node自带了包管理工具 npm 。

安装webpack

使用 npm install webpack -g ,webpack全局安装到了本地环境中,就可以使用 webpack 命令了。

在项目中使用webpack

通过 npm init 实例化package.json文件。

通过 npm install webpack --save-dev 安装 webpack 到 package.json 文件中。

或者通过 npm install webpack@1.2.x --save-dev 安装指定版本的 webpack 到 package.json 文件中。

通过 npm install webpack-dev-server --save-dev 安装 dev tools 到 package.json 文件中,本地运行webpack服务。

怎么使用Webpack

1、安装 webpack 后,可以使用 webpack 这个命令行工具。主要命令: webpack <entry> <output> 。可以切换到包含webpack.config.js的目录运行命令:

webpack 执行一次开发时的编译

webpack -p 执行一次生成环境的编译(压缩)

webpack --watch 在开发时持续监控增量编译(很快)

webpack -d 让他生成SourceMaps

webpack --progress 显示编译进度

webpack --colors 显示静态资源的颜色

webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by 将modules/chunks/assets进行列表排序

webpack --display-chunks 展示编译后的分块

webpack --display-reasons 显示更多引用模块原因

webapck --display-error-details 显示更多报错信息

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

下面看一个简单的示例:

var webpack = require('webpack');

module.exports = {

    //插件项

    plugins: [

        //提公用js到common.js文件中

        new webpack.optimize.CommonsChunkPlugin('common.js'),

        //将样式统一发布到style.css中

        new ExtractTextPlugin("style.css", {

            allChunks: true,

            disable: false

        }),

        //使用ProvidePlugin加载使用频率高的模块

        new webpack.ProvidePlugin({

            $: "webpack-zepto"

        })

    ],

    //页面入口文件配置

    entry: {

        index : './src/main.js'

    },

    //入口文件输出配置

    output: {

        path: __dirname +'/dist/',

        filename: '[name].js'

    },

    module: {

        //加载器配置

        loaders: [

            { test: /\.css$/, loader: 'style-loader!css-loader' },

            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},

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

        ]

    },

    //其它解决方案配置

    resolve: {

        extensions: ['', '.js', '.json', '.scss'],

        alias: {

            filter: path.join(__dirname, 'src/filters')

        }

    }

entry

entry 是页面入口文件配置,可以是一个文件或者多个入口文件,可以是对象格式或者数组格式。

entry: {

    index : './src/main.js'

}

entry:['./src/main.js','./src/index.js']

output

output 是对应输出项配置,主要包括 path , filename 和 publishPath 属性。path 代表输出的路径, filename 代表输出的文件名称, publishPath 代表静态资源发布后的前缀地址。

module.loaders

module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。 点击这里可以查看loader list 。

module: {

    //加载器配置

    loaders: [

        //.css 文件使用 style-loader 和 css-loader 来处理

        { test: /\.css$/, loader: 'style-loader!css-loader' },

        //.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'}

    ]

}

loader主要有3种使用方式:

1、在页面里面引用资源使用

require("url-loader?mimetype=image/png!./file.png");

2、在webpack.config.js文件夹中使用

{ test: /.png$/, loader: "url?mimetype=image/png" };

3、在命令行中编译使用

webpack --module-bind "png=url-loader?mimetype=image/png";

如上,"-loader"其实是可以省略不写的,多个loader之间用“!”连接起来。

注意所有的加载器都需要通过 npm 来加载,并建议查阅它们对应的 readme 来看看如何使用。

拿最后一个 url-loader 来说,它会将样式中引用到的图片转为模块来处理,使用该加载器需要先进行安装:

npm install url-loader -save-dev

配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式(其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)。也可以使用file-loader来加载资源文件。

插件plugins

plugins 是插件项,这里我们使用了一个 CommonsChunkPlugin 的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个 common.js 来方便多页面之间进行复用。 点击这里可以查看plugins list 。

plugins: [

    //提公用js到common.js文件中

    new webpack.optimize.CommonsChunkPlugin('common.js'),

    //将样式统一发布到style.css中

    new ExtractTextPlugin("style.css", {

        allChunks: true,

        disable: false

    }),

    //使用ProvidePlugin加载使用频率高的模块

    new webpack.ProvidePlugin({

        $: "webpack-zepto"

    })

]

如上,包含两种:

1、第一种webpack自带的一些插件: webpack.ProvidePlugin 、 webpack.optimize.CommonsChunkPlugin ,

2、另外一种则通过 npm 包安装的: ExtractTextPlugin 。

resolve

最后是 resolve 配置,这块很好理解,直接写注释了:

resolve: {

    // require时省略的扩展名,如:require('module') 不需要module.js

    extension: ['', '.js'],

    //别名

    alias: {

        filter: path.join(__dirname, 'src/filters')

    }

}

使用Webpack-dev-server

webpack-dev-server 是基于node.js Express服务,它同时包含了一个基于 Socket.IO 轻量的运行时环境。

'use strict'

var webpack = require('webpack');

var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config');

// 配置代码自动编译和热替换插件

config.entry.unshift('webpack-dev-server/client?http://localhost:9090', "webpack/hot/dev-server");

config.plugins.push(new webpack.HotModuleReplacementPlugin());

// 这里配置:请求http://localhost:9090/index.php,

// 相当于通过本地node服务代理请求到了http://testapi.uhouzz.com/index.php

var proxy = [{

    path: "/index.php/*",

    target: "http://pc.uhouzz.com",

    host: "pc.uhouzz.com"

}]

//启动服务

var app = new WebpackDevServer(webpack(config), {

    publicPath: config.output.publicPath,

    hot:true,

    historyApiFallback: true,

    proxy:proxy

});

app.listen(9090);

如上,引用 webpack 和 webpack-dev-server 模块,通过WebpackDevServer启动服务,通过 HotModuleReplacementPlugin 插件启动代码自动编译页面自动刷新。这样,当你修改了html、js或者样式文件,页面会自动编译刷新。

html页面使用

直接在页面引入 webpack 最终生成的页面脚本和样式文件即可。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>webpack test</title>

    <link rel="stylesheet" href="/dist/style.css">

</head>

<body>

    <div id="app"></div>

    <script src="/dist/common.js"></script>

    <script src="/dist/build.js"></script>

</body>

</html>

参考:

1. http://www.jianshu.com/p/b95bbcfc590d

2. http://www.tuicool.com/articles/bA3eym7

3. Webpack 中文指南 http://webpackdoc.com/

本文固定链接: http://www.webzsky.com/?p=1006 | 蓝戒的博客

cywcd
该日志由 cywcd 于2016年10月28日发表在 javascript, web技术 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 前端模块构建工具webpack入门教程 | 蓝戒的博客
关键字: ,

前端模块构建工具webpack入门教程:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×