webpack 学习4 使用loader 以及常用的一些loader
webpack本身只支持处理JavaScript,其他的文件,如css img less是不识别的,所以才会有loader这个东西,它就是可以使webpack能够处理其他非js文件的拓展程序
首先我们在入口文件中引入css文件,我这里是index.js
import "./style.css"
然后下载
npm i style-loader -s -d npm i css-loader -s -d
为什么要使用style-loader 先介绍以下这两个的用处
style-loader:使用<style>
将css-loader内部样式注入到我们的HTML页面
css-loader
: 加载.css文件
然后在webpack.config中配置
const path = require("path");//这个是node.js自带的路径模块 可以有效的防止不同机器上路劲出现差异问题 module.exports = { mode: \'production\', entry: { app: __dirname + \'/src/index.js\' }, output: { path: __dirname + \'/build\',//指定输出文件 的地址 filename: "./js/[name].js",//以入口文件的key值作为输入文件名 列入entry中是{app:"./src/index.js"} 那么对应的输出文件就是 app.js,这个只能是在entry参数为object时使用 }, module: {//模块 rules: [//规则 // { // test: /\.css$/,//正则表达式,当匹配到.css结尾的文件时。使用以下loader // use: [ // \'style-loader\',//再使用 style-loader 顺序从下往上 // \'css-loader\'//先使用 css-lloader // ] // }, //也可以配置使用 推荐 { test: /\.css$/, use: [ \'style-loader\', { loader: \'css-loader\', options: { modules:true,//开启css模块化 } } ] } ] } }
loader的基本使用就是这样。这样打包之后,发现所有的css样式,都添加到了html页面的<style>标签里面,这样在开发模式下是ok,但是生产模式下就不友好了,我们是不是可以将css提取出来放在外部文件中呢,答案是当然的。使用插件就可以,下一章,会有详细的记录。
常用的loader有
图片处理
file-loader
url-loader
npm i file-loader -s -d npm i url-loader -s -d
在配置文件中配置
const path = require("path");//这个是node.js自带的路径模块 可以有效的防止不同机器上路劲出现差异问题 const webpack = require("webpack"); module.exports = { mode: \'production\', entry: { app: __dirname + \'/src/index.js\' }, output: { path: __dirname + \'/build\',//指定输出文件 的地址 filename: "./js/[name].js",//以入口文件的key值作为输入文件名 列入entry中是{app:"./src/index.js"} 那么对应的输出文件就是 app.js,这个只能是在entry参数为object时使用 }, module: {//模块 rules: [//规则 { test: /\.css$/,//正则表达式,当匹配到.css结尾的文件时。使用以下loader use: [ \'style-loader\',//再使用 style-loader 顺序从下往上 \'css-loader\'//先使用 css-lloader ] }, { test: /\.(png|jpg|gif)$/, use: [ { loader: \'file-loader\', options: { name: \'[hash].[ext]\',//定义打包后的图片文件名 outputPath: "/img2",//定义打包后的图片放在那个目录,默认是/dist下(这里的dist是默认的输入地址,具体由output中的path指定) publicPath: "./img",//在编写css代码的时候你使用的是background: url(\'./src/img0.png\') 那么在打包之后输出的css代码就是background: url(\'builde_img.png\'),而你输入的 //文件在img/builde_img_png下,这样肯定是找不到的,所以要给它配置一个发布地址,如例子,在打包后的输出的css文件中就是background: url(\'./img/builde_img.png\') } } ] }, { test: /\.(png|jpg|gif)$/, use: [ { loader: "url-loader",//url-loader其实和file-loader一样都是又来处理图片等文件的loader,不过url-loader有一个功能,就是可以将指定的小的图片, //转化base64,而大于这个大小的图片,则有file-loader处理,所以url-loader依赖与file-loader,经常的是将两个组合使用,注意使用url-loader的时候, // 不要也不需要在rules中配置file-loader,否则会出现冲突导致转化失败 options: { limit: 300000,//最小3k的图片,将转化成base64 } } ] } ] } }
以上就是常用loader使用的一个例子,常用loader还有很多,像是处理less的less-loader,html的html-loader等,使用方法都是大同小异,只是optins不同罢了,详情可以去webpack-loader去了解,本章不在叙述,下一章,记录webpack-plugin的使用