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.项目目录结构如下
转载于:https://blog.51cto.com/suyanzhu/1900431