Webpack 解析css和less

Webpack 解析css

css-loader: 加载css对象，并转换成commonjs对象
style-loader: 将样式写入style标签并插入到header中

  1. 安装loader
npm i style-loader@0.23.1 css-loader@2.1.1 -D
  1. 配置webpack

loader是一个函数
同一个loader里面，不同的use从以compose(组合)方式从右到左执行(与之对应的是pipe管道流，从左到右执行)

'use strict';

const path = require('path');

module.exports = {
    // 入口 指定入口文件
    entry: {
        reactComp:'./src/react-comp.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    // 配置babel解析ES6
    module:{
        rules:[
            {
                test:/\.js$/,
                use:'babel-loader'
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader', // 再将样式插入到style标签中
                    'css-loader' // 先将css转换成commonjs
                ]
            }
        ]
    },
    // 生成模式还是开发模式
    mode: 'production'
};
  1. 组件引入样式
"use strict"
import React from 'react'
import ReactDOM from 'react-dom'
import './react-comp.css'
class Search extends React.Component{
    render(){
        return (
            <div className='search-text'>search text</div>
        )
    }
}
ReactDOM.render(<Search />,document.getElementById('root'))
  1. 打包
npm run build
  1. 引入打包后的文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./reactComp.js" type="text/javascript"></script>
</body>
</html>

Webpack 解析less

在以上解析css的loader的基础上再加一个loader - less-loader
less-loader用于将less文件编译成css文件
再调用css-loader将css文件编译成commonjs形式
最后调用style-loader将样式写入style标签注入到header标签中

  1. 安装loader
npm i less-loader@5.0.0 less@3.9.0 -D
  1. 配置webpack
'use strict';

const path = require('path');

module.exports = {
    // 入口 指定入口文件
    entry: {
        reactComp:'./src/react-comp.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    // 配置babel解析ES6
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.less$/,
                use:[
                    'style-loader', // 再将样式插入到style标签中
                    'css-loader', // 将css转换成commonjs
                    'less-loader' // 将less文件转换成css文件
                ]
            }
        ]
    },
    // 生成模式还是开发模式
    mode: 'production'
};
  1. 组件引入less并打包
"use strict"

import React from 'react'
import ReactDOM from 'react-dom'
import './react-comp.less'
class Search extends React.Component{
    render(){
        return (
            <div className='search-text'>search text</div>
        )
    }
}

ReactDOM.render(<Search />,document.getElementById('root'))

相关版本文件

package.json

{
  "name": "02beginning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": " webpack "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"
  }
}

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}
posted @ 2021-09-24 00:24  IslandZzzz  阅读(179)  评论(0)  编辑  收藏  举报