フロントエンド原理主義者が目論んだ脱webpacker

Tomoya Komiyama
Sep 14, 2018 · 13 min read
Image for post
Image for post
webpacker脱出を表現した絵画

初めに

動機

webpack関連のアップデートがwebpacker対応待ち

yarn操作が遅い

フロントエンド原理主義

状況

プロジェクト構造

webpackerの利点

独立可能性の証明

やったこと

純粋webpack

純粋webpack-dev-server

dev-server設定

output: {
publicPath: '/packs/',
path: public/packsへのパス,
filename: '[name]-[hash].js'
},
/* ~~~ 色々設定 ~~~ */
plugins: [
new ExtractTextPlugin({
filename: '[name]-[hash].css',
allChunks: false
}),
new ManifestPlugin({
fileName: 'manifest.json',
publicPath: '/packs/',
writeToFileEmit: true
})
],
devServer: {
publicPath: '/packs/',
contentBase: public/packsへのパス,
host: '0.0.0.0',
port: 3035,
disableHostCheck: true,
headers: {
'Access-Control-Allow-Origin': '*'
}
}
{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: { extractCSS: true }
}]
}
<%= stylesheet_bundle_tag 'main' %>
<%= javascript_bundle_tag 'main' %>
localhost:3035
- packs
-- manifest.json
-- main-[hash].js
-- main-[hash].css
publicPath: 'http://localhost:3035/packs/'

ヘルパー実装

def dev_manifest
# webpack-dev-serverから直接取得する
OpenURI.open_uri("#{dev_server_host}/packs/manifest.json").read end

dev-serverへプロキシ

config.middleware.use DevServerProxy, ssl_verify_none: true

純粋起動

yarn webpack-dev-server --progress --color --hot --config development用のwebpack設定ファイル

そしてwebpack4へ

We are Hiring!

スタディスト開発ブログ

スタディストの開発部がお届けする発展と成長の物語

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store