[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

[js高手之路]深入浅出webpack教程系列索引目录：

• [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
• [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
• [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
• [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
• [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
• [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
• [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
• [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
• [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

我们接着上文，那么在上篇文章的最后，写到了css-loader的用法，如果你用心发现，就能看到我在style.css样式文件中写了一个这样的样式：

div {

transition: all ease 1s;

}

一、这是一个css3的过渡样式，我们知道，写css3的时候，需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件

安装postcss-loader: npm install postcss-loader --save-dev

安装autoprefixer: npm install autoprefixer --save-dev

 

在demo3目录下面新建一个postcss.config.js，代码如下：

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

意思是在postcss-loader中引入autoprefixer插件

修改webpack.config.js中css loader部分的配置:

var htmlWebpackPlugin = require('html-webpack-plugin');
let path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js',
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                include: [
                    path.resolve(__dirname, "src"),
                ],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.css$/,
                exclude: /(node_modules)/,
                use: [ 
                    'style-loader', {
                        loader : 'css-loader',
                        options : {
                            importLoaders : 1
                        },
                    },
                    'postcss-loader'
                ]
            }
        ]
    }
}

执行webpack打包，生成之后的css文件，就自动补充css3前缀了:

 

二、安装less-loader插件

如果我们在modal.js中直接引入modal.less，然后webpack打包，这样会报错

import './modal.less';
let modal = function(){
    return {
        'component-name' : 'modal'
    }
}
export default modal;

报错提示需要一个loader来处理， 我们可以安装less-loader了:

安装: npm install --save-dev less-loader less

安装完成之后，配置webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');
let path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js',
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                include: [
                    path.resolve(__dirname, "src"),
                ],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.css$/,
                exclude: /(node_modules)/,
                use: [ 
                    'style-loader', {
                        loader : 'css-loader',
                        options : {
                            importLoaders : 1
                        },
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }
                ]
            }
        ]
    }
}

当碰到less文件时，交给less-loader处理，然后交给css-loader处理，最后交由style-loader处理，然后执行webpack打包，modal.less文件中样式就被嵌入进来了

三、安装html-loader

安装命令: npm install html-loader --save-dev

modal.js文件引入modal.html

import './modal.less';
import tpl from './modal.html';
let modal = function(){
    return {
        'component-name' : 'modal',
        'tpl' : tpl
    }
}
export default modal;

main.js对demo3目录下的index.html文件插入模板(modal.html)

import modal from './components/modal.js';
import './css/style.css';
let App = function(){
    var oApp = document.querySelector("#app");
    var oModal = new modal();
    oApp.innerHTML = oModal.tpl;
}
new App();

 

demo3目录下的index.html文件，需要添加个div, id为app

webpack.config.js增加一项html-loader的配置

var htmlWebpackPlugin = require('html-webpack-plugin');
let path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js',
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                include: [
                    path.resolve(__dirname, "src"),
                ],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.css$/,
                exclude: /(node_modules)/,
                use: [ 
                    'style-loader', {
                        loader : 'css-loader',
                        options : {
                            importLoaders : 1
                        },
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }
                ]
            },
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader',
                }
            }
        ]
    }
}

然后执行webpack打包命令,就能看到modal.html被插入到id为app的div元素内了

 

四、修改模板后缀，为模板赋值

安装ejs-loader: npm install ejs-loader --save-dev

在components目录下新建一个文件（modal.ejs）:

<div class="modal">
    <div>这个组件的名字是:<%= name %></div>
    <% for( var i = 0; i < arr.length; i++ ){ %>
        <%= arr[i]%>
    <% } %>
</div>

modal.js引入ejs模板

import './modal.less';
// import tpl from './modal.html';
import tpl from './modal.ejs';
let modal = function(){
    return {
        'component-name' : 'modal',
        'tpl' : tpl
    }
}
export default modal;

main.js为ejs模板分配数据

import modal from './components/modal.js';
import './css/style.css';
let App = function(){
    var oApp = document.querySelector("#app");
    var oModal = new modal();
    // oApp.innerHTML = oModal.tpl;
    oApp.innerHTML = oModal.tpl({
        name : 'ghostwu',
        arr : [ 'ghostwu', '王朝', '马汉' ],
    });
}
new App();

webpack.config.js添加ejs-loader的支持:

var htmlWebpackPlugin = require('html-webpack-plugin');
let path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js',
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                include: [
                    path.resolve(__dirname, "src"),
                ],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.css$/,
                exclude: /(node_modules)/,
                use: [ 
                    'style-loader', {
                        loader : 'css-loader',
                        options : {
                            importLoaders : 1
                        },
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }
                ]
            },
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader',
                }
            },
            {
                test: /\.(ejs)$/,
                use: {
                    loader: 'ejs-loader',
                }
            }
        ]
    }
}

然后执行webpack打包命令，就能看见新的ejs模板中的数据被嵌入在id为app的div中