執行個體講解webpack的基本使用第四篇

標籤：為我   log   css3   auto   prefix   建立   下載安裝   latest   loader   

這一篇來講解一下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的基本使用第四篇