Webpack是什么

首先可以看下 官方文档 ，文档是最好的老师。

Webpack是由Tobias Koppers开发的一个开源前端模块构建工具。它的基本功能是将以模块格式书写的多个JavaScript文件打包成一个文件，同时支持CommonJS和AMD格式。但让它与众不同的是，它提供了强大的loader API来定义对不同文件格式的预处理逻辑，从而让我们可以将CSS、模板，甚至是自定义的文件格式当做JavaScript模块来使用。Webpack 基于loader还可以实现大量高级功能，比如自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换等等，可以说是目前前端构建领域最有竞争力的解决方案之一。

为什么使用Webpack

  • 他类似browserify 但是可以把你的应用分离成许多文件，如果你有许多页面在你的单页应用里面，用户只需要下载当前页面所需要的代码。如果你跳转到另一个页面，他们不需要重新加载通用的代码。
  • 他能替代grunt或者gulp大部分的功能 因为他可以构建和打包CSS，预处理CSS，编译JS和打包处理图片，甚至更多事情。
  • 他支持AMD和CommonJs以及其他的模块化系统（Angular，ES6）。如果你不知道用什么，那么可以用CommonJs。

怎么安装Webpack

安装node.js

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

但是由于npm在国内下载的时候是很慢的，所以这里推荐一个替代npm的淘宝镜像cnpm.之后npm安装请使用cnpm！

命令行安装：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装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>

总结

基于 webpack 的入门教程就到这里，希望本文能对你有所帮助，你也可以参考下面的项目进行参考。

Vue-cnodejs ,基于Vue.js重写的cnodejs的webapp,其中采用的webpack进行打包处理。

webpack的安装和使用的更多相关文章

  1. Bug记载1之webpack本地安装

    当我安装前端打包工具webpack时,cmd命令出现了这么一句关键性的提示: npm ERR ! Refusing to install package as a dendency of itself ...

  2. webpack 介绍 &amp; 安装 &amp; 常用命令

    webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...

  3. WebPack的安装

    一.前提因为webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js,以及npm.在这里我使用的版本是:node:v5.8.0 ,npm:3.7.3,若是版本问题, ...

  4. webpack介绍 安装 常用命令

    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...

  5. webpack局部安装的问题

    webpack的局部安装 npm install webpack 默认状态是当前目录下安装,-g是全局安装 ---------------------------------------------- ...

  6. WebPack 从安装到闲置

    序言:各种技术在研究过程中常常会出现在实际工作中难以实施的情况,于是就慢慢闲置,但学毕竟还是必须要学学的,就看能用到多少,至少开拓了眼界,谨以此安慰下那些学完又闲置的技术~ 跑题结束,以下开始正式配置 ...

  7. 【01】webpack的安装过程截图

    [05](moyu:最好安装在C盘.默认的安装地址.) []全局安装 01,首先要安装Node.js, Node.js 自带了软件包管理器 npm. 02,Webpack 需要 Node.js v0. ...

  8. 【前端_React】Node.js和webpack的安装

    第一步——安装Node.js 首先要安装Node.js,Node.js自带了软件包管理工具npm,可以使用npm安装各种插件.Node.js的下载地址 可以自定义安装到指定的路径下,待安装完成后命令行 ...

  9. 85.webpack的安装失败至成功

    webpack怎么安装 1.安装node.js; 2.安装webpack:   npm install webpack --save-dev   : 注意:webpack 4x以上,webpack将命 ...

随机推荐

  1. 我为NET狂官方面试题-数据库篇答案

    题目:http://www.cnblogs.com/dunitian/p/6028838.html 汇总:http://www.cnblogs.com/dunitian/p/5977425.html ...

  2. Java面试常见知识点总结(一)

    1.sleep()和wait(): Java中的多线程是一种抢占式的机制,而不是分时机制.抢占式的机制是有多个线程处于可运行状态,但是只有一个线程在运行.   ● 共同点:    (1) 他们都是在多 ...

  3. eclipse项目里面的类有时候会莫名其妙出现很多错误

    由于eclipse的编译是基于时间戳的判断机制的.因此当你按build   all的时候有些eclipse认为时间戳没有改变的类不会被编译.因此你可以先clean一下再编译.这个时候eclipse会将 ...

  4. Python Socket,How to Create Socket Cilent? - 网络编程实例

    文章出自:Python socket – network programming tutorial by Silver Moon 原创译文,如有版权问题请联系删除. Network programin ...

  5. Java-Junit 的Hello world

    这里介绍junit 4的基本配置: <1>建立一个java project项目. <2>在src目录下面建一个包,com.sun.junit4,在包下面写一点文件T.java ...

  6. Android进阶(十一)Android系统架构讲解

    如果说一个成功男人的背后会有一个默默支持的女人的话,那么一个优越稳定的平台背后必有一个成熟的系统架构所支撑着.那么,Android的系统架构是怎么样的呢?从下图我们可以从整体上有个大致的了解(图片来源 ...

  7. Git和Eclipse的使用、上传、部署

    https://www.jianshu.com/p/812717c740a2 https://blog.csdn.net/lynn_Kun/article/details/73740400 https ...

  8. Spring IOC 注入方式详解 附代码

    引言 Spring框架作为优秀的开源框架之一,深受各大Java开发者的追捧,相信对于大家来说并不陌生,Spring之所以这么流行,少不了他的两大核心技术IOC和IOP.我们这里重点讲述Spring框架 ...

  9. CSS3实现烟花特效 --web前端

    烟花特效,比较简单,直接贴代码了…… <!DOCTYPE html><html lang="en"><head> <meta charse ...

  10. [转载]微软VS2015支持Android和iOS编程

    Visual Studio 2015 Preview http://www.zhihu.com/question/26594936/answer/33397319 http://www.visuals ...