webpack
Webpack의 사용법
수색…
사용법 CommonJS 모듈 예제
폴더를 만듭니다. 명령 줄에서 엽니 다. npm install webpack -g 실행합니다. 2 개의 파일을 만드십시오 :
cats.js :
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
명령 줄에서 실행 : webpack ./app.js app.bundle.js
이제 폴더에 app.bundle.js 파일이 있습니다. 당신은 index.html 페이지에 그것을 포함시킬 수 있고 그것을 브라우저에서 열고 콘솔에서 결과를 볼 수 있습니다.
하지만 더 빠른 방법은 명령 행에서 실행됩니다 : node app.bundle.js 그리고 즉시 콘솔에서 결과를 봅니다 :
[ 'dave', 'henry', 'martha']
사용 AMD 모듈 예제
폴더를 만듭니다. 명령 줄에서 엽니 다. npm install webpack -g 실행합니다. 2 개의 파일을 만드십시오 :
cats.js :
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
명령 줄에서 실행 :
webpack ./app.js app.bundle.js
이제 폴더에 file : app.bundle.js 됩니다.
index.html 파일 만들기 :
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
브라우저에서 열면 콘솔에 결과가 표시됩니다.
[ 'dave', 'henry', 'martha']
사용법 ES6 (바벨) 모듈 예제
2016 년 7 월 MDN 에 작성된 바와 같이
현재이 기능은 모든 브라우저에서 기본적으로 구현되지 않습니다. Traceur Compiler, Babel 또는 Rollup과 같은 많은 변환기에서 구현됩니다.
여기 Webpack의 Babel 로더 예제가 있습니다.
폴더를 만듭니다. package.json 파일을 거기에 추가하십시오.
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
명령 행에서 폴더를여십시오. 운영:
npm install.
2 개의 파일을 만드십시오 :
cats.js :
export var cats = ['dave', 'henry', 'martha'];
app.js :
import {cats} from "./cats.js";
console.log(cats);
babel-loader를 올바르게 사용하려면 webpack.config.js 파일을 추가 해야 합니다.
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
명령 줄에서 실행 :
webpack ./app.js app.bundle.js
이제 폴더에 file : app.bundle.js 됩니다.
index.html 파일 만들기 :
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
브라우저에서 열면 콘솔에 결과가 표시됩니다.
[ 'dave', 'henry', 'martha']
사용법 ES6 (Typescript) 모듈 예제
2016 년 7 월 [MDN] [1]에 작성된 바와 같이
현재이 기능은 모든 브라우저에서 기본적으로 구현되지 않습니다. Traceur Compiler, Babel 또는 Rollup과 같은 많은 변환기에서 구현됩니다.
그래서 Webpack의 Typescript 로더 예제가 있습니다 :
//할 것
tsd 및 jquery가없는 http://www.jbrantly.com/typescript-and-webpack/ 이 기사의 단순화 된 버전을 작성하십시오.