webpack4.41.0 구성 (기본 구성 파일 웹팩, 입구 및 출구, 패키징을 달성하기 위해)

1.은 (> = 8.9.4 Node.js를의 버전을 확인 webpack4 사용) 버전, NPM 버전과 웹팩 버전을 Node.js를

 

2. 내가 웹팩과 웹팩-CLI-제거 다시 싶습니다 (글로벌)

NPM은 -g 웹팩-CLI 제거

NPM은 -g 웹팩 제거

웹팩 3. 설치 웹팩-CLI 및 글로벌

NPM 설치 웹팩-CLI -g

NPM 설치 웹팩 -g

4. 시험 새로운 기능 webpack4이, 인바운드 (기본 ./src)를 구성하지 않고 수출 (기본 ./dist)

 4.1 폴더의 모든 내용을 두 JS 파일을 src 폴더를 설정 및 생성

4.2 입력 단자 후 웹팩가 개발 --mode ( 더 --mode 기본값은 생산하지 개발자 모드가 --mode, 파일은 우리의 스타일을 조절하기 쉽고, 큰, 일부 불일치 기능 로그가 있었다 )

 

 

 그런 다음 자동으로 내보낼 폴더를 표시하지만,이 작은 프로젝트에만 적합합니다, 우리는 일반적으로 아직 프로파일을 구성 할 필요가 추천 여러 번 우리는 반드시 콘센트 구성 만 입구 투사하지 않기 때문에, 말대꾸 우리는 또한 더 적은을 컴파일해야 할 수도 있습니다, 필요가 ES6 문법을 지원합니다.

5. webpack.config.js 프로파일 다음과 같은 쓰기

CONST 경로 = ( '패스'요구 );

module.exports = {
    항목 : './input.js' ,
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'output.bundle.js'
    }
}

 5.1建立input.js入口文件

 5.2终端输入webpack,出现出口文件dist

 6.更改配置文件，多个入口文件，出口文件与相应的入口文件对应

 进行打包

在出口文件中找不到在入口文件中写的console.log。因为打包没有写--mode默认为生产模式，将我们的调式程序都省略了。如果你换成webpack --mode development,就会看到有console.log。(这就是生产模式和开发模式的区别，开发模式的文件会大很多，所以我们项目最终上线是要打包成生产模式的)。但是我们每次不需要在终端都输入--mode,只需要在配置文件中设置mode就可以了。

之后在终端输入webpack也为开发者模式。终端也不会出现黄色的提示了。

以上就是最基础的webpack打包的配置了