react--webpack webpackのインストールと基本的な使用ES 6構文
4080 ワード
React初日の目標はwebpackのインストールと基本的な使用に熟知している.
.CSS、.SCSSファイルタイプ
ES 5、ES 6構文
JSX構文
webpack
WebpackはJavascriptアプリケーションの静的モジュールパッケージであり、Webpackがアプリケーションを処理すると、アプリケーションに必要な各モジュールを含む依存関係図(dependency graph)が再帰的に構築され、これらのモジュールはすべて1つ以上のbundleにパッケージされます.プロジェクト構造を分析し、JavaScriptモジュールや他のブラウザで直接実行できない拡張言語(Scss、Type Scriptなど)を見つけ、ブラウザで使用するために適切なフォーマットに変換し、パッケージ化することです.
WebpackをインストールWebpackをインストールします.ローカルにはnode環境が必要です.npmを使用してWebpackをインストールします.
//グローバルインストールnpm isntall-g webpack//ローカルインストール(あなたのプロジェクトディレクトリにインストール)npm install--save-dev webpack webpack.config.jsはwebpack v 4から.0.0から、プロファイルを導入する必要はありません.しかし、webpackは依然として高度に構成可能である.最初に4つのコア概念を理解する必要があります.
入口(entry)
出力(output)
loader
プラグイン(plugins)
//一般的な
//cdから作成したいディレクトリcd Desktop//mkdirプロジェクト名mkdir webpackDemo 2、npmを使用してプロジェクトを初期化
//cdからプロジェクトディレクトリcd webpackDemo//プロジェクトnpm init packageを初期化する.jsonファイル、これは標準的なnpm説明ファイルで、現在のプロジェクトの依存モジュール、カスタムスクリプトタスクなど、豊富な情報が含まれています.
3、npmでwebpackをインストールする
//グローバルインストールnpm isntall-g webpack//ローカルインストール(あなたのプロジェクトディレクトリにインストール)npm install--save-dev webpack 4、プロジェクトファイルの作成から使用
5、梱包命令を実行する
Webpack{entry file}{destination for bundled file}ここで発生する問題
問題1:webpack実行に失敗し、webpackモジュールnpm link webpackが見つからない
質問2:webpackバージョンが高すぎるwebpack source/index.js -o public/bundle.js
Loader Webpack自体はJavaScriptモジュールしか処理できませんが、他のタイプのファイルを処理するにはloaderを使用して変換する必要があります.したがって、アプリケーションにcssファイルを追加する必要がある場合は、css-loaderとstyle-loaderを使用する必要があります.彼らは2つの異なることをします.css-loaderはCSSファイルを遍歴し、url()式を見つけて処理します.style-loaderは元のCSSコードをページのstyleラベルに挿入します.次に、css-loaderとstyle-loaderをインストールするには、次のコマンドを使用します(グローバルインストールにはパラメータ-gが必要です).
//css-loader style-loader npm install css-loader style-loader require CSSファイルをインストールするときはloader接頭辞を書きます!style-loader!css-loader!
プロファイルwebpack.config.jsはWebpackを使用して、コマンドラインモードで実現できる他の高度な機能(例えば、後述するloadersやplugins)がたくさんありますが、前述したように、不便でエラーが発生しやすく、より良い方法はプロファイルを定義することです.このプロファイルも簡単なJavaScriptモジュールで、パッケージに関するすべての情報を入れることができます.
1、webpackを作成する.config.jsファイル
2、構成の追加
module.exports = { entry: “./main.js”, output: { path: __dirname, filename: “bundle.js” }, module: { loaders: [ { test:/.css$/, loader: “style-loader!css-loader” } ] } }; 3、コマンドラインはwebpackパッケージを実行する
.SCSSと.CSS css-loader style-loader sass-loaderも同様に処理する.SCSSファイルは、対応するloaderに渡して処理します.Webpackルールに従って:最後に置くloaderはまず実行されます.したがって、まずsass-loaderを使用してscssをcssにコンパイルし、残りの構成とcssファイルの処理は同じである必要があります.他のcss前処理言語では,処理方式と同様に,まずcssにコンパイルし,cssに関連するloaderに渡して処理する.
ES5 ES6
//babelのインストールES 6からES 5 npm install-D babel-core babel-preset-es 2015を実現
//babel-loader npm install-D babel-loader ECMAScriptのインストール
コアコード表記仕様
[ES5 ES6]https://www.cnblogs.com/lovesong/p/4908871.html
JSX babel-loader
まとめwebpack 1、モジュール化開発(import,require)2、前処理(Less,Sass,ES 6,Type Script…)3、主流フレームワーク足場サポート(Vue,React,Angular)4、膨大なコミュニティ(リソースが豊富で学習コストを削減)
.CSS、.SCSSファイルタイプ
ES 5、ES 6構文
JSX構文
webpack
WebpackはJavascriptアプリケーションの静的モジュールパッケージであり、Webpackがアプリケーションを処理すると、アプリケーションに必要な各モジュールを含む依存関係図(dependency graph)が再帰的に構築され、これらのモジュールはすべて1つ以上のbundleにパッケージされます.プロジェクト構造を分析し、JavaScriptモジュールや他のブラウザで直接実行できない拡張言語(Scss、Type Scriptなど)を見つけ、ブラウザで使用するために適切なフォーマットに変換し、パッケージ化することです.
WebpackをインストールWebpackをインストールします.ローカルにはnode環境が必要です.npmを使用してWebpackをインストールします.
//グローバルインストールnpm isntall-g webpack//ローカルインストール(あなたのプロジェクトディレクトリにインストール)npm install--save-dev webpack webpack.config.jsはwebpack v 4から.0.0から、プロファイルを導入する必要はありません.しかし、webpackは依然として高度に構成可能である.最初に4つのコア概念を理解する必要があります.
入口(entry)
出力(output)
loader
プラグイン(plugins)
//一般的な
webpackプロファイルconst webpack=require(‘webpack’);const HtmlWebpackPlugin = require(‘html-webpack-plugin’); const ExtractTextPlugin = require(‘extract-text-webpack-plugin’); module.exports={entry:_dirname+"/app/main.js"、//既に複数回言及されている唯一のエントリファイルoutput:{path:dirname+"/build",filename:"bundle-[hash].js"},devtool:‘none’,devServer:{contentBase:"./public"、//ローカルサーバにロードされているページがあるディレクトリhistoryApiFallback:true,//inline:true,hot:true} module: { rules: [{ test:/(.jsx|.js)KaTeX parse error: Expected 'EOF', got '}' at position 161: … }̲, { …/, use: ExtractTextPlugin.extract({ fallback: “style-loader”, use: [{ loader: “css-loader”, options: { modules: true, localIdentName: '[name][local]–[hash:base64:5]’ } }, { loader: “postcss-loader” }, { }], }) } } ] },pluugins:[new webpack.BannerPlugin(‘著作権所有,翻版必究’)、new HtmlWebpackPlugin({template:_dirname+"/app/index.tmpl.tmpl.html"//newこのプラグインのインスタンスを1つ、関連するパラメータ})、new webpack.optimize.OccurrenceOrderPlugin()、new webpack.optimize.UglifyJsPluggin()、new ExtractTextTextTextTextTextTextTextTePPxtpppplugin()、new lugin(「style.css」)};Webpack 1を使用して、空のプロジェクトフォルダを作成します.//cdから作成したいディレクトリcd Desktop//mkdirプロジェクト名mkdir webpackDemo 2、npmを使用してプロジェクトを初期化
//cdからプロジェクトディレクトリcd webpackDemo//プロジェクトnpm init packageを初期化する.jsonファイル、これは標準的なnpm説明ファイルで、現在のプロジェクトの依存モジュール、カスタムスクリプトタスクなど、豊富な情報が含まれています.
3、npmでwebpackをインストールする
//グローバルインストールnpm isntall-g webpack//ローカルインストール(あなたのプロジェクトディレクトリにインストール)npm install--save-dev webpack 4、プロジェクトファイルの作成から使用
5、梱包命令を実行する
Webpack{entry file}{destination for bundled file}ここで発生する問題
問題1:webpack実行に失敗し、webpackモジュールnpm link webpackが見つからない
質問2:webpackバージョンが高すぎるwebpack source/index.js -o public/bundle.js
Loader Webpack自体はJavaScriptモジュールしか処理できませんが、他のタイプのファイルを処理するにはloaderを使用して変換する必要があります.したがって、アプリケーションにcssファイルを追加する必要がある場合は、css-loaderとstyle-loaderを使用する必要があります.彼らは2つの異なることをします.css-loaderはCSSファイルを遍歴し、url()式を見つけて処理します.style-loaderは元のCSSコードをページのstyleラベルに挿入します.次に、css-loaderとstyle-loaderをインストールするには、次のコマンドを使用します(グローバルインストールにはパラメータ-gが必要です).
//css-loader style-loader npm install css-loader style-loader require CSSファイルをインストールするときはloader接頭辞を書きます!style-loader!css-loader!
プロファイルwebpack.config.jsはWebpackを使用して、コマンドラインモードで実現できる他の高度な機能(例えば、後述するloadersやplugins)がたくさんありますが、前述したように、不便でエラーが発生しやすく、より良い方法はプロファイルを定義することです.このプロファイルも簡単なJavaScriptモジュールで、パッケージに関するすべての情報を入れることができます.
1、webpackを作成する.config.jsファイル
2、構成の追加
module.exports = { entry: “./main.js”, output: { path: __dirname, filename: “bundle.js” }, module: { loaders: [ { test:/.css$/, loader: “style-loader!css-loader” } ] } }; 3、コマンドラインはwebpackパッケージを実行する
.SCSSと.CSS css-loader style-loader sass-loaderも同様に処理する.SCSSファイルは、対応するloaderに渡して処理します.Webpackルールに従って:最後に置くloaderはまず実行されます.したがって、まずsass-loaderを使用してscssをcssにコンパイルし、残りの構成とcssファイルの処理は同じである必要があります.他のcss前処理言語では,処理方式と同様に,まずcssにコンパイルし,cssに関連するloaderに渡して処理する.
ES5 ES6
//babelのインストールES 6からES 5 npm install-D babel-core babel-preset-es 2015を実現
//babel-loader npm install-D babel-loader ECMAScriptのインストール
コアコード表記仕様
[ES5 ES6]https://www.cnblogs.com/lovesong/p/4908871.html
JSX babel-loader
まとめwebpack 1、モジュール化開発(import,require)2、前処理(Less,Sass,ES 6,Type Script…)3、主流フレームワーク足場サポート(Vue,React,Angular)4、膨大なコミュニティ(リソースが豊富で学習コストを削減)