webpack.config.js に 2 つのエントリがあります。1 つは JS 用で、もう 1 つは SCSS 用です。開発モードと製品モードで実行できます。プロダクション ビルドを作成すると、index.html、main[hash].js、main[hash].css というファイルが得られます。index.htmlsrcには、ファイルへのリンクとスクリプト タグがあります。base.twigアプリケーションのデプロイ時に読み込まれるこれらのリンクとスクリプト タグをファイルに読み込むにはどうすればよいですか? main.js開発中はから をロードしbase.twig、そのファイルにはすべてが含まれています。
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({
}),
]
};
};
更新された構造:
