Webpack 笔记一：配置文件介绍
虽然还是那一句，Webpack和Browserify比，我更喜欢Browserify，因为Webpack需要配置文件，需要学习成本。相比之下，Browserify相对简单实用。Webpack需要相对复杂的配置文件。
整个webpack的难点在于配置文件，只要我们掌握的webpack的配置文件规格，一切都将引刃而解。在此，我们一步步揭秘常用的几款配置文件。
css-loader 和 style-loader
该用途即是将css或者style直接引入，并且与js一同打包。
配置文件写法
{
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
// => "jade" loader is used for ".jade" files
{ test: /\.css$/, loader: "style!css" },
// => "style" and "css" loader is used for ".css" files
// Alternative syntax:
{ test: /\.css$/, loaders: ["style", "css"] },
]
}
}
命令行写法
$ webpack --module-bind jade --module-bind 'css=style!css'
babel-loader
结合全新的es6和es2015，通过webpack将js代码进行转换。当然，你也可以直接用babel转换，但是考虑到效率的问题，webpack+babel必然是你的首选。
安装
npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev
配置文件写法
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
file-loader
将常用静态文件例如图片，通过webpack进行分类打包。
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
bootstrap与webpack的坑
如果你使用webpack，同时想使用webapck进行打包。字体文件的格式导致错误，css-loader不能满足bootstrap的打包。两种解决方案：
- bootstrap-loader
- Errors loading ionicons.css #18
第一种需要学习成本，请自行研究。第二种较为简单。只需要使用file-loader将字体文件打包。
{test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader" }
url-loader
这个loader的工作原理和file-loader类似，但是会返回一个数据Url小于某个字节大小限制（默认是没有限制）。
如果超过限制，则会使用file-loader，所有的查询参数会传过去。
配置文件写法
{
test: /\.png$/,
loader: "url-loader",
query: { mimetype: "image/png" }
}
或者
{
test: /\.png$/,
loader: "url-loader?mimetype=image/png"
}
命令行写法
webpack --module-bind "png=url-loader?mimetype=image/png"
react-hot-loader
专门针对react的hot-reloading技术，大大提升react开发的效率。
json-loader
通过webpack直接将json对象打包。
配置文件写法
{
test: /\.json$/,
loader: 'json-loader'
}
html-loader
将静态网页html打包，主要是针对image内的文件地址。
小结
还有各种各样的plugins等待你们自己挖掘。
参考
- webpack文档
- 一小时包教会 —— webpack 入门指南
转载，请表明出处。总目录前端经验收集器