webpack 笔记

基本配置项

entry 和 output

entry: 入口文件，一般入口文件关注整体流程，而非入口文件关注某一部分的实现。output.path: 指定输出路径
output.filename:

name: 模块名称
hash: 模块编译后的（整体）hash值，编译后文件hash值一样
chunkhash: 分片的hash值，编译后文件hash值不同，即每一个分片的hash都不一样
output.publicPath: 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。
单一入口文件情况下：
1
2
3
4
5
6
7
8
// webpack.config.js
module.exports = {
entry: 'src/index.js',
output: {
filename: 'bundle.js',
path: './dist/'
}
}

多个入口文件情况下：

// webpack.config.js
module.exports = {
  entry: {
  "index": 'src/index.js',
  "login/login": 'src/login/login.js'
  },
  output: {
    filename: '[name]-[hash].js',
    // filename: '[name]-[chunkhash].js',
    path: './dist/'
    // 输出文件中login.js位于dist/login目录下
  }
}

分片

将代码拆分后进行异步加载，但是不会自动提取公共模块的代码。

定义分割点

分割点表示代码在此处被分割成两个独立的文件，有两种方法。

1.使用require.ensure:

1
2
3

require.ensure(['module1', 'module2'], function(require) {
  var a = require('module1');
});

2.使用AMD的动态require:

1
2
3

require(['module1', 'module2'], function() {
  
});

上面的🌰中module1和module2就会被分割到独立的文件中去，而不会和入口文件打包在同一个文件中。

CommonChunks插件

提取代码中的公用模块，然后将公告模块打包到一个独立的文件中去，以便在其它的入口和模块中使用。

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

module.exports = {
  entry: {
    'main1': './main1.js',
    'main2': './main2.js'
  },
  output: {
    filename: 'bundle.[name].js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js', ['main1.js', 'main2.js'])
  ]
};

插件plugins选项中，引用webpack.optimize.CommonsChunkPlugin来提取公共模块，参数common.js表示公共模块的文件名，后面的数组元素与entry一一对应，表示要提取这些模块中的公共模块。

使用loader

webpack只能处理js文件，非js文件会被loader转换成js文件再require进来。
loader可以通过管道方式链式调用，每个loader可以把资源转换成任意格式并传递给下一个loader，但最后一个loader必须返回js。

module: {
  loaders: [{
    test: /\.jade$/, // 正则表达式，当文件路径匹配时启用
    loader: 'jade', // 指定loader，可以用字符串或数组
    exclude: /regexp/, // 排除部分文件
    query: {
      p1: '1'
    }
  }, {
    test: /\.css$/,
    loader: 'style!css' // 串联用法
    // loaders: ['style', 'css']
  }]
}

友情链接

webpack2入门教程
 webpack中关于样式的处理