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

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

If you want to configure less, please move: https://my.oschina.net/u/3797834/blog/1649270

Install the plugin

$ cnpm install extract-text-webpack-plugin --save-dev

webpack.config.js

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
    }
};

//配置css、less文件入口  涉及到后面的url-loader，对css也加入了方法，如果喜欢用css写，也可以编译过去
let ExtractTextPlugin = require('extract-text-webpack-plugin');

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: /\.css$/,
				loader: ExtractTextPlugin.extract({
					publicPath: "../../_build/",
				    fallback: "style-loader",
				    use: "css-loader"
				})
            },
            {
                test: /\.less$/,
				loader: ExtractTextPlugin.extract({
					publicPath: "../../_build/",
				    fallback: "style-loader",
				    use: [
	                    {
	                        loader: "css-loader"
	                    },
	                    {
	                        loader: "less-loader"
	                    }
	                ]
				})
            }
        ]
    }
    ,
 	plugins: [
        //生成css文件
  		new ExtractTextPlugin("./css/[name].css"),
 		//new一个模板出来测试一下
　　		new htmlwebpackplugin(get_html("home","main1"))
 	]
    
};
module.exports=export_html;	

can see, joined

//配置css、less文件入口  涉及到后面的url-loader，对css也加入了方法，如果喜欢用css写，也可以编译过去
let ExtractTextPlugin = require('extract-text-webpack-plugin');

and

,
            {
                test: /\.css$/,
				loader: ExtractTextPlugin.extract({
					publicPath: "../../_build/",
				    fallback: "style-loader",
				    use: "css-loader"
				})
            },
            {
                test: /\.less$/,
				loader: ExtractTextPlugin.extract({
					publicPath: "../../_build/",
				    fallback: "style-loader",
				    use: [
	                    {
	                        loader: "css-loader"
	                    },
	                    {
	                        loader: "less-loader"
	                    }
	                ]
				})
            }

The part of the previous article was naturally replaced ( the following part was replaced by the above )

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

Test: run webpack

Main.css is generated because the key name of the entry file (main.js) that introduces this less is main.

content of main.css

content of style.less

success!

 

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