Configure webpack to MPA?

Hello!

Is it possible to configure webpack to such work:

1) Separately collect the scss files from the entry point index.scss
2) Separately collect ts files from the entry point index.ts
3) Separately to pass all html files in src/html and put them into /output/. Below inside the html files can import other html files. Ie, in src/html/ page are importing the desired fragments. (Use include in html)

As I understand webpack for SPA applications and for this it is not suitable.
April 19th 20 at 12:13

Related questions

More answers about "Configure webpack to MPA?"
2 answers
April 19th 20 at 12:15
Solution
1. Css is imported into js/ts
2. Yes
3. Yes
And you can learn more on the expense of 3 points?) Can't find information how to build pure html with the option include - Stanley_Schiller1 commented on April 19th 20 at 12:18
@Stanley_Schiller1, honestly speaking I don't remember exactly how it's done, I think you need to look in the html loader. There will be an opportunity to write in html something like this

<html>
the <body>
${require("path/to/header.html")}
</body>
</html>
- tate.Gerlach commented on April 19th 20 at 12:21
@Stanley_Schiller1, but 100% of it can be done - tate.Gerlach commented on April 19th 20 at 12:24
April 19th 20 at 12:17
Solution
1) Separately collect the scss files from the entry point index.scss
About this config:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
 entry: path.join(__dirname, 'src/styles/entry.scss'),
 output: {
 filename: 'drop-it.js', // js artifact can not escape, but the file in fact is empty
 path: path.join(__dirname, 'dist')
},
 module: {
 rules: [{
 test: /\.scss$/,
 use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}]
},
 plugins: [new MiniCssExtractPlugin({
 filename: 'styles.css'
})]
};


Separately collect ts files from the entry point index.ts
no problem, again need to be ts-loader. Well I will say my IMHO here that transpiring better not to trust typescript, and connect Babel with the preset env
Oh and don't forget to set up for both Babel and in ts-config, that output modules should be ES, otherwise you will run out of trisamina.

To separately place all the html files in src/html and put them in /output/
this is already on zamorochki will
For imports I think we need a preprocessor to be conductive with the move and not realize what is possible, he did what handlebars did
For treatment of vebacom you can take it https://webpack.js.org/loaders/html-loader/
To connect all files in one folder in the sample can be used https://webpack.js.org/api/module-methods/#require...
well, still need something to extract all the individual files, although I personally wouldn't worry with finding ready-made solutions, but simply stuck to his loader and it would write all to file
Thank you!) - Stanley_Schiller1 commented on April 19th 20 at 12:20

Find more questions by tags Webpack