タグ付けされた質問 「webpack」

WebpackはJavaScriptモジュールバンドルです。Webpackは依存関係のあるモジュールを受け取り、それらのモジュールを表す静的アセットを生成します。Webpackの主要な機能は拡張性に基づいており、開発者はWebアーキテクチャとWebパフォーマンスのベストプラクティスを使用できます。

8
NPM対Bower対Browserify対Gulp対Grunt対Webpack
最も人気のあるJavaScriptパッケージマネージャー、バンドラー、タスクランナーに関する私の知識を要約しようとしています。私が間違っている場合は修正してください: npm&bowerはパッケージマネージャーです。依存関係をダウンロードするだけで、自分でプロジェクトを構築する方法がわかりません。彼らは何を知っていることは呼び出すことですwebpack/ gulp/ gruntすべての依存関係を取得した後。 bowerに似てnpmいますが、フラット化された依存関係ツリーを構築します(npm再帰的に行うのとは異なります)。意味npmが、(数回同じフェッチすることができる)、各依存性をフェッチに依存関係をbower手動でサブ依存性を含むことを期待。時々bower、npmフロントエンドとバックエンドでそれぞれ一緒に使用されます(フロントエンドで各メガバイトが重要になる場合があるため)。 gruntおよびgulp自動化することができる自動化、すべてのタスクランナー(すなわち、コンパイルCSS /サス、最適化画像は、バンドルを作成し、縮小化/ transpileこと)です。 grunt対gulp(maven対、gradleまたは構成対コード)。Gruntは、個別の独立したタスクの構成に基づいており、各タスクはファイルを開いたり、処理したり、閉じたりします。Gulpは必要なコード量が少なく、Nodeストリームに基づいているため、パイプチェーンを構築して(同じファイルを再度開くことなく)高速化できます。 webpack(webpack-dev-server)-私にとっては、すべてのJS / CSSウォッチャーを忘れることができる変更のホットリロードを備えたタスクランナーです。 npm/ bower+プラグインはタスクランナーを置き換える場合があります。それらの機能は交差することが多いため、gulp/ grunt以上のnpmプラグインを使用する必要がある場合は、さまざまな影響があります。しかし、タスクランナーは複雑なタスクに適しています(たとえば、「ビルドごとに、バンドルを作成し、ES6からES5にトランスパイルし、すべてのブラウザーエミュレーターで実行し、スクリーンショットを作成し、ftp経由でドロップボックスにデプロイします」)。 browserifyブラウザのノードモジュールをパッケージ化できます。browserify対nodeさんはrequire、実際にあるCommonJS対AMD。 質問: webpack&とはwebpack-dev-server?公式ドキュメントには、それがモジュールバンドラーであると記載されていますが、私にとってはそれは単なるタスクランナーです。違いは何ですか? どこで使用しbrowserifyますか?node / ES6インポートでも同じことはできませんか? するときは、使用するgulp/ grunt上npm+プラグイン? 組み合わせを使用する必要がある場合は例を提供してください
1886 gruntjs  npm  gulp  bower  webpack 

11
WebpackでのjQueryプラグインの依存関係の管理
私はアプリケーションでWebpackを使用しています。ここでは、すべてのJavaScriptファイル/コード用のbundle.jsと、jQueryやReactなどのすべてのライブラリ用のvendors.jsの2つのエントリポイントを作成しています。依存関係としてjQueryがあり、vendors.jsにもそれらを含めたいプラグインを使用するにはどうすればよいですか?これらのプラグインに複数の依存関係がある場合はどうなりますか? 現在、私はこのjQueryプラグインをここで使用しようとしています-https ://github.com/mbklein/jquery-elastic。Webpackのドキュメントでは、providePluginとimports-loader について言及しています。私はprovidePluginを使用しましたが、それでもjQueryオブジェクトは利用できません。これが私のwebpack.config.jsがどのように見えるかです- var webpack = require('webpack'); var bower_dir = __dirname + '/bower_components'; var node_dir = __dirname + '/node_modules'; var lib_dir = __dirname + '/public/js/libs'; var config = { addVendor: function (name, path) { this.resolve.alias[name] = path; this.module.noParse.push(new RegExp(path)); }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jquery: "jQuery", "window.jQuery": …



