Embed Size (px)
Citation preview
ｼｭｯと見るwebpack2(仮)()2017/03/16 一斉会議
@muryoimpl
1. そもそもwebpackとは:question:
2. 設定とloader, plugin とか
3. 1.x と 2.x の違い
4. webpacker gem と webpack
Contents
webpack is a module bundler for modern JavaScript applications
node modules etc. をがっちゃんこして、browser で使えるようにするツール、くらいに思っておけば違和感なさそう。
webpack.config.js みたいな設定ファイルに設定を書いて、webpack コマンドから実行する。
例: $ webpack config webpack.config.js
そもそもwebpackとは
ごく簡単な例) webpack.config.js ver. 1.x のやつ
const webpack = require('webpack');
const path = require('path');
module.exports =
target: 'electron',
entry: path.resolve(__dirname, 'src/index.jsx'),
output:
path: path.resolve(__dirname),
filename: 'app.bundle.js',
,
module:
loaders: [
test: /\.jsx?$/,
loader: 'babel',
query: presets: ['react', 'es2015'] ,
exclude: path.resolve(__dirname, 'node_modules') ,
],
設定は前述の webpack.config.js 相当のもので行う
–config file でファイルを指定できる
目的に特化した loader を install して使うことでいろんなこと
ができる
plugin でがっちゃんこしたときに何かをさせることも可能
設定とloader, plugin とか
babel-loader
babel を実行することができる。
option として渡す、.babelrc に設定を書いて
おくでも可
style-loader/css-loader/image-loader
CSS, 画像をjsの中に入れてしまうことができる
設定とloader, plugin とか
DefinePlugin
定義した値を固めたJSに埋め込む
UglifyJsPlugin
固めたJSを難読化・圧縮する
HtmlWebpackPlugin
固めたJSをHTMLを作って差し込む
CommonsChunkPlugin
entry files の共通ファイルを抽出・
bundleする
よくみかけるPlugins
webpack.config.js の plugins の設定例
plugins: [
new webpack.DefinePlugin(
'process.env.NODE_ENV': JSON.stringify('production')
),
new webpack.optimize.UglifyJsPlugin(
compress:
warnings: false
)
]
UglifyJsPluginを使わない
Time: 8435ms
Asset Size Chunks Chunk Names
./dist/app.bundle.js 6.73 MB 0 [emitted] [big] app
./dist/child.bundle.js 3.23 MB 1 [emitted] [big] child
UglifyJsPluginを使う
Time: 18047ms
Asset Size Chunks Chunk Names
./dist/app.bundle.js 1.16 MB 0 [emitted] [big] app
./dist/child.bundle.js 385 kB 1 [emitted] [big] child
設定の変更 query -> options etc.
loaderの名前を省略できなくなった
babel -> babel-loader
json-loader が必要なくなった
tree shaking
既存pluginの挙動や設定がかわっている
詳しくは…
1.xと2.xの違い
2.x 機能の嬉しいところ
tree shaking
使って無いコードを除外して bundle してくれる。(ES2015 の import/export に依存)
rollup という module bundler にあった機能で、2.x 系で webpack も導入した。
export されている関数が使われていないと、その部分を削除してくれる。
Tree Shaking
もし babel を使っているならば、ちょっとだけ設定の変更が必要です。
"presets": [["es2015", "modules": false]]
commonJs 形式への変換を止めさせる必要があります。export/import に依存しているため。 でも実際のところ、そこま
でサイズ減には貢献しない
$ rails new webpacktest webpack=react
.......
create config/webpack
create config/webpack/development.js
create config/webpack/production.js
create config/webpack/shared.js
config/webpack 以下に設定ファイルが配置されている
webpacker gemとwebpack
webpack-merge の機能を使って、共通的な設定をshared.jsに、 それぞれの環境設定を development.js, production.js
にもって shared.js を読み込んでいる。
bin/webpacker, bin/webpack-dev-server, bin/webpack-watcher から NODE_ENV等の環境変数をセットした状態で
webpack c config/webpack/*.js を実行してjsをbundleしている。
webpackerのwebpack
config/webpack/shared.js
// Note: You must restart bin/webpackwatcher for changes to take effect
const webpack = require('webpack')
const path = require('path')
const process = require('process')
const glob = require('glob')
const extname = require('pathcompleteextname')
let distDir = process.env.WEBPACK_DIST_DIR
if (distDir === undefined)
distDir = 'packs'
const config =
entry: glob.sync(path.join('app', 'javascript', 'packs', '*.js*')).reduce(
(map, entry) =>
const basename = path.basename(entry, extname(entry))
const localMap = map
localMap[basename] = path.resolve(entry)
return localMap
config/webpack/development.js
// Note: You must restart bin/webpackwatcher for changes to take effect
const webpack = require('webpack')
const merge = require('webpackmerge')
const sharedConfig = require('./shared.js')
module.exports = merge(sharedConfig.config,
devtool: 'sourcemap',
stats:
errorDetails: true
,
output:
pathinfo: true
,
plugins: [
new webpack.LoaderOptionsPlugin(
debug: true
)
config/webpack/production.js
// Note: You must restart bin/webpackwatcher for changes to take effect
const webpack = require('webpack')
const merge = require('webpackmerge')
const CompressionPlugin = require('compressionwebpackplugin')
const sharedConfig = require('./shared.js')
module.exports = merge(sharedConfig.config,
output: filename: '[name][chunkhash].js' ,
plugins: [
new webpack.LoaderOptionsPlugin(
minimize: true
),
new webpack.optimize.UglifyJsPlugin(),
new CompressionPlugin(
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /.js$/
)
resolve.extension の記載で .js のように . を入れ忘れてに処
理されない
1系の場合は、json-loaderを入れてなくて node_modules 以
下のファイルのbundleに失敗する
CSS を webpack で取り込んで、class が style に展開されて
selector として利用したいものが消えてる
ハマりどころ
このツールも webpack で
ビルドしてるよ:exclamation:
const webpack = require('webpack')
const merge = require('webpackmerge')
const path = require('path')
const nodeEnv = process.env.NODE_ENV
const common =
target: 'electronrenderer',
entry:
'app': path.resolve(__dirname, 'src/index.jsx'),
'child': path.resolve(__dirname, 'src/child.jsx')
,
output:
path: path.resolve(__dirname),
filename: './dist/[name].bundle.js'
,
module:
rules: [
このツール で E1 に
出てるよ
たのしい webpack ライフを
