inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

프론트엔드 개발자를 위한 웹팩

빌드시 환경변수로 import 제외하고 싶은데요.

654

2lian

작성한 질문수 2

1

이 문제때문에 고민하다가, 수강을 진행하게 된 사람입니다.

mobile또는 pc 별로 빌드를 진행해야해서 , scss 에서 import해올때 경로 또는 파일이름 별로 import를 제외 시키고 싶은데,

이부분이 잘 안되서 문의드립니다.  

{
test: /\.scss$/,
exclude: path.resolve(__dirname, "./../src/tokens/mobile/"),
use: [
MiniCssPlugin.loader,
'css-loader',
'sass-loader'
]

이 방법도 안되고, 아래처럼 plugin을 사용해서 webpack.IgnorePlugin을 해도 여전히 mobile쪽이 적용되는것 같습니다.

plugins: [
browserSyncPlugin,
new MiniCssPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[id].css'
}),
new webpack.IgnorePlugin({
resourceRegExp: /\.scss$/,
contextRegExp: /mobile/
})
]

webpack은 뭐 디버깅을 해보기가 너무 어렵네요..

에러도 안나고 그냥 조용히 계속 값을 들고오는데, 어떻게 접근하면 좋을까요..

웹팩

답변 1

0

캡틴판교

안녕하세요 2lian님, 말씀하신 환경 변수로 빌드 옵션을 제어하시고 싶다면 아래 문서를 참고해보시면 좋을 것 같습니다. 웹팩 설정 파일에서 보통 환경 변수 env 파일을 접근하는 라이브러리는 dotenv를 많이 사용합니다.

https://joshua1988.github.io/webpack-guide/advanced/mode-config.html#%EC%8B%A4%ED%96%89-%EB%AA%A8%EB%93%9C%EC%97%90-%EB%94%B0%EB%9D%BC-%EC%9B%B9%ED%8C%A9-%EC%84%A4%EC%A0%95-%EB%8B%AC%EB%A6%AC%ED%95%98%EA%B8%B0

원하시는 배포 환경 별로 환경 변수를 셋업해서 써보시면 좋을 것 같아요. 수강해주셔서 감사합니다 :)

HTMLWebpackPlugin 사용한 webpack.config.js의 빌드 결과 index.html

1

467

1

인프런 캡틴판교님 강의 들을 순서 알고 싶습니다.

1

476

2

바벨없이 import 구문을 빌드한 의도파악하기

1

511

2

chunkhash 사용

2

482

1

pm install gulp --global

1

514

1

이런질문도 괜찮나요?

1

498

1

__dirname 질문입니당

1

683

2

플러그인 관련 질문있습니다.

1

285

1

build 후 생성된 bundle.js 가 너무 간략합니다

1

1266

1

웹팩데브서버에 대해 궁금한점

1

299

1

devServer 질문

1

351

1

웹팩 로더 버전 관리

1

449

1

devDependencies와 build

1

381

1

webpack-dev-server 실행시 index.html 안쓰는 법

1

457

1

webpack-dev-server 실행 후 매번 업데이트시 console 창 기본 메세지 숨길 수 있을까요?

1

952

1

웹팩의 등장배경 관련해서 문의드립니다!

1

317

1

배포시 질문

1

285

1

--output=public/output.js 오류 문의

1

768

1

npm i vue -D 설치시 다른 여러 폴더들이 생성됩니다.

1

422

2

main.js태그

1

246

1

module 문법 질문.

1

265

1

htmlWebpackPlugin 질문

2

239

1

entry,output 파일 경로 설정 질문.

1

221

1

웹팩 이미지로더 질문

1

181

1