वेबपैक का उपयोग करते हुए कई html फाइलें

87

मैं एक ऐसी परियोजना में कुछ करने की कोशिश कर रहा हूं जो मुझे यकीन नहीं है कि अगर यह संभव है, तो मैं गलत तरीके से हूं या कुछ गलत समझ रहा हूं। हम वेबपैक का उपयोग कर रहे हैं, और यह विचार एक से अधिक html फ़ाइल परोसने का है।

स्थानीयहोस्ट: 8181 -> index.html
लोकलहोस्ट करता है : 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>

किसी को पता है कि मैं क्या गलत कर रहा हूं?

धन्यवाद।

webpack  webpack-dev-server 
— miguelitomp
स्रोत
क्या आप इसके लिए समाधान खोजने में सक्षम हैं? मैं भी उसी उपयोग के मामले की तलाश में हूं।
— मोनिका

जवाबों:

118

एक पेड़ की जड़ के रूप में एक एंट्रीपॉइंट देखें जो जावास्क्रिप्ट मॉड्यूल, चित्र, टेम्पलेट और जैसी कई अन्य संपत्तियों का संदर्भ देता है। जब आप एक से अधिक एंट्रीपॉइंट परिभाषित करते हैं, तो आप मूल रूप से अपनी संपत्ति को एक ही बंडल में अपने सभी कोड और परिसंपत्तियों को तथाकथित नहीं करने के लिए विभाजित करते हैं।

मुझे लगता है कि आप जो हासिल करना चाहते हैं उसके लिए अलग-अलग ऐप के लिए एक से अधिक "index.html" होना चाहिए, जो आपकी परिसंपत्तियों के अलग-अलग हिस्सों को भी संदर्भित करता है, जिसे आपने पहले ही अपने एंट्रीपॉइंट्स के साथ परिभाषित किया था।

एक index.html फ़ाइल की प्रतिलिपि बनाना या यहां तक ​​कि इन एंट्रीपॉइंटों के संदर्भ के साथ एक उत्पन्न करना, एंट्रीपॉइंट तंत्र द्वारा नियंत्रित नहीं किया जाता है - यह दूसरा तरीका है। Html पृष्ठों को संभालने के लिए एक बुनियादी दृष्टिकोण का उपयोग किया html-webpack-pluginजा रहा है, जो न केवल HTML फ़ाइलों की प्रतिलिपि बना सकता है, बल्कि टेम्पलेटिंग के लिए एक व्यापक तंत्र भी है। यह विशेष रूप से उपयोगी है यदि आप अपने बंडल को एक बंडल हैश के साथ प्रत्यय देना चाहते हैं जो आपके ऐप को अपडेट करने पर ब्राउज़र कैशिंग के मुद्दों से बचने के लिए सुंदर है।

जैसा कि आपने एक नाम पैटर्न को परिभाषित किया है क्योंकि [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 फ़ोल्डर में रखने के बजाय अपने टेम्पलेट को एक विशिष्ट फ़ोल्डर में ले जाना एक अच्छा विचार है।

उम्मीद है की यह मदद करेगा।

— एंड्रियास जागल
स्रोत
4
अच्छी व्याख्या लेकिन यह अभी भी मुझे परेशान करता है कि आपको अपने प्रोजेक्ट में बनाए गए प्रत्येक भिन्न पृष्ठ के लिए 'नए HTMLWebPlugin' को कॉल करना होगा।
— क्लेविस
हर कोई प्रत्येक पेज के 'नए HTMLWebPlugin' को कॉल करना पसंद नहीं करता है। विकल्प चाहिए।
— चोजेनुसर
3

आप कॉपी वेबपैक प्लगइन का भी उपयोग कर सकते हैं यदि आपको दो अलग-अलग बिल्ड की आवश्यकता नहीं है, अर्थात, यह मानते हुए कि आप बस उसी के साथ एक अलग एचटीएमएल सेवा करना चाहते हैं 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>
— F लेक्सचा
स्रोत
1
क्या CopyWebpackPlugin का उपयोग करने और सीधे html फ़ाइल में स्क्रिप्ट संदर्भ देने के बजाय webpack के माध्यम से html फ़ाइल में बंडल फ़ाइल जोड़ने के लिए कोई अन्य तरीका संभव है?
— श्रीतम जगदेव
3

उपयोग करने के लिए एकाधिक एचटीएमएल में फ़ाइलों Webpackका उपयोग कर HtmlWebpackPlugin :

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)
  
};

आप htmlPageNamesसरणी में आवश्यकतानुसार अधिक से अधिक HTML पृष्ठ जोड़ सकते हैं । सुनिश्चित करें कि प्रत्येक HTML और इसी JS फाइल का एक ही नाम (उपरोक्त कोड मानता है)।

— रिचर्ड अबराम
स्रोत
0

वेबपैक ^ 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 संबंधित आउटपुट फ़ोल्डर में html के बारे में कॉपी करेगा ।

— एलेक्स नोलस्को
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.