美文网首页
webpack图片打包+ejs include其他模块

webpack图片打包+ejs include其他模块

作者: EnergyWu | 来源:发表于2018-04-18 16:30 被阅读0次

    对本菜鸟来说,webpack?哦,一个构建打包工具,感觉很高大上,用!!ejs?模板引擎,好像特别高大上,一定要用!!!小菜鸟心潮澎湃,在小项目中一结合,很好,很无奈,啊啊啊啊,遇到了好多问题。

    图片打包

    webpack.config.jsmodule 关于图片的配置:

    module: {
      rules: [
        {
          test: /\.(png|jp?g|gif|svg)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: 'public/images/[name].[hash].[ext]',
              },
            },
          ],
        },
      ]
    }
    

    css中图片正常引用即可:

    background-image: url(../../public/images/banner.jpg);
    

    js中需要通过模块化的方式引用图片:

    const gLogo = require('../../public/images/logo.png');
    

    html中引用的图片不会被打包,因为 webpackhtml 的处理并不友好,Google、Baidu了很久,参考了许多人的解决办法,比如说使用 html-withimg-loder,但是在我这边并不起作用(完全不知道为啥,暂时也不想知道为啥┑( ̄Д  ̄)┍)。

    <img src="../../public/images/logo.png">
    

    ejs登场,当当当~~~

    webpack.config.jsmodule 配置增加了ejs rules

    module: {
      rules: [
        {
          test: /\.ejs$/,
          loader: 'ejs-loader',
        },
      ]
    }
    

    对于图片打包,ejs有特殊的引用图片方式:

    <img src="<%= require('../../public/images/logo.png') %>">
    
    # 附赠ejs官网
    http://ejs.co/
    

    运行

    npm run build
    
    ## package.json
    "scripts": {
        "start": "echo TODO",
        "dev": "webpack-dev-server --open",
        "build": "webpack --mode production",
      },
    

    很好,图片打包成功。

    然鹅,在将模板公共部分抽离出来,如 headerfooter,再 include 到各页面时,webpack打包时会报错:

    ERROR: include is not defined
    

    官方推荐使用 ejs-compiled-loader 来引入其他的ejs模块:

    test: /\.ejs$/,
    loader: 'ejs-compiled-loade',
    

    but, ejs中图片不能打包,require也不行呢。

    经过“千挑万选”,看到了一个神器 underscore-template-loader ,这是一个可以一打二的loader,很赞!!!

    test: /\.ejs$/,
    loader: 'underscore-template-loader',
    
    <body>
      @require('../header/header.ejs')
      <div>
        <img src="../../public/images/bg.jpg">
      </div>
    </body>
    

    哇~,真是特别好呢,运行完全没有问题,还可以向其中传入对应的值:

    @require('../header/header.ejs',  {"name": "这是一个值"})
    

    当然,现在没问题不代表以后也没问题,暂时解决了ejs include问题,满足。

    未来会出现的问题,就交给未来会变的厉害的我吧。

    相关文章

      网友评论

          本文标题:webpack图片打包+ejs include其他模块

          本文链接:https://www.haomeiwen.com/subject/fnivkftx.html