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

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

18
実験的な構文 'classProperties'のサポートは現在有効になっていません
Djangoプロジェクト内でReactをセットアップしているときに、このエラーに遭遇しました モジュールビルドのModuleBuildErrorが失敗しました（./node_modules/babel-loader/lib/index.jsから）：SyntaxError：C：\ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js：実験的な構文 'classPropertiesのサポート'は現在有効になっていません（17：9）： 15 | 16 | class BodyPartWrapper extends Component { > 17 | state = { | ^ 18 | 19 | } 20 | Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel …
20
React-Native：モジュールAppRegistryは登録済みの呼び出し可能なモジュールではありません
現在、ES6のreact-native-webpack-serverをAndroidエミュレーターで実行しようとしています。違いは、私は私をアップグレードしたあるpackage.jsonとbuild.grade使用に反応し0.18.0て、ブート時にこのエラーを取得しています。私の知る限りでAppRegistryは正しくインポートされています。コードをコメントアウトしても、このエラーはまだ発生します。これはiOSで問題なく動作します。 何が悪いのですか？ 編集：0.18.0をサポートする他のボイラープレートを試した後も、同じ問題に遭遇しています。
6
Webpack 4-最小化を構成する方法
Webpack 4には次のステートメントが付属しています。 webpack.optimize.UglifyJsPluginは削除されました。代わりにconfig.optimization.minimizeを使用してください。 十分に公平ですが、内部で実行されているUglifyJsPluginインスタンスの構成に関する情報（キャッシュディレクトリの変更など）が見つかりません。これはできますか？
3
HtmlWebpackPluginは相対パスファイルを挿入し、ルート以外のWebサイトパスをロードすると破損します
バンドルされたjsとcssをhtmlテンプレートファイルに挿入するために、webpackとHtmlWebpackPluginを使用しています。 new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), そして、以下のhtmlファイルを生成します。 <!doctype html> <html lang="en"> <head> ... <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> これは、アプリのルートにアクセスすると正常に機能しlocalhost:3000/ますが、たとえば、localhost:3000/items/1バンドルされたファイルに絶対パスが挿入されていないため、別のURLからアプリにアクセスしようとすると失敗します。htmlファイルがロードされると、/itemsreact-routerがまだロードされていないため、存在しないディレクトリ内でjsファイルを探します。 HtmlWebpackPluginに絶対パスでファイルを挿入させるにはどうすればいいですか？Expressは/distディレクトリではなくディレクトリのルートでファイルを探し/dist/items/main-...min.jsますか？または、問題を回避するためにExpressサーバーを変更できますか？ app.use(express.static(__dirname + '/../dist')); app.get('*', function response(req, res) { res.sendFile(path.join(__dirname, '../dist/index.html')); }); 基本的に、私は行を取得する必要があります： <script src="main...js"></script> ソースの先頭にスラッシュを付ける。 <script src="/main...js></script>
5
ローカルネットワークのデバイスからwebpack-dev-serverにアクセスする方法
いくつかのwebpack開発サーバーの構成があります（構成全体の一部です）。 config.devServer = { contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'), stats: { modules: false, cached: false, colors: true, chunk: false }, proxy: [{ path: /^\/api\/(.*)/, target: options.proxyApiTarget, rewrite: rewriteUrl('/$1'), changeOrigin: true }] }; function rewriteUrl(replacePath) { return function (req, opt) { // gets called with request and proxy …
7
WebpackでjQueryを実際のWindowオブジェクトに公開する
jQueryオブジェクトを、ブラウザーの開発者コンソール内からアクセスできるグローバルウィンドウオブジェクトに公開したい。今、私のwebpack設定には次の行があります： plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] これらの行は、私のwebpackモジュールの各ファイルにjQuery定義を追加します。しかし、プロジェクトをビルドして、次のように開発者コンソールでjQueryにアクセスしようとすると、 window.$; window.jQuery; これらのプロパティは未定義であると言っています... これを修正する方法はありますか？
16
Typescriptreact-モジュール '' react-materialize 'の宣言ファイルが見つかりませんでした。'path / to /module-name.js'は暗黙的に任意のタイプを持っています
私はreact-materializeからコンポーネントをインポートしようとしています- import {Navbar, NavItem} from 'react-materialize'; しかし、webpackが私の.tsxものをコンパイルしているとき、それは上記のエラーをスローします- ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js' implicitly has an 'any' type. これに対する解決策。このimportステートメントを解決してwebpackを操作する方法がts-loaderわかりません。 index.js反応-マテリアライズルックスのはこれを気に入っています。しかし、自分のファイルにモジュールをインポートするためにこれを解決する方法.. https://github.com/react-materialize/react-materialize/blob/master/src/index.js
4
割り当ての左側にあるJavascriptオブジェクトブラケット表記（{ナビゲーション} =）
私はこれまでにこの構文を見たことがなく、それが何なのか疑問に思っています。 var { Navigation } = require('react-router'); 左側の括弧は構文エラーを投げています： 予期しないトークン{ webpack設定のどの部分が変換されているのか、構文の目的が何かはわかりません。ハーモニーなの？誰かが私を啓発できますか？
19
フォント 'data：font / woff…'のロードを拒否しました。これは、コンテンツセキュリティポリシーディレクティブ「default-src 'self'」に違反しています。「font-src」に注意してください
私の反応webAppはブラウザーコンソールでこのエラーを出します Refused to load the font 'data:font/woff;base64,d09........' because it` `violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. また： Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note …
6
jsxという名前のファイルの場合、webpackはモジュールを見つけることができません
このようにwebpack.config.jsを書くと module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; そしてindex.jsx私はreactモジュールをインポートしますApp import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = document.getElementById('box') render( …
7
「このファイルタイプを処理するには、適切なローダーが必要になる場合があります」WebpackとBabel
ES6アセットをコンパイルするためにBabelでWebpackを使用しようとしていますが、次のエラーメッセージが表示されます。 You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' これは私のWebpack設定がどのように見えるかです： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './index', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/dist/' }, …
4
Webpackローダー対プラグイン; 違いは何ですか？
Webpackのローダーとプラグインの違いは何ですか？ プラグインのドキュメントはただ言う： プラグインを使用して、通常Webpackのバンドルに関連する機能を追加します。 babelがjsx / es2015変換にローダーを使用することは知っていますが、他の一般的なタスク（たとえば、copy-webpack-plugin）が代わりにプラグインを使用しているようです。
21
構成オブジェクトが無効です。Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されました
このシンプルなhelloworldreactアプリをオンラインコースから作成しましたが、次のエラーが発生します。 構成オブジェクトが無効です。Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されています。-構成に不明なプロパティ「postcss」があります。これらのプロパティは有効です：object {amd？、bail？、cache？、context？、dependencies？、devServer？、devtool？、entry、externals？、loader？、module？、name？、node？、output？、performance？ 、plugins？、profile？、recordsInputPath？、recordsO utputPath？、recordsPath？、resolve？、resolveLoader？、stats？、target？、watch？、watchOptions？タイプミスの場合：修正してください。 ローダーオプションの場合：webpack 2では、構成でカスタムプロパティを使用できなくなりました。module.rulesのローダーオプションを介してオプションを渡すことができるように、ローダーを更新する必要があります。ローダーが更新されるまで、LoaderOptionsPluginを使用してこれらのオプションをローダーに渡すことができます：plugins：[new webpack.LoaderOptionsPlugin（{// test：/。xxx $ /、//これは一部のモジュールオプションにのみ適用できます：{postcss： ...}}）]-configuration.resolveに不明なプロパティ「root」があります。これらのプロパティは有効です：object {alias？、aliasFields？、cachePredicate？、descriptionFiles？、enforceExtension？、enforceModuleExtension？、extensions？、fileSystem？、mainFields？、mainFiles？、moduleExtensions？、modules？、plugins？、resolver？、symlinks ？、unsafeCache ？、useSyncFileSystemCalls？} --configuration.resolve.extensions [0]は空であってはなりません。 私のwebpackファイルは次のとおりです。 // work with all paths in a cross-platform manner const path = require('path'); // plugins covered below const { ProvidePlugin } = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // …
5
Webpack Babel 6 ES6デコレーター
ES6でwebpackを私のバンドラーとして作成したプロジェクトがあります。ほとんどのトランスパイルは問題なく動作しますが、デコレータをどこかに含めようとすると、次のエラーが発生します。 Decorators are not supported yet in 6.x pending proposal update. 私はbabelの課題追跡を調べましたが、そこで何も見つけることができなかったので、間違って使用していると思います。私のwebpack設定（関連ビット）： loaders: [ { loader: 'babel', exclude: /node_modules/, include: path.join(__dirname, 'src'), test: /\.jsx?$/, query: { plugins: ['transform-runtime'], presets: ['es2015', 'stage-0', 'react'] } } ] 私は他に何も問題はありません、矢印関数、すべての構造を正常に解体すること、これが機能しない唯一のものです。 私はいつでも以前に動作していたbabel 5.8にいつでもダウングレードできることを知っていますが、これを現在のバージョン（v6.2.0）で動作させる方法がある場合は役立ちます。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.