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

這一篇來說解一下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已經介紹完了，詳細請下載代碼：