webpack

发表于 | 分类于 | | 阅读次数

webpack 特点与优势

webpack与RequireJS 、browserify

  • RequireJS是一个JavaScript模块加载器，基于AMD规范实现。他同事也提供了对模块进行打包与构建的工具r.js ，通过将开发时单独的匿名模块具名化并进行合并，实现线上页面资源加载的性能优化

  • browserify是一个以在浏览器中使用Node.js模块为出发点的工具，特点：
    ①对CommonJS规范(Node.js模块所采用的规范)的模块代码进行的转换与包装 ②对很多Node.js的标准package进行了浏览器端的适配，只要遵循CommonJS规范的JavaScript模块，即使是纯前端代码，也可以使用它进行打包

  • webpack则是一个为前端模块打包构建而生的工具。它既洗去了大量已有方案的优点和教训，也解决了很多前端开发过程中已存在的痛点，如代码的拆分与异步加载、对非JavaScript自愿的支持等。强大的loader设计使得它更像一个构建平台，而不只是一个打包工具

webpack特色

  • 代码拆分
  • 只能静态分析
  • 模块热替换

安装

  • 通用安装

    1
    npm install webpack -g

  • 指定版本安装

1
npm install webpack@1.1.14 -g
  • 安装到项目
    1
    npm install webpack --save-dev

配置文件

  • 每次构建都需要指定项目的入口文件（./index.js）与构建输出文件(bundle.js)
  • 使用loader需要以xxx!的形式指定，意味着每个有requireCSS资源的地方都需要写如下形式
1
require('style!css!./index.css');

webpack配置文件

默认使用当前目录下的webpack.config.js，配置文件只需要export的一个配置信息对象ji’ke即可

1
2
3
module.exports = {
  //configuration  
};

一个最简单的配置项包含以下信息
  • entry项目的入口文件
  • output构建的输出结果描述。（本身是一个对象，包括很多字段，比较重要的如下）
  • path:输出目录。
  • filename:输出文件名
  • publicPath:输出目录所对应的外部路径（从浏览器中访问）

其中publicPath是一个很容易被忽略但是很重要的配置，它表示构建结果最终被真正访问时的路径。

常见前端构建上线过程是这样的：配置构建输出目录为dist,构建完成后对dist目录进行打包，然后将其内容（结果文件往往会不止一个）发布到CDN上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//webpack配置ex
var path = require('path');
module.exports = {
    entry:path.join(__dirname,'index'),
    output:{
        path:__dirname,
        filename:'bundle.js'
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loaders:['style','css']
            }
        ]
    }
};

安装插件

webpack会内置一部分plugin，想要使用这些plugin，不需要额外安装直接使用

1
2
var webpack = require('webpack');
webpack.BannerPlugin;//这样可以直接获取BannerPlugin

安装非内置插件 ex:

1
npm i html-webpack-plugin@1.7.0 --save-dev;

安装完成后，在webpack.config.js中就可以获取这个插件

1
var HtmlWebpackPlugin = require('html-webpack-plugin');

实施构建

通过添加–watch选项可开启监视功能，webpack会首先进行一次构建，然后依据构建得到的依赖关系，对项目依赖的所有文件进行监听，一旦发生改变则出发重新构建

1
webpack -w

webpack还提供了webpack-dev-server来辅助开发与调试
webpack-dev-server是一个机遇EXpress框架的Node.js服务器，它还提供了一个客户端的运行环境，会被注入到页面代码中执行，并通过Socket.IO 与服务器通信，这样服务器端的每次改动与重新构建都会被通知到页面上，页面可以随之做出反应

webpack-dev-server需要额外安装webpack-dev-server包

1
npm install webpack-dev-server -g

然后启动webpack-dev-server即可

1
webpack-dev-server

服务默认监听8080端口。

webpack-dev-server的配置，既可以通过命令行参数形式传递，也可以通过在webpack.config.js的export中添加devServer实现。