Home > Developer > Web Develop
loaderloaderlessAs with sass the function, here I will take the less example to describe its corresponding loader usage. lessThe syntax for the browser that is necessary to do not know, to deal with the browser to understand the need to use two modules, one less and aless-loader
Create a fileNPM I less less-loader-d
Structure catalogs such as:index.cssThe contents are as follows:
#box{ width: 800px; height: 500px; border: 5px solid #999; color: #00f; /*background: green;*/ background: url(../images/img_01.jpg);}
index.jsThe contents are as follows:
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.lessThe contents are as follows
//如果对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.htmlThe contents are as follows:
<!DOCTYPE html>
package.jsonThe contents are as follows:
{ "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.jsThe contents are as follows:
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 (__d Irname, ' dist '), filename: ' Js/index.js '}, plugins:[new Htmlwebpackplugin ({title: ' Chen Xuihui ', Template: './src/template.html ', filename: ' index.html '}, new Minicssextractplugin ({ FileName: ' Css/index.css '}),], devserver:{host: ' localhost ', port:1573, open:tr UE}, module:{rules:[{test:/\.css$/, use:[{ Loader:MiniCssExtractPlugin.loader, options:{Publ Icpath: '. /'}, ' Css-loader ',]}, {test:/\. less$/, use:[//To compile less into CSS files {LOADER:MINICSSEXTRACTPLUGIN.L Oader, options:{publicpath: '. /'}, ' Css-loader ',//note order ' Less-loade R ']}, {test:/\. ( Jpg|png|gif) $/, use:[{loader: ' Url-loader ', options:{Limit:5 * 1024x768, OutputPath: ' Images ' } } ] } ] }}After executing the command, the contents of the npm run dev browser are displayed normally, and less the code in the file is compiled into real css code, which is MiniCssExtractPlugin.loader combined with the css index.css file.
Dealing with ES6 and reactES6Most of the syntax has been supported by the browser, of course, in addition to the evil IE , but some of the new API regret is not supported by the browser: such as the built-in object new methods, Set and Map objects, and Generator so on. Reactand Vue both support a syntax called JSX , this syntax is also not supported by the browser, for these two processing I choose to use Babel , Babel is to deal with the two brothers born. Babelrefer to my recorded video course "NPM and modular development" for usage
BSQ
NPM i babel-loader babel-core babel-preset-env babel-polyfill-d
- Babel-loader: Handling the loader of ES6 or react
- Core content of Babel-core:babel operation
- Babel-preset-env: Automatically select version according to the code (there are many versions of ES, env indicates that the version is automatically selected)
- Babel-polyfill: Used to process the new API
React
NPM I react react-dom babel-preset-react-d
- Core content of React:react
- React-dom: Handling Dom in react
- Babel-preset-react:babel Handling components for react
index.jsThe contents are as follows
import ‘../css/index.css‘;import ‘../less/less.less‘;import img from ‘../images/img_01.jpg‘;import ‘babel-polyfill‘; //处理ES6新增的API，需要导入这个模块import React from ‘react‘; //reactimport ReactDOM from ‘react-dom‘; //reactconst newImg=new Image();newImg.onload=()=>{ document.body.appendChild(newImg);};newImg.src=img;//ES6const 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);//generatorfunction* bear(){ console.log(‘熊大‘); console.log(‘熊二‘);}bear().next();//reactReactDOM.render(
webpack.config.jsThe contents are as follows:
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 (__d Irname, ' dist '), filename: ' Js/index.js '}, plugins:[new Htmlwebpackplugin ({title: ' Chen Xuihui ', Template: './src/template.html ', filename: ' index.html '}, new Minicssextractplugin ({ FileName: ' Css/index.css '}),], devserver:{host: ' localhost ', port:1573, open:tr UE}, module:{rules:[{test:/\.css$/, use:[{ Loader:MiniCssExtractPlugin.loader, options:{Publ Icpath: '. /'}, ' Css-loader ',]}, {test:/\. less$/, use:[//To compile less into CSS files {LOADER:MINICSSEXTRACTPLUGIN.L Oader, options:{publicpath: '. /'}, ' Css-loader ',//note order ' Less-loade R ']}, {test:/\. ( Jpg|png|gif) $/, use:[{loader: ' Url-loader ', options:{Limit:5 * 1024x768, OutputPath: ' Images ' }}]}, {test:/\.js$/, use:[ {loader: ' Babel-loader ', options:{//env is for the ES version, it will automatically select 。 React is react presets: [' env ', ' React '}} ],//exclude:/node_modules/,//Do not check the contents of Node_modules, there is too many JS, it will be very slow INCLUDE:PA Th.resolve (__dirname, ' src/js '),//Direct scoping of the Lookup}]}}
After executing the command npm run build , put the file in IE open to see, is OK ~
Note: If you have used a babel classmate who might know that you still need to create a .babelrc file, write an object in it. But there is no need, because babel-loader the options content has been added, you do not need to create a file
SOURCE Download: Https://pan.baidu.com/s/1KxoQJGgJdQqtzS_IGNrmuA
Filed under: Webpack 4.X from beginner to proficient-splitchunks (Fri)
Webpack 4.X from beginner to proficient-loader (Fri)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
