问题描述
我的webpack.config.js中有两个条目.一种用于JS，另一种用于SCSS.我可以在开发和产品模式下运行.如果创建生产版本，则会得到以下文件:index.html，main [hash] .js，main [hash] .css.在index.html中，我具有src指向文件的链接和脚本标签.我如何加载这些链接&我的base.twig文件中的脚本标签在部署应用程序时加载了?在开发中，它会从base.twig加载main.js，并且在该文件中包含所有内容.
I have two entries in my webpack.config.js. One for the JS and one for the SCSS. I can run in development and product mode. If i create a production build I get the following files: index.html, main[hash].js, main[hash].css. In the index.html i have the link and script tag with the src to the files. How do i load these link & script tags in my base.twig file that get loaded when deploying the application?In development it loads the main.js from the base.twig and in that file everything is included.
base.twig
<script src="assets/main.js"></script>
文件夹结构:
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link href="main.7a67bd4eae959f87c9bc.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="main.7a67bd4eae959f87c9bc.js"></script></body>
</html>
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = (env, options) => {
const devMode = options.mode === 'development';
return {
mode: (devMode) ? 'development' : 'production',
watch: devMode,
devtool: "source-map",
entry: [
'./resources/javascript/index.js',
'./resources/sass/app.scss'
],
output: {
path: path.resolve(__dirname, 'public/assets'),
filename: devMode ? '[name].js' : '[name].[hash].js'
},
module: {
rules: [
{
test: /\.twig/,
loader: 'twig-loader'
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader",
options: {
implementation: require("sass")
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: "file-loader",
options: {
outputPath: 'images'
}
}
]
},
{
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
}),
new BrowserSyncPlugin({
proxy: 'https://dev.identity/oauth/authorize?response_type=code&client_id=1c9e2b58-2d01-4c92-a603-c934dfa9bc78&redirect_uri=https://localhost/hooray&state=aaaaa&code_challenge=12345678901234567890123456789012345678901123&code_challenge_method=plain&resource=https://cloud.ctdxapis.io&scope=cloud:my-profile'
}),
new CopyPlugin([
{ from: './resources/images', to: './images' }
]),
new HtmlWebpackPlugin({
}),
]
};
};
更新后的结构:
推荐答案
您可以按顺序提供HTMLWebpackPlugin的templateContent config属性，以生成您的assets.twig文件
You can provide templateContent config property of HTMLWebpackPlugin in-order to generate your assets.twig file
new HtmlWebpackPlugin({
templateContent: function(params) {
return `
{% block jsAssets %}
${params.htmlWebpackPlugin.files.js.map(
file => `<script src="${file}"></script>`,
)}
{% endblock %}
{% block cssAssets %}
${params.htmlWebpackPlugin.files.css.map(
file => `<link rel="stylesheet" type="text/css" href="${file}">`,
)}
{% endblock %}`;
},
filename: '../../resources/templates/assets.twig',
inject: false, // prevents from the plugin to auto-inject html tags
});
然后在您的base.twig中，只需使用 blocks方法指定在何处呈现资产.
Then in your base.twig just use the blocks method to specify where to render your assets.
{{ block("jsAssets", "assets.twig") }}
{{ block("cssAssets", "assets.twig") }}
这篇关于HtmlWebpackPlugin将bundle.[hash] .js/css加载到基本树枝文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！