webpack resolve
2020. 1. 11. 07:28ㆍwebpack
webpack resolve
webpack 모듈 번들러의 경우 어떤 위치에서 어떻게 로드해줄지가 중요하다.
즉
```
import test from test
//를 어떻게 로드해오는가에 따른 설정을 resolve에서 할 수 있다.
```option
- alias
모듈을 로드할 때 별칭을 사용하여 더 쉽게 로드할 수 있게 만든다.
webpack.config.js
alias:{
Model: path.resolve(__dirname, 'src/model/')
}js 파일에서 import 해올 때
import model from "src/model/User"처럼 사용하던 것을
import model from "Model/User" 와같이 사용할 수 있다.- modules
설치된 라이브러리를 가져올 때 어느 폴더를 기준으로 가져올지 결정할 수 있다.
modules: ["node_modules"] //default 설치된 라이브러리들을 node_modules에서 불러오는 것이다.
modules: [path.resolve(__dirname, "src"), "node_modules"]실습
1. 설정 파일 설치
yarn init
yarn add --dev jquery webpack
2. index.html, index.js, webpack.config.js
index.html
<html>
<head>
<title>Webpack Plugins</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>index.js
import $ from "jquery";
console.log("loaded jQuery version is " + $.fn.jquery);
webpack.config.js
const webpack = require("webpack");
const path = require("path");
module.exports = {
entry: "./app/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
}
}
3. alias 사용해보기
resolve: {
alias: {
Vendor: path.resolve(__dirname, "./app/vendor/")
}
}alias를 추가하여 Vendor 키값을 둔다. 그럼 index.js에서 아래와 같이 사용할 수 있다.
import $ from "./app/vendor/jquery-2.2.4.min.js"; -> import $ from "Vendor/jquery-2.2.4.min.js";
console.log("loaded jQuery version is " + $.fn.jquery);
4. provide Plugin 사용해보기
Provide plugin을 사용하여 jquery를 전역으로 사용할 수 있게 만들겠습니다. webpack.config.js에 아래와 같은 코드를 추가합니다. webpack명령어를 실행하면
plugins: [
new webpack.ProvidePlugin({
$: "jquery"
})
]위의 index.js를 아래와 같이 고칠 수 있습니다. import로 불러오는 것 없이 $바로 사용할 수 있습니다.
console.log("loaded jQuery version is " + $.fn.jquery);'webpack' 카테고리의 다른 글
| webpack middleware (0) | 2020.01.14 |
|---|---|
| webpack - devServer (0) | 2020.01.14 |
| webpack plugin (0) | 2020.01.11 |
| webpack loader (0) | 2020.01.11 |
| webpack entry와 ouput (0) | 2020.01.11 |