webpack入门第五节：什么是Loader以及Loader的特性

什么是Loader以及Loader的特性

1:创建文件目录

2：创建HTML文件

<div class="layer">
    <div>this is a layer</div>
</div>

3：创建Less文件

.layer {
    width: 600px;
    height: 200px;
    background-color: yellow;
    > div {
        width: 400px;
        height: 100px;
        background-color: red;
    }
}

4：创建layer.js文件，导入tpl HTML文件，导出函数layer，

import tpl from './layer.html';
function layer () {
    return {
        name:'layer',
        tpl:tpl
    };
}

export default layer;

5：创建app.js模块，导入layer.js文件

import layer from './components/layer/layer.js';

const App = function () {
    console.log(layer);
}

new App();

6：修改webapck.config.js文件

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js',
    },
    plugins: [
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'index.html'//引用的H5模板
        })
    ]
}

7:loader是什么，通俗点说loader就是用来处理资源文件的

loader参考：https://www.webpackjs.com/concepts/loaders/

本来想自己写一下的，因为教程是老版本，新版写法以及改变，所以给了参考URL