webpack入门和实战(二)：全面理解和运用loader和plugins

您的阅读目录：

一、理解webpack加载器loader

二、理解less-loader加载器的使用

三、理解babel-loader加载器的使用

四、webpack命令行常见使用的操作

五、用webpack内置组件UglifyJsPlugin来压缩js和css

六、html-webpack-plugin(生成自定义html页面)

七、extract-text-webpack-plugin(独立打包样式文件)

八、webpack打包多个资源文件

九、webpack对图片的打包

回到顶部
一、理解webpack加载器loader
1.1、什么是loader？
webpack的设计理念，所有资源都是“模块”，webpack内部实现了一套资源加载机制。loaders 用于转换应用程序的资源文件，他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置)，例如你可以使用loader加载器可以快速编译预处理器(less,sass,coffeeScript)。
1.2、使用loader

安装loader

$ npm install xxx-loader --save-dev
加载器包括：style-loader、css-loader、less-loader、sass-loader、jsx-loader、url-loader、babel-loader、file-loader等等；各个加载器都有自己的功能，你可以根据项目需要来安装相应的加载器；

配置loader

安装完各个loader后，我们就需要配置一下我们的webpack.config.js，载入我们的loader。

// webpack.config.js
module.exports = {
entry: path.join(__dirname, 'src/entry.js'),
output: {
path: path.join(__dirname, 'out'),
publicPath: "./out/",
filename: 'bundle.js'
},
// 新添加的module属性
module: {
loaders: [
{test: /\.js$/, loader: "babel"},
{test: /\.css$/, loader: "style!css"},
{test: /\.(jpg|png)$/, loader: "url?limit=8192"},
{test: /\.scss$/, loader: "style!css!sass"}
]
}
};

我们主要看看module的loaders。loaders是一个数组，里面的每一个对象都用正则表达式，对应着一种配对方案。Webpack提供了一套加载器，比如css-loader,less-loader,style-loader，url-loader等，用于将不同的文件加载到js文件中，比如url-loader用于在js中加载png/jpg格式的图片文件；css/style loader用于加载css文件；less-loader加载器是将less编译成css文件；不同的处理器通过

!

分隔并串联起来。这里的loader是可以省略掉

-loader

这样的，也就是原本应该写成

style-loader!css-loader!sass-loader.

回到顶部
二、理解less-loader加载器的使用
我们先来理解下less-loader加载器，其他的sass-loader也是一个意思，less-loader加载器是把css代码转化到style标签内，动态插入到head标签内；
我们先来看看我项目的结构如下：

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
entry: {
"index": SRC_PATH + "/js/index.js"
},
output: {
filename: "[name].js",
path: BUILD_PATH
},
module: {
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{
test: /\.less$/,
loader:'style!css!less?sourceMap'
},
{
test: /\.js$/,
loader: 'babel'
},
{
test: /.(png|jpg)$/,
loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'//这种写法主要是用来设置图片的存放路径及图片的生成名字如，build/images/43243234234.1.png
}
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app',
filename: 'index.html',
inject: true,
hash: true
})
]
};

View Code
执行webpack后，在浏览器中查看显示效果，如图所示：



至此运用url-loader实现图片打包，并且能够在css中正确运用打包后的图片。

webpack对图片的打包的源码地址为：http://download.csdn.net/detail/wdlhao/9613223