popup.html이 이러한 JS 파일의 Webpack 구성을 참조해야 하는 이유는 무엇입니까?
P粉727531237
2023-09-05 17:15:09
<p><code>popup.html</code>에서 <code>popup.js</code>를 참조하고 싶습니다. 그러나 <code>content.js</code> 및 <code>Background.js</code>도 <code>popup.html</code>에서 참조됩니다. 왜 이런 일이 발생하며 어떻게 해결합니까? </p>
<pre class="brush:js;toolbar:false;">const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('복사-웹팩-플러그인')
모듈.수출 = {
항목: {
팝업: './src/popup.tsx',
콘텐츠: './src/content.tsx',
배경: './src/Background.ts',
},
출력: {
파일 이름: '[이름].js',
경로: path.resolve(__dirname, 'dist')
},
모듈: {
규칙: [{
테스트: /.ts(x)?$/,
사용: 'ts-로더',
제외: /node_modules/
}]
},
플러그인: [
새로운 HtmlWebpackPlugin({
템플릿: './src/popup.html',
파일명: 'popup.html'
}),
새로운 CopyPlugin({
패턴: [
{ 출처: "공개"
]
})
]
}
</pre>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="ko">
<머리>
<메타 문자 집합="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<제목>문서
<script defer="defer" src="popup.js"></script>
<script defer="defer" src="content.js"></script>
<script defer="defer" src="background.js"></script>
</머리>
<본문>
<div id="react-target"></div>
</body>
</html>
</pre>
<p>이러한 현상이 발생하는 이유와 해결 방법은 무엇인가요? </p>
쉽죠:
으아악