6
babelとwebpackを使用しているときにソースマップを生成するにはどうすればよいですか?
私はwebpackを初めて使用するので、ソースマップを生成するための設定が必要です。webpack serveコマンドラインから実行していますが、正常にコンパイルされます。しかし、本当にソースマップが必要です。これは私webpack.config.jsです。 var webpack = require('webpack'); module.exports = { output: { filename: 'main.js', publicPath: '/assets/' }, cache: true, debug: true, devtool: true, entry: [ 'webpack/hot/only-dev-server', './src/components/main.js' ], stats: { colors: true, reasons: true }, resolve: { extensions: ['', '.js', '.jsx'], alias: { 'styles': __dirname + '/src/styles', 'mixins': __dirname + '/src/mixins', …

15
Webpackで環境依存変数を渡す
Angularアプリをgulpからwebpackに変換しようとしています。gulpでは、gulp-preprocessを使用して、HTMLページのいくつかの変数(データベース名など)をNODE_ENVに応じて置き換えます。Webpackで同様の結果を得る最良の方法は何ですか?

5
Webpackを使用したvue.jsプロジェクトのat( '@')サインインパスを使用したES6インポート
私は新しいvue.jsプロジェクトを開始しているので、vue-cliツールを使用して、新しいWebpackプロジェクト(つまりvue init webpack)を足場しました。 生成されたファイルを調べていると、src/router/index.jsファイルに次のインポートが含まれていることに気付きました。 import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] }) これまでに@パスのアットマーク()を見たことがない。私はそれが相対パスを許可しているのではないかと思っています(たぶん?)。 オンラインで検索してみましたが、説明が見つかりませんでした( "アットマーク"を検索するか、リテラル文字を使用し@ても検索条件として役に立たないためです)。 @このパスでは何をしますか(ドキュメントへのリンクは素晴らしいでしょう)、これはes6のものですか?ウェブパックのこと?ビューローダーのこと? 更新 Felix Klingに、この同じ質問について別の重複したStackoverflow質問/回答を教えてくれてありがとう。 …


8
Webpackの「publicPath」は何をしますか?
Webpack docsoutput.publicPathは次のように述べています: output.pathJavaScriptの観点から。 これが実際に何を意味するかについて詳しく説明していただけますか? 私はとを使用output.pathしoutput.filenameて、Webpackが結果を出力する場所を指定していますが、何を入力するoutput.publicPath必要があるか、またそれが必要かどうかはわかりません。 module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } }

2
WebpackのHot Module Replacementとは正確には何ですか?
WebpackのHot Module Replacementに関するいくつかの ページを読みました。それを使用 するサンプルアプリもあります。 私はこれをすべて読みましたが、まだアイデアがわかりません。 どうすればよいですか? 開発でのみ使用され、本番では使用されないのですか? LiveReloadに似ていますが、自分で管理する必要がありますか? WebpackDevServerは何らかの方法でLiveReloadと統合されていますか? CSS(1つのスタイルシート)とJSモジュールをディスクに保存するときに、ページをリロードしたり、LiveReloadなどのプラグインを使用したりせずに更新したいとします。これはHot Module Replacementが役立ちますか?どのような作業を行う必要がありますか。HMRはすでに何を提供していますか?

4
Webpackスタイルローダーとcss-loader
2つの質問があります。 1) CSSローダーとスタイルローダーは、2つのWebpackローダーです。両者の違いがわかりませんでした。2つのローダーが同じ仕事をするときに、なぜ2つのローダーを使用する必要があるのですか? 2)上記のReadme.mdファイルで言及されている.useable.lessおよび.useable.cssは何ですか?

14
Webpackで圧縮されていない圧縮されたバンドルを構築する方法は?
これが私の webpack.config.js var webpack = require("webpack"); module.exports = { entry: "./entry.js", devtool: "source-map", output: { path: "./dist", filename: "bundle.min.js" }, plugins: [ new webpack.optimize.UglifyJsPlugin({minimize: true}) ] }; で構築しています $ webpack 私のdistフォルダーでは、 bundle.min.js bundle.min.js.map 非圧縮も確認したい bundle.js

3
SystemJSとWebpackの違いは何ですか?
私は最初のAngularアプリケーションを作成しており、モジュールローダーの役割を理解します。なぜそれらが必要なのですか?Googleで検索して検索しようとしましたが、アプリケーションを実行するためにそれらの1つをインストールする必要がある理由がわかりません。 importノードモジュールからものをロードするのに使用するだけでは十分ではないでしょうか? 私はこのチュートリアル(SystemJSを使用)に従い、systemjs.config.jsファイルを使用するようにしています: /** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'transpiled', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs' }; // packages tells …



弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.