webpack打包原理入门探究（六）less|sass-loader初探

公众号---人生代码

发布于 2020-06-11 10:40:39

8920

发布于 2020-06-11 10:40:39

文章被收录于专栏：人生代码人生代码

webpack打包原理入门探究（五）css-loader初探

webpack打包原理入门探究（五）loader初探（二）

webpack打包原理入门探究（五）loader初探（一）

webpack打包原理入门探究（四）插件探究（下）

webpack打包原理入门探究（四）插件探究（上）

webpack打包原理入门探究（三）入口探究

webpack打包原理入门探究（二）基本配置

webpack打包原理入门探究（一）

今天来学习一下 webpack 如何处理 less 样式

你需要安装一下 less,less-loader

npm install less less-loader --save-dev

我们在 styles/less/common.less

html,body {
    height: 100px;
    width: 100px;
    .layer {
        background: red;
    }
}

在 src/app.js 引入 src/styles/less/common.less

import './styles/css/common.css'
import './components/layer/layer.scss'
import './styles/less/common.less'
import layer from './components/layer/layer.js'

const App = () => {
    console.log("layer==>", layer)
}

new App()

配置一下 webpack.app.config.js

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: resolve('src/app.js'), // 指定入口文件
    output: {
        path: resolve('dist'),
        // filename: '[name]-[hash].js'
        filename: "js/[name].bundle.js",
        // publicPath: ''
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: resolve('node_modules'), //指定排除的范围,
                include: resolve('src')
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!postcss-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!postcss-loader!sass-loader'
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!postcss-loader!less-loader'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "index.html", // 生成 dist/a.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
        })
    ]
}

我们运行一下 npm run webpack.app