這一篇來講解一下webpack的loader的使用，用webpack打包文件，css，img，icon等都需要下載安裝對應的loader文件，並且寫好配置項，才可以進行打包，廢話不多說，直接開始實戰。

先建立一個components文件夾來存放組件，下面新建一個layer文件夾來存放layer這個組件相關的代碼。

layer文件建立如下相關的文件：

然後在webpack.config.js文件添加如下配置：

建立一個app.js打包的入口文件：

在這個文件中將組件的模塊都引用進來。

然後建立一個loader.html模板文件。

現在開始進行打包，發現會報錯，因為我們在app.js的入口文件裏面引用了css文件。

在layer組件的laye.js裏面也引用了less文件，在less文件裏面又引用了img圖片以及css3樣式，以及一個模板文件layer.tpl

具體請看layer.js的代碼。

要正確的打包這些東西我們就需要安裝對應的loader文件。

首先安裝打包css的loader 執行：npm install css-loader style-loader --save-dev

然後寫上配置代碼：

發現後面有一個postcss-loader這個是一個css後處理的loader結合autoprefix插件使用可以添加css3的兼容前綴。

需要先安裝這個loader：npm install postcss-loader --save-dev 然後再安裝autoprefixer插件：npm install autoprefixer --save-dev。

安裝之後需要在webpack.config.js文件下添加如下代碼：加在裏面

還需要在前面引用webpack才可以正確解析：

打包之後發現自動生成了：css3前綴

安裝less-loader:npm install less-loader --save-dev

添加less的配置

安裝es6語法bable解析器：npm install babel-loader babel-core --save-dev

在安裝最新版本的latest版本解析器：npm install babel-preset-latest

然後建立一個.babelrc的babel解析配置文件，裏面添加如下代碼：

再在webpack.config.js文件加上js的解析配置：

安裝項目中處理模板文件的loader：npm install html-loader --save-dev

ejs-loader解析模板數據 npm install ejs-loader --save-dev

安裝打包loader：npm install file-loader --save-dev來打包圖片文件。

到此基本的loader已經介紹完了，詳細請下載代碼：

實例講解webpack的基本使用第四篇