webpack에서 파일 입력 및 파일 내보내기를 구성하는 방법

이 글의 내용은 webpack의 구성 파일 입력 및 파일 내보내기 방법에 대한 내용이며, 필요한 친구들이 참고할 수 있기를 바랍니다.

1. Webpack
webpack.config.js

module.exports={  
    entry:{}, //入口文件的配置项
    output:{}, //出口文件的配置项
    module:{}, //模块：例如解读CSS,图片如何转换，压缩  
    plugins:[], //插件，用于生产模版和各项功能 
    devServer:{}//配置webpack开发服务功能}

• 항목의 구성 파일인 webpack.config.js로 js 파일을 생성합니다. 항목 파일의 주소를 구성합니다. 단일 항목이거나 다중 항목 입구.

• output: 내보내기 파일의 주소를 구성합니다. webpack2.X 버전 이후에는 다중 내보내기 구성이 지원됩니다.

• 모듈: 주로 CSS 구문 분석, 이미지 변환 및 압축과 같은 기능을 위한 구성 모듈입니다.

• 플러그인: 필요에 따라 플러그인을 구성하고 다양한 기능을 갖춘 플러그인을 구성합니다.

• devServer: 개발 서비스 기능을 구성합니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

항목 옵션(항목 구성)

• wepback.config.js의 항목 옵션

 //入口文件的配置项
 entry:{ 
     //里面的entery是可以随便写的
    entry:'./src/entry.js'},

출력 옵션(아웃렛 구성)

//出口文件的配置项output:{ 
    //打包的路径名称
    path:path.resolve(__dirname,'dist'), //打包的文件名称 
    filename:'bundle.js' },

path.resolve(__dirname,'dist') //그렇습니다 프로젝트의 절대 경로를 얻었습니다.

filename: 패키지 파일의 이름입니다. 여기서는 Bundle.js로 이름을 지정합니다.
이렇게만 쓰면 경로를 찾을 수 없다는 오류가 발생합니다. 따라서 webpack.config.js의 헤드에 경로를 도입해야 합니다

const path = require(‘path’);

이제 webpack.config.js의 코드는 다음과 같습니다.

const path = require('path');
module.exports={ 
//入口文件的配置项 entry:{ 
    entry:'./src/entry.js' }, 
//出口文件的配置项 output:{ 
//输出的路径，用了Node语法
 path:path.resolve(__dirname,'dist'), 
//输出的文件名称 filename:'bundle.js' }, 
//模块：例如解读CSS,图片如何转换，压缩 module:{}, 
//插件，用于生产模版和各项功能plugins:[], 
//配置webpack开发服务功能devServer:{}}

마지막으로 패키징을 위해 터미널에 webpack을 입력합니다

다중 항목 및 다중 항목 종료 구성:

const path = require('path')    //path是一个常量不能更改  ，path 需要引入var webpack = require('webpack')
module.exports = {  // bundle入口
  entry:{
    entry:'./src/entry.js',    //下面的entry是随便起的名字
    entry2:'./src/entry2.js'    //有两个入口也要有两个出口
  },  // bundle输出
  output: {
    path: path.resolve(__dirname, 'dist'),    //绝对路径
    filename: '[name].js' //可重命名        当有多个入口文件时，出口文件用name，说明打包的出口文件和入口文件名相同
  },
  module:{},
  plugins:[],
  devServer:{}
}

참고: 두 곳이 수정되었습니다: 항목 및 종료 수정

[이름]은 항목 파일 이름을 기준으로 동일한 이름으로 패키징한다는 의미입니다. 항목 파일이 여러 개인 경우 여러 파일을 사용할 수 있습니다. 포장되세요.

관련 권장 사항:

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

Webpack이 구성 파일을 최적화하는 방법

위 내용은 webpack에서 파일 입력 및 파일 내보내기를 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!