webpack

kailian 2016-07-25

前端模块加载

两种极端的方式

(1)每个模块文件都单独请求，请求次数过多，应用启动速度慢。

(2)把所有模块打包成一个文件然后只请求一次，导致流量浪费、初始化过程慢。

合理的方式

分块传输，按需进行懒加载，在实际用到某些模块的时候再增量更新

Webpack

Webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

安装webpack

npm install webpack -g

或者加到package.json

npm install webpack --save-dev
# 指定版本
npm install webpack@1.12.x --save-dev

webpack server

npm install webpack-dev-server --save-dev
# 运行
webpack-dev-server --progress --colors

默认配置文件为webpack.config.js

可以改成自定义配置

webpack --config customconfig.js

常见操作

启动

webpack

实时编译

webpack --watch
# 加上进度和颜色
webpack --progress --colors --watch

webpack -p 来针对发布环境编译(压缩代码)
webpack --display-error-details 查看查找过程
webpack -d 来生成 SourceMaps

Webpack配置

// webpack.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: ['./src/index'], //entry 是指入口文件的配置项
  output: {  //output是指输出文件的配置项
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  }
}

  • 代码拆分，同步和异步两种加载方式。每一个异步区块作为一个文件打包

  • 对 CommonJS 的 AMD 的语法做了兼容, 方便迁移代码

  • Loader，将各种类型的资源转换为JavaScript模块

  • 插件系统，webpack插件

loader

  • 通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript

  • 运行在 node.js 环境中，同步或异步执行

  • 接受参数，以此来传递配置项给 loader

  • 通过文件扩展名（或正则表达式）绑定给不同类型的文件

  • 通过 npm 发布和安装

  • 可以访问配置

按照惯例，而非必须，loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader

安装 loader

npm install css-loader style-loader

压缩 JavaScript

plugins: [
   new webpack.optimize.MinChunkSizePlugin(minSize)
]

js压缩插件

打包多个包

首先 entry 有多个属性, 对应多个 JavaScript 包，然后 commonsPlugin 可以用于分析模块的共用代码, 单独打一个包出来

// webpack.config.js
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
  entry: {
    Profile: './profile.js',
    Feed: './feed.js'
  },
  output: {
    path: 'build',
    filename: '[name].js' // Template based on keys in entry above
  },
  plugins: [commonsPlugin]
};

optimizing-common-code

multi-page-app

revision

webpack文档

Option 1: One hash for the bundle

output: {
    path: path.join(__dirname, "assets", "[hash]"),
    publicPath: "assets/[hash]/",
    filename: "output.[hash].bundle.js",
    chunkFilename: "[id].[hash].bundle.js"
}

Option 2: One hash per chunk

output: { chunkFilename: "[chunkhash].bundle.js" }

CDN

设置 output.publicPath

webpack文档output.publicPath

功能开关

在开发环境使用(比如 log)，输出日志，模拟数据等等

if (__DEV__) {
  console.warn('logging');
}

// webpack.config.js

// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
var definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  plugins: [definePlugin]
};

执行，可添加到package.json

BUILD_DEV=1 webpack

"scripts": {
    "dev": "BUILD_DEV=1 webpack",
    "build": "BUILD_DEV=0 webpack"
},

参考

Webpack docs

Webpack 中文指南

Webpack 入门指迷

手把手教你基于ES6架构自己的React Boilerplate项目

web64