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 и сразу 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
Теперь в папке будет файл: app.bundle.js .
Создайте файл index.html:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Откройте его в браузере и посмотрите результат в консоли:
['dave', 'henry', 'martha']
Пример использования ES6 (Babel)
как написано в MDN в июле 2016 года:
В настоящее время эта функция не реализована ни в каких браузерах. Он реализован во многих транспилерах, таких как компилятор Traceur, Babel или Rollup.
Итак, вот пример с загрузчиком Babel для Webpack:
Создать папку. Добавьте файл 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
Теперь в папке будет файл: app.bundle.js .
Создайте файл index.html :
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Откройте его в браузере и посмотрите результат в консоли:
['dave', 'henry', 'martha']
Пример использования ES6 (Typcript)
как написано в [MDN] [1] в июле 2016 года:
В настоящее время эта функция не реализована ни в каких браузерах. Он реализован во многих транспилерах, таких как компилятор Traceur, Babel или Rollup.
Итак, вот пример с загрузчиком TypScript для Webpack:
//СДЕЛАТЬ
Создайте упрощенную версию этой статьи: http://www.jbrantly.com/typescript-and-webpack/ без tsd и jquery.