webpack构建React应用五：使用webpack Loaders 模块加载器(三)

url-loader

在 webpack 中引入图片需要依赖 url-loader 这个加载器。安装依赖：

npm install file-loader url-loader --save-dev

在webpack.config.js文件中配置如下：

{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}

test属性代表可以匹配的图片类型，除了png、jpg之外也可以添加gif等，以竖线隔开即开。

loader后面limit字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成base64码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用，name 字段来指定图片打包的目录与文件名。

自动补全css3前缀

这里我们会用到插件autoprefixer。官方是这样说的：Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website，也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。

安装:

npm install autoprefixer postcss-loader --save-dev

在webpack.config.js文件中配置如下：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
module.exports = {
entry: path.resolve(__dirname, "./src/entry.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, "src")
]
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader!postcss-loader"})
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader!less-loader!postcss-loader"})
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/index.html"),
inject: 'body'
}),
new ExtractTextPlugin("style.css"),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer({browsers:['last 2 versions']})]
}
})
],
}

到这里，一个单页应用的基本配置差不多就齐活了！更为详细的配置，可以参考官方文档：https://webpack.js.org/configuration/