タグ付けされた質問 「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 

私はアプリケーションで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": …

451 javascript  jquery  amd  webpack 

Angular（バージョン2、4、6、...）をライブWebサーバーでの運用にバンドルするための最良の方法は何ですか。 Angularのバージョンを回答に含めてください。これにより、今後のリリースに移行したときに追跡しやすくなります。

353 angular  webpack  systemjs  angular-cli 

からに移動しようとしGulpていWebpackます。でGulp、私はそのコピーからすべてのファイルとフォルダのタスク持た/静的/フォルダへ/ビルド/フォルダを。同じようにするにはどうすればよいWebpackですか？プラグインは必要ですか？

330 javascript  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', …

328 javascript  webpack  build-process  babeljs  source-maps 

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

306 javascript  webpack 

私は新しい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質問/回答を教えてくれてありがとう。 …

273 javascript  webpack  ecmascript-6  vue.js 

Angular 2+とAngular CLIを使用しています。 プロジェクトにfont-awesomeを追加するにはどうすればよいですか？

269 angular  webpack  angular-cli 

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?" } }

250 javascript  webpack 

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

245 javascript  module  livereload  webpack 

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

238 webpack  webpack-style-loader 

これが私の 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

233 javascript  node.js  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 …

222 angular  webpack  systemjs  node-modules 

プロジェクトでES6コードを実行しようとしていますが、予期しないトークンエクスポートエラーが発生します。 export class MyClass { constructor() { console.log("es6"); } }

220 javascript  ecmascript-6  webpack  babel 

ES6をwebpack.configで使用する方法 このリポジトリのように https://github.com/kriasoft/react-starter-kit はしますか？ 例えば： これを使って import webpack from 'webpack'; の代わりに var webpack = require('webpack'); それは必要というよりむしろ好奇心です。

210 webpack