[webpack] 웹팩을 사용하는 여러 HTML 파일

Program / 글쓴이

나는 그것이 가능한지 확실하지 않은 프로젝트에서 무언가를하려고 노력하고 있습니다. 나는 잘못된 방식으로 있거나 무언가를 오해하고 있습니다. 우리는 webpack을 사용하고 있으며, 아이디어는 하나 이상의 html 파일을 제공하는 것입니다.

localhost : 8181-> index.html 제공
localhost : 8181 / example.html-> example.html 제공

설명서에 따라 여러 진입 점을 설정하여 수행하려고합니다 .

폴더 구조는 다음과 같습니다.

/
|- package.json
|- webpack.config.js
  /src
   |- index.html
   |- example.html
   | /js
      |- main.js
      |- example.js

Webpack.config.js :

...
entry: {
    main: './js/main.js',
    exampleEntry: './js/example.js'
},
output: {
    path: path.resolve(__dirname, 'build', 'target'),
    publicPath: '/',
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle_[chunkhash].js',
    sourceMapFilename: '[file].map'
},
...

index.html

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="https://stackoverflow.com/style/default.css">
</head>
<body>
    <div id="container"></div>
    <script src="/main.bundle.js"></script>
</body>
</html>

example.html :

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="https://stackoverflow.com/style/default.css">
</head>
<body>
    ...
    <script src="/example.bundle.js"></script>
</body>
</html>

누군가 내가 뭘 잘못하고 있는지 알아?

감사합니다.

답변

자바 스크립트 모듈, 이미지, 템플릿 등과 같은 다른 많은 자산을 참조하는 트리의 루트로 진입 점을 확인하십시오. 둘 이상의 진입 점을 정의하면 기본적으로 자산을 소위 청크로 분할하여 모든 코드와 자산을 하나의 번들에 포함하지 않습니다.

내가 달성하고 싶은 것은 진입 점으로 이미 정의한 자산의 다른 청크를 참조하는 다른 앱에 대해 하나 이상의 “index.html”을 갖는 것입니다.

index.html 파일을 복사하거나 이러한 진입 점에 대한 참조가있는 파일을 생성하는 것은 진입 점 메커니즘에 의해 처리되지 않으며 그 반대입니다. html 페이지를 처리하기위한 기본적인 접근 방식은 html-webpack-pluginhtml 파일을 복사 할 수있을뿐만 아니라 템플릿을위한 광범위한 메커니즘을 가진를 사용하는 것입니다. 이는 앱을 업데이트 할 때 브라우저 캐싱 문제를 방지 할 수있는 번들 해시를 번들에 접미사로 추가하려는 경우 특히 유용합니다.

당신이 이름 패턴을 정의만큼 [id].bundle_[chunkhash].js당신은 더 이상 자바 스크립트 번들을 참조 할 수 main.bundle.js는 같은 것을 호출됩니다로 main.bundle_73efb6da.js.

html-webpack-plugin을 살펴보십시오 . 특히 사용 사례와 관련이 있습니다.

당신은 아마도 결국 그런 것을 가져야 할 것입니다 (경고 : 테스트되지 않음)

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'src/index.html',
    chunks: ['main']
  }),
  new HtmlWebpackPlugin({
    filename: 'example.html',
    template: 'src/example.html',
    chunks: ['exampleEntry']
  })
]

청크 배열의 진입 점 이름을 참조해야하므로 예제에서는 exampleEntry. 템플릿을 루트 src 폴더에 직접 넣는 대신 특정 폴더로 옮기는 것도 좋은 생각 일 것입니다.

도움이 되었기를 바랍니다.

답변

두 개의 다른 빌드가 필요하지 않은 경우 에도 Copy Webpack Plugin을 사용할 수 있습니다 . 즉, 동일한 main.bundle.js.

플러그인은 정말 간단합니다 (웹팩 v4에서만 테스트 됨).

const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/example.html', to: './example.html' }
    ])
  ]
}

그런 다음에서 example.html빌드를로드 할 수 있습니다 index.html. 예 :

<!DOCTYPE html>
<html
<head>
    ...
    <title>Example</title>
</head>
<body>
    <div id="container"> Show an example </div>
    <script src="main.bundle.js"></script>
</body>
</html>

답변

HtmlWebpackPlugin 사용시 여러 HTML 파일을 Webpack사용 하려면 다음 을 수행하십시오 .

webpack.config.js아래 코드를 직접 삽입하여 수정하십시오 .

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

let htmlPageNames = ['example1', 'example2', 'example3', 'example4'];
let multipleHtmlPlugins = htmlPageNames.map(name => {
  return new HtmlWebpackPlugin({
    template: `./src/${name}.html`, // relative path to the HTML files
    filename: `${name}.html`, // output HTML files
    chunks: [`${name}`] // respective JS files
  })
});

module.exports = {
  entry: {
    main: './js/main.js',
    example1: './js/example1.js',
    //... repeat until example 4
  },
  module: {
       //.. your rules
  };
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      chunks: ['main']
    })
  ].concat(multipleHtmlPlugins)

};

필요한만큼 HTML 페이지를 htmlPageNames배열에 추가 할 수 있습니다 . 각 HTML 및 해당 JS 파일의 이름이 동일한 지 확인합니다 (위 코드에서는이를 가정).

답변

Webpack ^ 4.44.1을 가정하는 또 다른 해결책이 있습니다. 즉, JS / TS 앱에서 HTML을 가져옵니다.

webpack.config.js 샘플

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
    entry: { app: './src/index.ts' },

    mode: 'development',
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Development',
            template: path.join(path.resolve(__dirname, 'src'), 'index.ejs')
        }),
    ],
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                include: [path.resolve(__dirname, 'src')],
                exclude: /node_modules/,
            },
            {
                test: /\.html$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    }
                ],
                // this exclude is required
                exclude: path.join(path.resolve(__dirname, 'src'), 'index.html')
            }
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3900
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

해당 앱

import './about.html';

console.log('this is a test');

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Question</title>
</head>
<body>
     <a href="./about.html">About</a>
</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <p>This is an about page</p>
</body>
</html>

Webpack은 about.html을 해당 출력 폴더에 복사 합니다.

답변

plugins: [
  ...templates.map(template => new HtmlWebpackPlugin(template))
]

이 코드는 템플릿이 많은 경우 도움이 될 것입니다. 🙂

답변