webpack configuration (step 5: less/css articles (basic articles))

Project files about webpack: https://gitee.com/codeFarmerPen/webpack

Download the plugin:

less plugin installation

$ cnpm install less  less-loader --save-dev

By the way, the css plugin is also installed

$ cnpm install css-loader style-loader --save-dev

webpack.config.js loaders added

,
            {
			    test: /\.less$/,
			    use: [
			        'style-loader',
			        'css-loader',
			        'less-loader' 
			    ]
			}

webpack.config.js final file:

const path = require('path');
let htmlwebpackplugin = require('html-webpack-plugin');//引入html-webpack-plugin插件 
let get_html = function(name,chunk){//封装
    return {
        template: './app/ejs/generate/'+ name + '.ejs',
        filename:  name+ '.html',
        chunks  : ['main',chunk||null],//这里引入公共文件main.js，另外一个文件按需引入，当然也可以把这个的值设为数组，传入function的第二个值用数组就行
        chunksSortMode: 'manual',//将chunks按引入的顺序排序
        inject  : true,//所有JavaScript资源插入到body元素的底部
        hash    : true,
		xhtml	: true
    }
};

let export_html= {
    entry:  {
    	main:__dirname+"/app/js/main.js",//入口文件
    	main1:__dirname+"/app/js/main1.js",//入口文件
    },
    output: {
        path: __dirname+"/_build/",
        filename: "js/[name].js",//产出文件，name根据entry的入口文件键名定
    },
    module: {
        loaders: [
			{
			    test: /(\.jsx|\.js)$/,
			    loader: 'babel-loader',
			    query: {
			      presets: ['es2015']
			    }
			}
            ,
            { 
            	test: /\.ejs$/, 
            	loader: 'ejs-loader?variable=data' 
            },
            {
			    test: /\.less$/,
			    use: [
			        'style-loader',
			        'css-loader',
			        'less-loader' 
			    ]
			}
        ]
    }
    ,
 	plugins: [
 		//new一个模板出来测试一下
　　		new htmlwebpackplugin(get_html("home","main1"))
 	]
    
};
module.exports=export_html;	

Directory Structure:

Create a new less directory under the app directory, and create a new style.less file under it

style.less

@f:white;
p{
    color: red;
}
p{
    a{
        color: @f;
    }
}

app/js/main.js

require("../less/style.less");

Makefile:

This line can be found in _build/js/main.js

// module
exports.push([module.i, "p {\n  color: red;\n}\np a {\n  color: white;\n}\n", ""]);

It means that it has been compiled into css and put into the generated file of main.js.

Let's open _build/home.html with a browser

It was found that the font turned red and the compilation was successful! The next advanced article will use plugins to separate the CSS generated by less

 

Below are all my links about webpack config

webpack configuration (first step: configuration prerequisites): https://my.oschina.net/u/3797834/blog/1648528

Webpack configuration (Step 2: Getting Started): https://my.oschina.net/u/3797834/blog/1648578

webpack configuration (the third step: ES6): https://my.oschina.net/u/3797834/blog/1649033

webpack configuration (step 4: html article (basic article)): https://my.oschina.net/u/3797834/blog/1649157

webpack configuration (step 4: html article (advanced article)): https://my.oschina.net/u/3797834/blog/1649196

webpack configuration (step 4: html article (template article)): https://my.oschina.net/u/3797834/blog/1649246

webpack configuration (step 5: less/css articles (basic articles)): https://my.oschina.net/u/3797834/blog/1649270

webpack configuration (step 5: less/css articles (advanced articles)): https://my.oschina.net/u/3797834/blog/1649288

webpack configuration (step 5: less/css article (url picture article)): https://my.oschina.net/u/3797834/blog/1649302