webpack 详解四：loader的使用

我们现在 打包的时候，仅仅可以引用js文件

假如，我现在引用的是css文件，该怎么一起打包呢 ？？？

这时候，就需要 引入loader了

步骤一：通过npm安装需要使用的loader

步骤二：在webpack.config.js中的modules关键字下进行配置

 

 

大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法

 

引入css和less文件

 

你这时候，引用了css文件，如果重新打包的话，会报错 提示必须依赖 对应的loader

那好 就来安装需要的loader

 

css-loader   安装命令   npm install --save-dev css-loder          安装完之后  打包发布    npm run build 

注意了：css-loader只负责加载css文件，但是并不负责将css具体样式嵌入到文档中。 这个时候，我们还需要一个style-loader帮助我们处理

style-loader   安装命令  npm install --save-dev style-loader      安装完之后  打包发布   npm run build

 

准备工作好了之后，在webpack.config.js  中配置信息，如下

 

 

 

 

 

第二个是 less文件

 

 

 

安装 less 和 less-loader

npm install --save-dev less-loader less

成功之后 打包发布  npm run build

 

准备工作好了之后，在webpack.config.js  中配置信息，如下

 

 

 

 

 

第三个是图片文件

上面 是在css文件中 引用图片

 

首先 安装 url-loader

命令是   npm install --save-dev url-loader

成功之后 打包发布  npm run build

 

下面是webpack.config.js 的配置

 

 

当图片的大小大于limit定义的值时，需要用到 file-loader

那我们 接着 安装就行，客官 往下看

安装命令    npm install --save-dev file-loader

再次执行打包命令的时候  对应的目录下面就会多出一个文件

 

但是发现图片并没有显示出来，这是因为图片使用的路径不正确

默认情况下，webpack会将生成的路径直接返回给使用者 但是，我们整个程序是打包在dist文件夹下的

所以这里我们需要在路径下再添加一个dist/

如下图片

 

 

 

 

 

 

那么就剩最后一种情况了

我们用webpack打包的时候，发现ES6的代码，并没有转成ES5

这就导致，一些浏览器不支持

 

so  怎么办 ？？？

安装一下 babel-core      babel-preset-es2015

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

 

然后配置一下 webpack.config.js 文件

 

• include 表示哪些目录中的 .js 文件需要进行 babel-loader

• exclude 表示哪些目录中的 .js 文件不要进行 babel-loader

 

重新打包 即可