webpack搭建less的环境

webpack 搭建 less 环境

目录结构

初始化项目

npm init -king

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