오르막길 잊기전에 기록하기
intellij에서 webpack path alias 적용하기
Webpack path alias
Webpack 은 다른 모듈을 불러오는걸 좀 더 간편하게 하기 위해 다음과 같은 설정을 제공한다. 예를들면
webpack.config.js
module.exports = {
//...
resolve: {
alias: {
@: path.resolve(__dirname, 'src/'),
@unit: path.resolve(__dirname, 'test/unit')
@functions: path.resolve(__dirname, 'src/commons/utils/functions')
}
}
};
불필요하게 src/components 이런 경로가 반복되서 나타나지 않으니 참 간편하긴 한데, 문제는 intellij 에서 이렇게 불러올 경우 해당 모듈을 찾지도 못하고, 그로 인해 code assistant 도 동작하지 않는다..
해결책은 간단하다. intellij 에 해당 웹팩 설정파일 경로를 잡아주면 된다.
Preference > Languages&Frameworks > Javascript > Webpack 에 webpack.config.js 파일의 경로를 넣어주면 잘 찾아준다.
with Vue-cli
vue-cli 와 함께 사용할 경우 설정파일로 vue.config.js 파일을 사용하게 되어 있다. 이때 alias 설정은 그대로 vue.config.js 파일에 하고 인텔리제이에게만 node_modules/@vue/cli-service/webpack.config.js 파일을 잡아주면 된다.
Written on April 11th, 2019 by genie-younhttps://cli.vuejs.org/guide/webpack.html#using-resolved-config-as-a-file 를 참고한다.
글이 도움이 됐다면 하단 광고도 눌러주세요. 큰 힘이 됩니다