webpack踩坑记

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>