Webpack 4.X 从入门到精通 - loader(五)
通过上一篇文章相信大家已经明白了loader
的概念。那这篇文章继续介绍一些常用loader
,并展现它的强大之处
处理less
less
与sass
的功能都一样,这里我就以less
为例,介绍其对应loader
的用法。less
的语法对于浏览器那是必需不认识的,要处理成浏览器认识的需要借助两个模块,一个less
和一个less-loader
安装
npm i less less-loader -D
创建文件
结构目录如下图:
index.css
内容如下:
#box{ width: 800px; height: 500px; border: 5px solid #999; color: #00f; /*background: green;*/ background: url(../images/img_01.jpg); }
index.js
内容如下:
import '../css/index.css'; //引入css文件 import '../less/less.less'; //引入less文件 import img from '../images/img_01.jpg'; const newImg=new Image(); newImg.onload=()=>document.body.appendChild(newImg); newImg.src=img;
less.less
内容如下
//如果对less不懂的同学,可以加我微信:kaivon @w:200px; @border:1px solid #f00; #box{ width: @w; border: @border; ul{ margin: 0; padding: 0; list-style: none; li{ height: 30px; background: #ccc; a{ color: #f00; &:hover{ //&为上一层选择器 color: blue; } } } } }
template.html
内容如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="box"> <p>我是陈学辉</p> <ul> <li><a href="#">red</a></li> <li><a href="#">green</a></li> <li><a href="#">blue</a></li> </ul> </div> </body> </html>
package.json
内容如下:
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^1.0.0", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "less": "^3.8.1", "less-loader": "^4.1.0", "mini-css-extract-plugin": "^0.4.1", "url-loader": "^1.0.1", "webpack": "^4.16.3", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.5" } }
webpack.config.js
内容如下:
const path=require('path'); const HtmlWebpackPlugin=require('html-webpack-plugin'); const MiniCssExtractPlugin=require('mini-css-extract-plugin'); module.exports={ entry:'./src/js/index.js', output:{ path:path.resolve(__dirname,'dist'), filename:'js/index.js' }, plugins:[ new HtmlWebpackPlugin({ title:'陈学辉', template:'./src/template.html', filename:'index.html' }), new MiniCssExtractPlugin({ filename:'css/index.css' }), ], devServer:{ host:'localhost', port:1573, open:true }, module:{ rules:[ { test:/\.css$/, use:[ { loader:MiniCssExtractPlugin.loader, options:{ publicPath:'../' } }, 'css-loader', ] }, { test:/\.less$/, use:[ //把less编译到css文件里 { loader:MiniCssExtractPlugin.loader, options:{ publicPath:'../' } }, 'css-loader', //注意顺序 'less-loader' ] }, { test:/\.(jpg|png|gif)$/, use:[ { loader:'url-loader', options:{ limit:5 * 1024, outputPath:'images' } } ] } ] } }
执行命令npm run dev
后浏览器里的内容正常显示,less
文件里的代码被编译成真正的css
代码,同时利用MiniCssExtractPlugin.loader
与css
一起合并到了index.css
文件里。
处理ES6与React
ES6
的语法大部分已经被各在浏览器所支持,当然除了万恶的IE
,但是部分新增API
很遗憾并不被浏览器所支持:比如内置对象新增的一些方法、Set
和Map
对象、Generator
等。React
与Vue
都支持一种语法叫JSX
,这种语法也是不被浏览器所支持的,对于这两个的处理我选择用Babel
,Babel
就是为了处理这哥俩而生的。关于Babel
的用法可以参考我录制的视频课程“NPM与模块化开发”
ES6
npm i babel-loader babel-core babel-preset-env babel-polyfill -D
- babel-loader : 处理ES6或者React的loader
- babel-core : babel运行的核心内容
- babel-preset-env : 根据代码自动选择版本(ES的版本有很多,env表示会自动选择版本)
- babel-polyfill : 用于处理新增的API
React
npm i react react-dom babel-preset-react -D
- react : react的核心内容
- react-dom : 处理react里的dom
- babel-preset-react : babel处理react的组件
index.js
内容如下
import '../css/index.css'; import '../less/less.less'; import img from '../images/img_01.jpg'; import 'babel-polyfill'; //处理ES6新增的API,需要导入这个模块 import React from 'react'; //react import ReactDOM from 'react-dom'; //react const newImg=new Image(); newImg.onload=()=>{ document.body.appendChild(newImg); }; newImg.src=img; //ES6 const fn=()=>console.log(123); //map对象 const map=new Map(); map.set('name','kaivon'); console.log(map); //Array.from方法 const strArr=Array.from('kaivon'); console.log(strArr); //Object.assign方法 const t1={a:1}; Object.assign(t1,{b:2},{c:3}); console.log(t1); //generator function* bear(){ console.log('熊大'); console.log('熊二'); } bear().next(); //react ReactDOM.render( <h2>这是JSX语法</h2>, document.getElementById('box') );
webpack.config.js
内容如下:
const path=require('path'); const HtmlWebpackPlugin=require('html-webpack-plugin'); const MiniCssExtractPlugin=require('mini-css-extract-plugin'); module.exports={ entry:'./src/js/index.js', output:{ path:path.resolve(__dirname,'dist'), filename:'js/index.js' }, plugins:[ new HtmlWebpackPlugin({ title:'陈学辉', template:'./src/template.html', filename:'index.html' }), new MiniCssExtractPlugin({ filename:'css/index.css' }), ], devServer:{ host:'localhost', port:1573, open:true }, module:{ rules:[ { test:/\.css$/, use:[ { loader:MiniCssExtractPlugin.loader, options:{ publicPath:'../' } }, 'css-loader', ] }, { test:/\.less$/, use:[ //把less编译到css文件里 { loader:MiniCssExtractPlugin.loader, options:{ publicPath:'../' } }, 'css-loader', //注意顺序 'less-loader' ] }, { test:/\.(jpg|png|gif)$/, use:[ { loader:'url-loader', options:{ limit:5 * 1024, outputPath:'images' } } ] }, { test:/\.js$/, use:[ { loader:'babel-loader', options:{ //env针对的是ES的版本,它会自动选择。react针对的就是react presets: ['env','react'] } } ], //exclude: /node_modules/, //不去检查node_modules里的内容,那里的js太多了,会非常慢 include:path.resolve(__dirname,'src/js'), //直接规定查找的范围 } ] } }
执行命令npm run build
后,把文件在IE里面打开看看,也是Ok的~
注意:如果用过Babel
的同学可能知道还需要创建一个.babelrc
的文件,那里面还要写一个对象。但是在这里却不需要,是因为babel-loader
的options
里已经把内容添上了,就不需要创建文件了
源码下载:https://pan.baidu.com/s/1KxoQ...
下一篇:Webpack 4.X 从入门到精通 - 第三方库(六)