首页 > 代码库 > 实例讲解webpack的基本使用第四篇

实例讲解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已经介绍完了,详细请下载代码:

 

实例讲解webpack的基本使用第四篇