웹팩을 사용하는 여러 HTML 파일
나는 그것이 가능한지 확실하지 않은 프로젝트에서 무언가를하려고 노력하고 있습니다. 나는 잘못된 길을 가고 있거나 무언가를 오해하고 있습니다. 우리는 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="/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="/style/default.css">
</head>
<body>
...
<script src="/example.bundle.js"></script>
</body>
</html>
누군가 내가 뭘 잘못하고 있는지 알아?
감사합니다.
See an entrypoint as the root of a tree that references many other assets like javascript modules, images, templates and so on. When you define more than one entrypoint, you basically split your assets into so called chunks to not have all your code and assets in one single bundle.
What I think you want to achieve is to have more than one "index.html" for different apps that also refer to different chunks of your assets which you already defined with your entrypoints.
Copying an index.html file or even generating one with references to these entrypoints is not handled by the entrypoint mechanism - it is the other way round. A basic approach for handling html pages is using the html-webpack-plugin which not only can copy html files but also has an extensive mechanism for templating. This is especially helpful if you want to have your bundles suffixed with a bundle hash that is pretty to avoid browser caching issues when you update your app.
As you have defined a name pattern as [id].bundle_[chunkhash].js you can no longer reference your javascript bundle as main.bundle.js as it will be called something like main.bundle_73efb6da.js.
Have a look at the html-webpack-plugin. Especially relevant for your use case:
You should probably have something like that in the end (warning: not tested)
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
filename: 'example.html',
template: 'src/example.html',
chunks: ['exampleEntry']
})
]
Please be aware to reference the name of the entrypoint in the chunks array, so in your example this should be exampleEntry. Probably it's also a good idea to move your templates into a specific folder instead of having them in directly inside the root src folder.
Hope this helps.
You can also use Copy Webpack Plugin if you don't need two different builds, i.e., assuming that you just want to serve a different HTML with the same main.bundle.js.
The plugin is really dead simple (only tested in webpack v4):
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
plugins: [
new CopyWebpackPlugin([
{ from: './src/example.html', to: './example.html' }
])
]
}
Then in example.html you can load the build from index.html. E.g.:
<!DOCTYPE html>
<html
<head>
...
<title>Example</title>
</head>
<body>
<div id="container"> Show an example </div>
<script src="main.bundle.js"></script>
</body>
</html>
ReferenceURL : https://stackoverflow.com/questions/39798095/multiple-html-files-using-webpack
'programing tip' 카테고리의 다른 글
| 다시 입력하지 않고 data.frame () 내에서 열 이동 (0) | 2021.01.09 |
|---|---|
| CSS를 사용하여 모서리 자르기 (0) | 2021.01.09 |
| Visual Studio에서 특정 줄 번호로 파일 열기 (0) | 2021.01.08 |
| MySQL "CREATE TABLE IF NOT EXISTS"-> 오류 1050 (0) | 2021.01.08 |
| 현재 가장 안전한 단방향 암호화 알고리즘은 무엇입니까? (0) | 2021.01.08 |