웹 팩 환경 구축

웹 팩 이 뭐 예요?
웹 팩 은 현대 자 바스 크 립 트 응용 프로그램의 정적 모듈 패키지 웹 팩 안정 버 전: v 4.44
어떻게 웹 팩 을 사용 하여 전단 환경 을 구축 합 니까?
1. node. js 설치 (npm 사용 가능)
2. 프로젝트 디 렉 터 리 를 만 들 고 package. json 을 초기 화 합 니 다. package. json 파일 을 기본적으로 만 듭 니 다.
설치 명령: npm init - y
3. 웹 팩 과 웹 팩 - cli 비 계 를 설치한다
설치 명령:
npm install webpack webpack-cli --save-dev
npm i webpack webpack - cli - D
4. 웹 팩 테스트 실행
CommonJs 규범: 서버 기반 모듈 화 규범
던 지기: modules. exports
도입: require
es6 module:
도입: improt xxx from ""
던 지기: export default {}
5. webpack 에서 지원 하 는 파일 형식
기본 값 은 js 와 json 의 도입 만 지원 합 니 다.
메모: JS 에 다른 파일 형식 을 도입 하려 면:
. css,. png, 글꼴 파일 또는 기타 임의의 파일 형식 으로 해석 할 때 적합 한 loader 를 설치 하여 분석 처리 해 야 합 니 다.
6. webpack 프로필
기본 프로필 이름: webpack. config. js
다른 프로필 을 실행 하려 면
webpack --config webpack.dev.config.js
설정 파일 은 웹 팩 의 핵심 입 니 다. 모든 loader 와 플러그 인 환경, 실행 환경 설정 은 설정 파일 에 설정 되 어 있 습 니 다.

//  webpack,     webpack         
const webpack = require('webpack')
//  path，       
const path = require('path')

//        
const config = {
     
    //    
    entry: './src/main.js',
    //    
    output: {
     
        //    
        path:path.resolve(__dirname,'dist'),
        //     
        filename:'bundle.js'
    }

}

module.exports = config;

7. 각종 loader 설정 (파일 해상도 기)
- css 를 분석 하 는 loader
이미지 파일 로 더, url - loader 분석
분석 ES6 / 7 / 8 / 9 / 10... babel
8. 파일 자동 정리

npm install clean-webpack-plugin --save-dev

  
const {
      CleanWebpackPlugin } = require('clean-webpack-plugin');

  :

//        
const config = {
     
   .....,
    plugins: [
        new CleanWebpackPlugin()
    ]

}

9. html 자동 주입

npm install --save-dev html-webpack-plugin


//        
const config = {
     
    ....,
    plugins: [
        //    
        new CleanWebpackPlugin(),
        //    html
        new HtmlWebpackPlugin({
     
            template: './src/index.html',
            filename:'home.html'
        }),
    ]

}