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

 

重新打包 即可

posted @ 2019-12-26 10:25  某年某月某某人  阅读(332)  评论(0)    收藏  举报