Webpack2 完整踩坑教程(七)

本文基于NODEJS环境，nodejs的安装参考线上的流程：https://nodejs.org/en/ 。

Webpack的核心哲学思想
1.一切都是模块——就像JS文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件，并且会一直不停进行加载！所以Webpack通过大量的特性去分割你的代码，生成多个“bundle”片段，并且异步地加载项目的不同部分。

七.用url-loader加载图片（limit参数可以使用base64将小图片内联在代码中，减少http请求）

1.安装url-loader ： npm install url-loader –save-dev

2.修改webpack.config.js，将图片的loaders改为url-loader?limit=20000&name=images/[hash:12].[ext]，小于20k的图片将会以base64的形式内联在代码中，并且图片打包到images文件内，以哈希值命名。

loaders:[{
test: /\.js$/,
loaders: ["babel-loader"],
exclude: "./node_module/"
},{
test: /\.(png|jpg|gif)$/,
loaders: ["url-loader?limit=20000&name=images/[hash:12].[ext]"],
exclude: "./node_module/"
}]

3.输入npm run dev 测试，可以看到face.png已经被base64内联。Context.jpg文件名称也变成了hash名称。

此时测试图片的各种加载方式，都可以正常获取到。

<本节完>