DefinePlugin | webpack
The DefinePlugin replaces variables in your code with other values or expressions at compile time. This can be useful for allowing different behavior between development builds and production builds. If you perform logging in your development build but not in the production build you might use a global constant to determine whether logging takes place. That's where DefinePlugin shines, set it and
webpack 3 リリース内容まとめ - dackdive's blog
2系に上げるかどうかを悩んでいる間に 3.0.0 がリリースされてしまった。 を参考にアップデート内容をメモ。 概要、v2 からのマイグレーション 大きな feature は Scope Hoisting と Magic Comment ぐらい。 v2 からの移行も特別な作業は必要なく、たいていはバージョン上げるだけで機能するとのこと。 それでもメジャーバージョンを上げたのは内部的に breaking changes があって、いくつかのプラグインには影響しそうだったから、とのこと。 ということはプラグインが動くかどうか一応確認した方がいい...？ Scope Hoisting 目玉機能その１。 これまでの webpack ではモジュールを１つ１つクロージャでラップしており、それによりそれぞれのモジュールの独立性が保たれていた（関数名の衝突とか）ものの、ブラウザでの実行速度が重くなる原因に
Producing a single test bundle · Issue #23 · codymikol/karma-webpack
If I add preprocessors: {'**/*_test.js': ['webpack']} and I have 100s of tests, that produces 100s of large bundles - that's slow, reruns tests all the time since karma keeps detecting changes and rerunning all ests as each test bundle is produced by webpack and this sends many megabytes to the test browser to evaluate. Instead, if I add preprocessors: {"test_index.js": ['webpack']} and require al
ReferenceError: Can't find variable: webpackJsonp · Issue #24 · codymikol/karma-webpack
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account
JavaScriptのテスト環境構築(Mocha + power-assert + Karma + babel + webpack) - Qiita
JavaScriptのテスト環境構築(Mocha + power-assert + Karma + babel + webpack)JavaScriptmochakarmapower-assert この記事は、初めてJavaScriptのテスト環境を作ってみたおじさんによる、これからJavaScriptのテストを書いていきたいけど、登場人物が多すぎてなにやらめんどくさそうと思っている方に向けた記事兼備忘録です。 初めてのJavaScriptテスト環境構築で一応公式ドキュメントに目を通したけど英語の意味をちゃんと読み取れておらず、ツールやライブラリの理解や使い方が間違っている場合がありますのでアドバイスいただけると幸いです。 各テストツールやライブラリの紹介 JavaScriptのテスト環境を構築するときの一つ目の壁がツールやライブラリがたくさん出てきて、どれを使っていいかわからない/それぞ
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
(function(){ var self = this; $("button").click(function(){ // }) })() // 古いコードはglobalに定義された何か SomeLib.prototype.foo = function(){ // } 下記のような特徴があります。 ライブラリ系（jQueryやjQuery.functionなど）は別途読み込み common.jsのようなよくある共通ファイルが存在 1ページ中で、scriptはファイル単位で複数読み込み 原始的なJavaScript配信状態（Sprocketsのようなビルドプロセスとは全く無縁な状態） jQuery以外に、ライブラリ・フレームワークなどは基本入っていない 色々とJavaScript初心者殺しな記法が多い (function(){})()を利用したglobal汚染回避 self = thisの
webpackでjQueryの多重ロードを回避する方法 - Qiita
最適解だと確信が持てないので、あえてQiitaに晒してパブリックコメントを募りたい。 今回はMaterialize-CSSとjQuery Validation Pluginで発生したけど、似たシチュエーションは多そう。 Qiita内だとこの辺の記事とか。 結構困ったwebpackのお話 【Typescript】DefenitelyTypedはjQuery objectをbootstrapで拡張しない？ stack overflowだとこの記事がまさに。 Managing jQuery plugin dependency in webpack TL; DR 序 jQuery2系を内包するMaterialize-CSSを使いつつ、 jQuery1系を推奨するjQuery Validation Pluginが効いたフォームを作りたい。 破 あちらを立てればこちらが立たず。気づけばjQuery3系
Remove console.logs with Webpack & Uglify
I am trying to remove console.logs with Webpack's Uglify plugin but it seems that Uglify plugin that comes bundled with Webpack doesn't have that option, its not mentioned in the documentation. I am initializing uglify from webpack like this: new webpack.optimize.UglifyJsPlugin() My understanding is that I can use standalone Uglify lib to get all the options, but I don't know which one? The proble
Hot Module Replacementの設定と仕組みを理解する - Qiita
Hot Module Replacement (HMR)はwebpackの提供する仕組みで、画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールです。再描画無しにと言うのは、「F5とかリロードボタンを押さなくても自動的に再描画してくれますよ」ということではなく、文字通り変更したモジュールのみを置き換えてくれます。 Reactを導入して開発環境を整えると、当然のようについてくるので使う分には意識する必要もないですが、、 で、これって何なんだっけ？というのを整理しました。 HMRは、Websocket通信と、ソースコードに注入されたいくつかのRuntimeと呼ばれるスクリプトによって実現されます。ソースコードの変更をコンパイラが検知し、WebSocketでブラウザに通知、通知を受け取ったRuntimeはサーバーから変更分のスクリプトを取得してモジュールを置き換えます。 前述
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
Webpack your bags
Stop Coding, Start Leading: Shifting dynamics for startup CEOs Last updated: December 2020 By now you’ve probably heard about this new cool tool on the block called Webpack. If you haven’t looked that much into it you’re probably a bit confused by some people calling it a build tool à la Gulp and other people calling it a bundler like Browserify. If on the other hand you have looked into it you’re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Including git commit hash and date in webpack build
Karma + Webpack (babel-loader) + ES6 "Unexpected token import"
Concepts - Using Third Party Libraries that Are not CJS/AMD/ES6 Modules · Issue #63 · webpack/webpack.js.org
Support for webpack? · Issue #600 · videojs/videojs-contrib-hls
support absolute filenames by yyx990803 · Pull Request #266 · jantimon/html-webpack-plugin
Multiple entry points -> multiple html outputs? · Issue #218 · jantimon/html-webpack-plugin
GitHub - jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles
How to inject custom meta tags in html-webpack-plugin?
html-webpack-plugin not inject js file into index.html when using webpack-dev-server