(에센스) 2020 년 7 월 12 일 웹 팩 흔 한 플러그 인 사용

4190 단어 #webpack
중점 플러그 인 플러그 인 소개
플러그 인 은 모듈 분석 기능 과 달리 모듈 분석 은 비 es5 형식 js 또는 다른 자원 형식 파일 을 가 져 오기 위해 loader 를 만 들 었 습 니 다.플러그 인 은 마지막 포장 파일 을 처리 합 니 다. loader 는 포장 전에 준비 하고 plugin 은 포장 해서 처리 하 는 것 임 을 이해 할 수 있 습 니 다.
  • 공식 플러그 인의 사용 절차 (내장 플러그 인 2 단계) 1 설정 파일 에 XxxxPlugin, constwp = require (XxxxPlugin) 2 를 가 져 옵 니 다. plugins 라 는 배열 에 플러그 인 인 인 스 턴 스 를 추가 합 니 다. newwp. XxxxPlugin ({대상})
  • 제3자 플러그 인의 사용 절차 (제3자 3 단계, 한 번 더 설치) 1 설치 (제3자 플러그 인 설치) 루트 디 렉 터 리 > cnpmi - DXxxxplugin 2 설정 파일 에서 플러그 인 가 져 오기 constXxxxplugin = require ('xxxx - plugin') 3 plugins 라 는 배열 에 플러그 인 인 인 인 스 턴 스 를 추가 합 니 다. new Xxxxplugin ({대상})
  • 공식 플러그 인 은 설정 에서 constweback = require ('webpack') console. log (webpack) / / 를 인쇄 하여 볼 수 있 습 니 다. 웹 팩 에 내 장 된 플러그 인
  • 을 볼 수 있 습 니 다.
    플러그 인 목록
    > 01.webpack.BannerPlugin //     
    > 02.terser-webpack-plugin //    ,     
    > 03.html-webpack-plugin   html   
    > 04.extract-text-webpack-plugin,mini-css-extract-plugin //    css
    > 05.DefinePlugin//        , newwp.DefinePlugin({BJ:JSON.stringify('  '),}),     js     
    >./src/main.js console.log('           '+BJ) 
    > 06.Dllplugins //                    
    > 07.copy-webpack-plugin //  webpack         
    > 08.optimize-css-assets-webpack-plugin //   css
    > 09.assets-webpack-plugin // assets-webpack-plugin 
    > 10:EnvironmentPlugin//    DefinePlugin,      EnvironmentPlugin    JSON.stringify
    > 11.cross-env //scripts      
    > 12.ProvidePlugin//   api  
    > 13.preload-webpack-plugin //        DNS        
    

    좋은 웹페이지 즐겨찾기