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的环境

• webpack

• 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

创建webpack.config.js

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

配置 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']
        })
    ]
}

运行

npx webpack