webpack学习笔记,html模板及图片处理(七)

Open 这个 分享 由 lemontea 发布于 2017-08-09 · 1188 阅读 0 回复
lemontea 评论于 2017-08-09

1、安装html-loader和file-loader、url-loader

npm install html-loader --save-dev
npm install file-loader --save-dev
npm install url-loader --save-dev

html-loader 用于html模板,file-loader和url-loader是用来处理图片的。

2、在webpack.config.js中配置

module: {
        loaders: [
            {
                test: /\.html$/,
                loader: 'html-loader',
                exclude: path.resolve(__dirname, './node_modules/'),
                // include:  path.resolve(__dirname, './src/components/'),
            },
            {
                // 不区分大小写
                test: /\.(png|jpg|jpeg|gif|svg)$/i,
                // loader: 'file-loader',
                loader: 'url-loader',
                exclude: path.resolve(__dirname, './node_modules/'),
                 query: {
                     limit: 20000,
                     // [ext] [name] [path] [hash] [hashtype] [n]....
                     name: 'assets/[name]-[hash].[ext]'
                 }
            }
        ]
    }

3、在js中引入html目标并使用

import tpl from './layer.html'

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

export default layer;

layer.html

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

在app.js将模板渲染到dom元素中

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

const App = function () {
    var app = document.getElementById('app')
    var layer = new Layer()
    app.innerHTML = layer.template
}

new App()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack leran</title>
</head>
<body>
    <div id="app"></div>
    <img src="src/assets/logo-min.png" alt="">
</body>
</html>

file-loader和url-loader不管在html还是less文件中引入图片,只要使用当前的相对路径都可以被转换到编译后的正确路径,无需担心路径不对。

另外file-loader是使用http方式加载图片,而ulr-loader与他不一样的就是,可以将小于limit值的图片转成base64编码。 file-loader好处就是,减少代码体积,可以被浏览器缓存,而url-loader则会增加编译后的文件体积。