webpack5less总结

最新推荐文章于 2024-04-23 11:55:25 发布

Qijiji99

最新推荐文章于 2024-04-23 11:55:25 发布

阅读量639

点赞数

本文链接：https://blog.csdn.net/Qijiji99/article/details/119010957

版权

webpack 搭建 less 环境

1：安装依赖

less less的运行环境
less-loader 将less编译为css代码的loader
css-loader 让js解析css代码 mport/require
style-loader 把css插入到dom中
mini-css-extract-plugin 将css离去单独的文件
html-webpack-plugin 打包编译html文件
babel-loader 在webpack中使用bable工具
@babel/presets-env babel的预设
@babel/core babel的环境
wepack
webpack-cli

命令：

npm i --save-dev less less-loader css-loader style-loader mini-css-extract-plugin html-webpack-plugin babel-loader @babel/presets-env @babel/core webpack webpack-cli

2：创建 webpack.config.js

module.exports= {
    mode:'development',
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    }
}

3:配置 loader

const path = require('path');
const MineCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports= {
    mode:'development',
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules:[
            {
                test:/\.less$/i,
                exclude: /(node_modules|bower_components)/, 
                use:[
                    MineCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    plugins:[
        new MineCssExtractPlugin({
            filename:'[name].css'
        }),
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'index.html',
            chunks:['main']
        })
    ]
}