웹 팩 프로젝트 응용

1370 단어 webpack
npm 초기 화
npm init
웹 팩 설치
npm install webpack --save--dev
프로젝트 에 필요 한 폴 더 만 들 기
mkdir src
mkdir dist
루트 디 렉 터 리 에 index. html 를 초기 화하 고 포 장 된 js 파일 을 도입 합 니 다.
웹 팩 프로필 웹 팩. config. js 를 만 들 면 웹 팩 은 자동 으로 이 파일 을 찾 아 설정 을 실행 합 니 다.
설정 파일 에 다음 정 보 를 설정 합 니 다:
var path = require('path')
module.exports = {
  entry: './src/script/main.js',//     
  output: {
    path: path.resolve(__dirname, './dist/js'), //        
    filename: 'bundle.js'//        
  }
}
처음에 path 모듈 을 도입 하지 않 으 면 오류 가 발생 합 니 다. 설정 이 끝나 면 명령 행 에서 웹 팩 을 실행 하면 js 파일 을 dist / js / bundle. js 파일 에 성공 적 으로 포장 할 수 있 습 니 다.
웹 팩. config. js 를 웹 팩. dev. config. js 로 바 꿀 때 명령 을 입력 하면 웹 팩 을 사용 할 수 없습니다. 다음 명령 을 추가 해 야 합 니 다.
webpack --config webpack.dev.config.js

웹 팩 패키지 설정 을 설정 합 니 다. package. json 파일 의 scripts 속성 내용 은 다음 과 같 습 니 다.
다시 포장 할 때 npm run webpack 만 입력 하면 파일 을 포장 할 수 있 습 니 다.
플러그 인 html - webpack - plugin 을 사용 하여 플러그 인 을 설치 한 다음 다음 다음 정 보 를 설정 합 니 다.
html WebpackPlugin ({template: 'index. html'}) 에 루트 디 렉 터 리 index. html 를 템 플 릿 으로 하여 index. html 를 dist 폴 더 에 동적 으로 생 성 합 니 다.
플러그 인의 일반 설정 과 작업 캡 처:
여러 페이지 응용 프로그램의 설정 은 다음 과 같 습 니 다.
cordova 로 android 응용 프로그램 생 성
Date 유형 데이터 쓰기 MySql 데이터베이스 오류

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage