웹팩에서 다대다 구성 구현(코드 첨부)

이 글의 내용은 웹팩(코드 포함)에서 다대다 구성을 구현하는 것에 관한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

webpack은 sass, 그림, 글꼴 등 모든 정적 리소스를 js로 패키징할 수 있는 탁월한 패키징 플랫폼입니다.

작가는 최근 변신 중입니다. 정적 웹사이트의 경우 http 요청을 줄이기 위한 전략 중 하나는 단일 정적 웹페이지에 해당하는 여러 정적 리소스(예: 글꼴, CSS, 이미지, js)를 js 파일로 패키징한 다음 각 리소스를 html을 해당 항목과 독립적으로 js와 연결하기만 하면 됩니다

인터넷에서 웹팩 구성에 대한 관련 정보를 찾았습니다. html과 js의 해당 관계는 "일대일"과 "다대일"입니다. -one"이 있지만 적습니다. "many-to-many" 구현이 있습니다

하지만 몇 번의 고민 끝에 드디어 구성했습니다. 여기서는 구성 파일과 관련된 구문을 공유하겠습니다#🎜 🎜#

//entry入口文件支持json的形式
    entry: {
            "static/pc/js/index": "./webStatic/pc/js/index.js",        
            "static/pc/js/article-details": "./webStatic/pc/js/article-details.js",        
            "static/mobile/js/index": "./webStatic/mobile/js/index.js",        
            "static/mobile/js/article-details": "./webStatic/mobile/js/article-details.js"
    },
    output: {
        path: path.resolve(__dirname, ''),        
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        filename: '[name].js'
    }

구성 지침# 🎜🎜#

루트 디렉터리의 webStatic은 소스 코드가 있는 위치이고, 루트 디렉터리의 static은 js 출력이 있는 위치입니다.# 🎜🎜#

구성 파일에는 총 4개의 매핑이 있습니다. webStatic/pc/js/ index.js는 static/pc/js/index.js, ./webStatic/pc/js/article-details로 출력됩니다. .js 및 static/pc/js/article-details.js로 출력, ./webStatic/mobile/js/ index.js는 static/mobile/js/index.js, ./webStatic/mobile/js/article로 출력됩니다. -details.js는 static/mobile/js/article-details.js

after로 출력됩니다. 다른 매핑을 추가하려면 항목의 형식에 따라 추가하면 됩니다(복사하면 됩니다) #🎜🎜 #

요약:

오래된 웹사이트를 유지하여 단시간에 사용하기 React나 Vue에서 페이지 전체를 컴포넌트로 다시 작성하는 것은 실용적이지 않지만 그래도 패키징하는 것은 가능합니다. 여러 입구와 출구가 있는 webpack을 구성한 후 웹사이트에 몇 가지만 변경하면 웹사이트 작성을 위한 문법을 ​​기다리면서 scss와 es6을 즐겁게 사용할 수 있습니다

#🎜🎜 #관련 추천:

Webpack 다중 항목 프로젝트 스캐폴딩 구현

#🎜 🎜#

Webpack 다중 항목 파일 페이지 패키징 자세한 설명

위 내용은 웹팩에서 다대다 구성 구현(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!