Slide 1
Slide 1 text
PhoneGap/Cordova ͱ
Webpack Ͱ࡞Δ
ϋΠϒϦουΞϓϦ։ൃڥ
ԶͷΛฉ͚ʂʂLTେձ #1
2017/03/15
Slide 2
Slide 2 text
ࣗݾհ
• ৽ ٓါ ʢShinpuku Noriyukiʣ
• גࣜձࣾϕʔλιϑτ ΤϯδχΞ
• झຯɾಛٕɿϓϩάϥϛϯά
https://github.com/puku0x
Slide 3
Slide 3 text
։ൃதͷϓϩμΫτ
Slide 4
Slide 4 text
എܠ
• PhoneGapͰΞϓϦ࡞͖ͬͯͨ
• ͦΖͦΖ৽͍ٕ͠ज़Λಋೖ͍ͨ͠
• ES2015, TypeScript, PostCSS, …
Slide 5
Slide 5 text
ࣗͰ࡞Ζ͏
τϥϯεύΠϥ
#BCFMͱ͔1PTU$44
1IPOF(BQ
ES5/CSS3
ʹม
ES2015, SassͳͲ
Slide 6
Slide 6 text
Α͠ʂnpmͱGulpͱ…
Slide 7
Slide 7 text
πʔϧଟ͗͢ʂ
Slide 8
Slide 8 text
Webpack
Slide 9
Slide 9 text
Webpack 2.x
• ґଘؔղܾͱมˍ݁߹
Slide 10
Slide 10 text
ߏ
• npm + Webpack + PhoneGap
/src /www
ES5/CSS3
ʹม
Slide 11
Slide 11 text
Webpackઃఆ
Slide 12
Slide 12 text
ೖग़ྗઃఆ
const webpack = require('webpack');
module.exports = (env) => {
return {
entry: {
app: __dirname + '/src/js/app.js'
},
output: {
path: __dirname + '/www/assets',
filename: '[name].bundle.js',
},
}};
TSD͔Β
XXXBTTFUT
Slide 13
Slide 13 text
ϩʔμઃఆʢES2015ʣ
const webpack = require('webpack');
module.exports = (env) => {
return {
:
module: {
rules: [{ test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: ['babel-loader'] }]
}
};
};
YܥzVTFz
MPBEFSলུෆՄ
Slide 14
Slide 14 text
Babelઃఆ
{
"presets": [
[
“es2015", {"modules": false}
]
],
"plugins": [
"angularjs-annotate"
]
}
YܥͰ"OHVMBS+4
Λ͏ͱ͖༻
Slide 15
Slide 15 text
࣮ߦεΫϦϓτ
"scripts": {
"build": "webpack"
}
$ npm run build
$ phonegap serve
Slide 16
Slide 16 text
Sass/SCSS͍͍ͨʂ
Slide 17
Slide 17 text
ϩʔμઃఆʢPostCSSʣ
const webpack = require('webpack');
module.exports = (env) => {
return {
:
module: {
rules: [{ test: /\.(css|scss)$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}]
}
};
};
Slide 18
Slide 18 text
PostCSSઃఆ
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-url'),
require('postcss-cssnext'),
require('postcss-nested'),
require('postcss-mixins'),
require(‘postcss-simple-vars')
]
}
Slide 19
Slide 19 text
Ϗϧυ
$ npm run build
$ phonegap serve
…͍ɺͪΐͬͱͯʂ
Slide 20
Slide 20 text
ϑΝΠϧࢹ
"scripts": {
"webpack": "webpack —-watch",
"serve": "phonegap serve",
"start": "npm run webpack & npm run serve"
}
$ npm start
WindowsڥͰconcurrently͕ඞཁ͔
Slide 21
Slide 21 text
ʂ
/src /www
Ϗϧυ
มߋݕ มߋݕ σϓϩΠ
ES2015, Sass ES5, CSS3
https://github.com/puku0x/angularjs-onsenui2-webpack2
Slide 22
Slide 22 text
·ͱΊ
• WebpackΛ͓͏
• ͬͱ͍͍ํ๏͕͋Εੋඇʂ