Webpack入门教程三十一

141.webpack的css,less,scss,html,tpl,,js图片等模块使用,webpack.config.js配置内容如下

var htmlWebpackPlugin = require("html-webpack-plugin");
var path = require("path");
var webpack = require("webpack");

module.exports = {
	context:__dirname,
	entry:{
		main:'./src/app.js'
	},
	output:{
		path:'./dist',
		filename:'js/[name].bundle.js'
	},
	module:{
		loaders:[
			{
				test:/\.js$/,
				loader:'babel-loader',
				exclude:path.resolve(__dirname,'./node_modules/'),
				include:path.resolve(__dirname,'src'),
				query:{
					presets:['latest']
				}
			},
			{
				test:/\.css$/,
				loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
			},
			{
				test:/\.less$/,
				loader:'style-loader!css-loader!postcss-loader!less-loader'
			},
			{
				test:/\.scss$/,
				loader:'style-loader!css-loader!postcss-loader!sass-loader'
			},
			{
				test:/\.html$/,
				loader:'html-loader'	
			},
			{
				test:/\.tpl$/,
				loader:'ejs-loader'
			},
			{
				test:/\.(png|jpg|gif|svg)$/i,
				loader:'file-loader'
			}
		]
	},
	plugins:[
		new htmlWebpackPlugin({
			filename:'index.html',
			template:'index.html',
			inject:'body'
		}),
		new webpack.LoaderOptionsPlugin({
			options:{
				postcss:function(){
					return [require('autoprefixer')];
				}
			}
		})
	],

}

142.项目目录结构如下