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
重新打包 即可