1、配置postcss-loader，這是我的配置檔案：

var htmlWebpackPlugin = require('html-webpack-plugin');//這個外掛可以幫助生成 HTML 檔案
var path = require('path');
var webpack = require('webpack');

module.exports = {
    context:__dirname,   // __dirname表示當前路徑，context入口檔案，絕對路徑
    entry:'./src/app.js',
    output:{
        path:'./dist/js'
 
,
        filename:'[name].bundle.js',
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude: path.resolve(__dirname,'node_modules'),//排除node_modules
                include:path.resolve(__dirname,'src'),//將相對路徑解析成絕對路徑
 

                query:{
                    presets:['latest']
                }
            },
            {
                test:/\.css$/,
                loader:'style-loader!css-loader?importLoaders=1!postcss-loader'  //?importLoaders=1處理css檔案中import進來的css檔案，使其支援postcss-loader
                /*感嘆號是串聯兩個loader的橋樑,
                css-loader處理完的css會經過style-loader插入到html程式碼中*/
 

            },
            {
                test:/\.less$/,
                loaders: [
                  'style-loader',
                  'css-loader?importLoaders=1',
                  'postcss-loader',
                  'less-loader'
                ]
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            inject:'body'
        }),
        //配置postcss
        new webpack.LoaderOptionsPlugin({
            test:/\.css$/,
            options:{
                postcss:[
                    require('autoprefixer')({
                        browsers:['last 5 versions']
                    })
                ]
            }
        })
    ]   
}

2、在webpack打包less檔案時，引入了postcss-loader：

module.exports = {
    loaders =[
        {
            test:/\.less$/,
            loaders: [
                 'style-loader',
                 'css-loader?importLoaders=1',
                 'postcss-loader',
                 'less-loader'
               ]
        }
    ]
}

但是執行webpack後一直報這樣的錯：

這是我的layer.less檔案：

.layer{
    width:600px;
    hieght:200px;
    background-color: green;
    >div{
        width: 400px;
        height: 200px;
        background-color: yellow;
    }
    .flex-div{
        display: flex;
    }
}

這是我的layer.js檔案：

import './layer.less';

function layer(){
    return {
        name:'layer',
        tpl:tpl
    };
}

export default layer;

在入口檔案app.js中引用了layer.js從而進行打包，發現這個錯誤一直存在，很糾結。。。
後來在慕課網友的幫助下，解決了問題：
在根目錄下新建postcss.config.js，裡面寫上：

module.exports = {
    plugins: [
        require('autoprefixer')({browsers:['last 5 versions']})
    ]
}

再執行webpack，就ok了！

原來這是webpack2的新寫法，真會玩。。。還好機智的我看了官網的api文件：

文件指出，我們可以將不同的配置放在不同的目錄中。例如，全域性配置project/postcss.config.js並覆蓋其外掛project/src/legacy/postcss.config.js。

另外loader的順序是style-loader!css-loader!postcss-loader!less/sass-loader
這個順序很重要，webpack2開始不支援style!css!postcss的寫法，末尾必須加-loader。

在模板中載入圖片，如果使用絕對路徑沒問題，但是相對路徑的話就會載入不出圖片，在layer.tpl中程式碼：

<div class="layer">
    <img src="'../../assets/demo1.jpg">
    <div>This is a }<%= name %> layer.</div>
    <% for(var i=0;i<arr.length;i++){ %>
        <%= arr[i] %>
    <% } %>
</div>

可以使用下面的方法載入相對路徑圖片：

<div class="layer">
    <img src="${ require('../../assets/demo1.jpg') }">
    <div>This is a }<%= name %> layer.</div>
    <% for(var i=0;i<arr.length;i++){ %>
        <%= arr[i] %>
    <% } %>
</div>