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.项目目录结构如下