如何使用 html-webpack-plugin + twig-loader 包含图像？

Question

我想像简单标签一样在我的树枝模板中包含一个图像，但它不想包含。对于构建，我使用 HtmlWebpackPlugin 和 twig-loader；但是如果我对 html-loader 和 html 模板做同样的事情 - 它工作正常。如何正确使用 twig-loader？

我的 webpack 配置：

const path              = require( 'path' );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );

const PATHS = {
    source: path.join( __dirname, './source' ),
    build:  path.join( __dirname, './build' )
};

module.exports = {
    entry:   `${ PATHS.source }/index.js`,
    output: {
        path:     PATHS.build,
        filename: 'webpack.bundle.js'
    },
    module:  {
        rules: [
            {
                test:   /\.twig/,
                loader: 'twig-loader'
            },
            {
                test: /.*\.(gif|png|jpe?g)$/i,
                use:  [
                    {
                        loader: 'file-loader?name=[name].[ext]'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin( {
            filename: 'index.html',
            template: `${PATHS.source}/index.twig`,
        } )
    ],
};

我的树枝模板：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="./chuck-norris.jpg" alt="">
</body>
</html>

我的package.json:

{
  "name": "htmlWebpackPlugin-twigLoader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "evisotskiy",
  "license": "ISC",
  "devDependencies": {
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "twig-loader": "^0.3.1",
    "webpack": "^3.6.0"
  }
}

我的项目结构：

.
├── webpack.config.js
├── package.json
├── source
|   ├──index.twig
|   ├──index.js (empty)
|   ├──chuck-norris.jpg

当我执行 npm 运行 build 时，我得到 dir:

├── build
|   ├──index.html
|   ├──webpack.bundle.js

不带卡盘-norris.jpg

当我使用 html-loader 而不是 twig-loader 和 html-template 而不是 twig-template - 图像构建良好。但是对于我的项目，我需要使用树枝模板。如何正确使用 twig-loader？

Answer 1

我找到了解决办法。我没有直接将 .twig 文件作为模板传递给 HtmlWebpackPlugin，而是作为模板传递了一个 .js 文件，其中包含一个 .twig 文件和图像，并将图像传递给树枝模板作为变量。现在项目看起来像这样：

我的 webpack 配置：

const path              = require( 'path' );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );

const PATHS = {
    source: path.join( __dirname, './source' ),
    build:  path.join( __dirname, './build' )
};

module.exports = {
    entry:   `${ PATHS.source }/index.js`,
    output: {
        path:     PATHS.build,
        filename: 'webpack.bundle.js'
    },
    module:  {
        rules: [
            {
                test:   /\.twig$/,
                loader: 'twig-loader'
            },
            {
                test: /.*\.(gif|png|jpe?g)$/i,
                use:  [
                    {
                        loader: 'file-loader?name=[name].[ext]'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin( {
            filename: 'index.html',
            template: `${PATHS.source}/index.twig.js`,
        } )
    ],
};

我的树枝模板：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="{{ image.src }}" alt="{{ image.alt }}">
</body>
</html>

我的index.twig.js:

const template = require( './index.twig' );

const image = {
    src: require( './chuck-norris.jpg' ),
    alt: "Chuck Norris"
};

module.exports = template( { image } );

我的package.json:

{
  "name": "htmlWebpackPlugin-twigLoader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "evisotskiy",
  "license": "ISC",
  "devDependencies": {
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "twig-loader": "^0.3.1",
    "webpack": "^3.6.0"
  }
}

我的项目结构：

.
├── webpack.config.js
├── package.json
├── source
|   ├──index.twig
|   ├──index.twig.js
|   ├──index.js (empty)
|   ├──chuck-norris.jpg

当我执行 npm 运行 build 时，我得到了我期望的构建项目：

├── build
|   ├──index.html
|   ├──chuck-norris.jpg
|   ├──webpack.bundle.js

Answer 2

如果有任何帮助，我通过简单地更改处理 twig 模板文件的加载程序并添加 "html-loader".

解决了这个非常相同的问题

这将是更改：

{
    test:   /\.twig$/,
    loader: 'twig-loader'
}

至

{
    test: /\.twig$/,
    exclude: /node_modules/,
    use: [
      'html-loader',
      'twig-html-loader'
    ]
}

当然，如果您还没有安装这些加载程序，则必须事先安装。

npm install twig-html-loader html-loader --save-dev

此后，将对图像进行处理;)

Answer 3

我最近遇到了同样的问题。但是我无法使用将 URL 作为参数处理的解决方案。我已经用 extract-loader 和 html-loader 修复了它。老实说，我不知道它是如何工作的，但它确实有效。

这是 gulp 的任务。请参阅 test: /\.(jpeg|png|svg|jpg|gif)$/i, 和 test: /\.twig$/,

的规则

//region js
task('app:compile', function(){
    return src(path.js.src)
        .pipe(named())
        .pipe(webpack({
            mode: 'development',
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        exclude: /(node_modules|bower_components)/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: ['@babel/preset-env'],
                                plugins: ['@babel/plugin-proposal-object-rest-spread']
                            }
                        }
                    },
                    {
                        test: /\.(scss|css)$/,
                        exclude: /(node_modules|bower_components)/,
                        use: [
                            {loader: "style-loader"},
                            {loader: "css-loader"},
                            {loader: "sass-loader"},
                        ],
                    },
                    {
                        test: /\.(jpeg|png|svg|jpg|gif)$/i,
                        use: [
                            {
                                loader: 'file-loader',
                                options: {
                                    name: '[name].[ext]',
                                    outputPath: '../images',
                                    publicPath: 'images',
                                }
                            },
                        ],
                    },
                    {
                        test: /\.twig$/,
                        use: [
                            'twig-loader',
                            'extract-loader',
                            {
                                loader:'html-loader',
                            },
                        ],
                    },
                    {
                        test:/\.(woff|woff2|eot|ttf|otf)$/,
                        use: [
                            {
                                loader: 'file-loader',
                                options: {
                                    name: '[name].[ext]',
                                    outputPath: '../fonts',
                                    publicPath: 'fonts',
                                }
                            },
                        ],
                    },
                ],
            },
            devtool: 'source-map',
        }))
        .pipe(dest(path.js.dest));
});
//endregion

您可以在 link 查看 gulpfile.js 的完整版本 landing_scratch gulpfile.js

希望它能帮助正在谷歌搜索相同问题的人。

Answer 4

我在使用 Vue CLI 构建的高级 SPA 中加入了 Twig 模板。我遇到的问题与主题启动器相同。

我的 Twig 模板编译得很好。但是模板中的图像没有复制到构建文件夹中。结果输出 HTML 文件中的路径未转换为它们的 Webpack 构建和散列路径。

同时复制了 .vue 个文件中的图像并更新了图像路径。

为了解决这个问题，我将上面@s.smsmsm 的解决方案的核心应用到我的上下文中。谢谢伙计。

简而言之：你必须让 Webpack 使用 3 个加载器来处理你的 Twig 模板。它们是 twig-loader、extract-loader 和 html-loader。

为此，我制作了规格 vue.config.js。

请参阅 here 了解更多说明。简短版本如下。

// vue.config.js
module.exports = {
    runtimeCompiler: true,
    outputDir: '.dist',
    pages: {
        main: {
            entry: 'src/js/main.js',
            template: 'src/views/pages/index.twig',
            filename: 'index.html'
        }
    },

    // Here is where the fix actually is made.
    chainWebpack: config => {
        config.module
            .rule('twig')
            .test(/\.twig$/)

            .use('twig-loader')
            .loader('twig-loader')
            .end()

            .use('extract-loader')
            .loader('extract-loader')
            .end()
            
            .use('html-loader')
            .loader('html-loader')
            .end();
    }

};

Vue CLI 配置参考是 here. Its chainWebpack option was used to modify the respective Webpack config part via vue.config.js. How to add a new loader doc is here。

如何使用 html-webpack-plugin + twig-loader 包含图像？

How to include images with html-webpack-plugin + twig-loader?

templates

twig

webpack

html-webpack-plugin