ホームページ > ウェブフロントエンド > jsチュートリアル > ReactフレームワークにWebpackを導入する方法

ReactフレームワークにWebpackを導入する方法

藏色散人
リリース: 2020-12-22 09:39:17
オリジナル
2980 人が閲覧しました

Webpack を React フレームワークに導入する方法: 最初にフォルダーを作成し、次に「package.json」プロジェクト ファイルを作成し、次に Webpack をグローバルにインストールし、最後に「npm install」を通じてプロジェクトに Webpack をインストールできます。

ReactフレームワークにWebpackを導入する方法

#このチュートリアルの動作環境: Windows7 システム、react17.0.1&&Webpack3.0 バージョン この方法は、すべてのブランドのコンピューターに適しています。

推奨チュートリアル:

react ビデオ チュートリアル

webpack とは何ですか?

Webpack はモジュール パッケージング ツールで、フロントエンドではモジュールとは js、css、画像、その他の種類のファイルを指します。 Webpack は複数のモジュール システムをサポートし、js の複数の記述仕様 (ES6 など) と互換性があり、モジュール間の相互依存関係を処理し、静的リソースを均一にパッケージ化して公開できます。

webpack のインストールと使用

まず、study などのフォルダーを作成し、スタート メニューで cmd を開き、フォルダーに入り、次の手順を実行します。 1. npm init //package.jsonプロジェクトファイルを作成します。

2. npm install -g webpack // webpack をグローバルにインストールします。すでにインストールされている場合はスキップできます。

3. npm install --save-dev webpack //プロジェクトに webpack をインストールします。

作成が完了したら、ファイル ディレクトリに 2 つのフォルダー、dist (パッケージ化後に配置されるフォルダー) と src (プロジェクトを作成する場所) を作成します。 src フォルダー内に、まず、index.js と main.js という 2 つのファイルを作成します。 dist フォルダー内に、ブラウザーが読み取って表示するためのindex.html を作成します。構造は次のとおりです:

dist/index.html に初期コンテンツを記述します。インポートされた js ファイルは、bundle.js ファイルです。このファイルは、後で生成されます。 webpack のパッケージ化ドキュメント。以下に示すように: ReactフレームワークにWebpackを導入する方法

index.js に「エクスポート コード」を入力します: ReactフレームワークにWebpackを導入する方法

module.exports = function() {
  var hello = document.createElement('div');
  hello.textContext = "This is index.js file."
  return hello;
}
ログイン後にコピー

hello 変数をエクスポートし、main.js で変数を受け入れます。次に、この変数がルート タグに挿入されます:

const hello = require('./index.js');
document.querySelector('#root').appendChild(hello());
ログイン後にコピー

次に、webpack を構成するためにルート ディレクトリに webpack.config.js ファイルを作成します。最初に簡単な構成を実行します。ここで主に行うことは次のとおりです。内容を設定し、パッケージ化されたファイルのエントリ パスとストレージ パスを設定します。 webpack.config.js に次のコード ブロックを記述します:

module.exports = {
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
}
ログイン後にコピー

entry は唯一のエントリ ファイルです。つまり、webpack はここから読み取る必要があり、output が出力です。ここで設定されているのは、 dist ディレクトリ.bundle.js ファイル。次に、webpack を実行し、cmd で

".\\node_modules\\.bin\\webpack" を実行します。これは Windows で実行されます。グローバルにインストールされている場合は、「webpack」も使用できます。

さらに、上記の入力方法は必要なく、package.json 内のスクリプトに "start": "webpack" を追加して、npm start コマンドを通じて webpack を有効にします。

package.json のスクリプト部分には、./node_modules/.bin パスがデフォルトで追加されるため、詳細なパス アドレスを入力する必要はありません。 start は特別なスクリプト名です。他の名前を付けることもできますが、start に対応しない場合は、開始するときに npm run {スクリプトで使用した名前} を使用する必要があります (例: npm run)建てる。

開発および運用中の webpack の特定の機能

開発中にコードをデバッグする必要があります。パッケージ化後にエラーが発生した場合、エラーを修正するのに役立つデバッグ ツールが必要です。ソース マップは、この問題の解決に役立ちます。これは webpack.config.js ファイルで設定する必要があります。属性名は devtool です。ユーザーが選択できる 4 つのオプションがあります。

1. ソースマップ: 完全で完全に機能するファイルを別のファイルに生成します。このファイルには最良のソース マップが含まれていますが、パッケージ化されたファイルの構築が遅くなります;

2. 安価なモジュール ソース マップ: 別のファイルで列マッピングなしのマップを生成します 列マッピングなしでは、プロジェクトの構築速度は向上しますが、ブラウザの開発者ツールは特定の行にしか対応できず、特定の列(シンボル)には対応できないため、デバッグに不便が生じます;

3. eval-source-map: を使用します。 eval を使用して、ソース ファイル モジュールをパッケージ化し、同じファイル内にクリーンで完全なソース マップを生成します。このオプションでは、ビルド速度に影響を与えることなく完全なソースマップを生成できますが、パッケージ化された出力 JS ファイルの実行にはパフォーマンスとセキュリティのリスクがあります。ただし、これは開発段階では非常に良いオプションですが、運用段階ではこのオプションを使用しないでください;

4. 安価なモジュール評価ソース マップ: これは、パッケージ化するときに最も高速な生成です。ソース マップ メソッドを使用すると、生成されたソース マップはパッケージ化された JavaScript ファイルと一緒に列マッピングなしで表示されますが、eval-source-map オプションと同様の欠点があります。

ここでは 3 番目の方法を使用します。 webpack.config.js で次のように設定します:

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
}
ログイン後にコピー

这四种方式从上到下打包速度回越来越快,当然隐患越来越多,所以在生产阶段还是用第一种为好。

使用webpack构建本地服务器

webpack提供一个可选的可以检测代码的修改并自动刷新页面的本地服务器。该服务器是基于node.js的,不过我们需要单独安装它作为项目依赖。

npm install --save-dev webpack-dev-server
ログイン後にコピー

devserver作为webpack配置选项中的一项,以下是它的一些主要配置选项:

1、contentBase: 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)

2、port: 设置默认监听端口,如果省略,默认为“8080”

3、inline: 设置为true,当源文件改变时会自动刷新页面

4、historyApiFallback: 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

代码如下:

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  devServer:{
    contentBase: "./dist", //读取目录
    port: 8000,   //端口号
    inline: true, //实时刷新
    historyApiFallback: true //单页面不跳转
  },
}
ログイン後にコピー

接着我们要在package.json中配置server代码如下:

{
  "name": "study-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}
ログイン後にコピー

接着在cmd中输入 npm run server 即可在浏览器中打开本地服务器。

Loaders
ログイン後にコピー

loaders作为webpack的强大功能之一,它的作用就是让webpack调用外部脚本和工具来对不同的格式的文件进行处理。Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置,Loaders的配置选项包括以下几方面:

1、test:一个匹配loaders所处理的文件的扩展名的正则表达式。

2、loader: loader的名称(必需)。

3、include/exclude:手动添加:手动添加需要的文件夹或者屏蔽掉不需要选择的文件。

4、query: 为loaders提供了额外的设置选项。

babel
ログイン後にコピー

babel是一个编译js的平台,它可以帮助你的代码编译称为浏览器识别的代码。并且它还可以把js的扩展语言JSX编译称为浏览器识别的语句。

安装依赖包:

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
ログイン後にコピー

下面我们在webpack.config.js中来配置loader和babel:

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders:[{
      test: /\.js$/,   //需要匹配的文件扩展名
      exclude: /node_modules/, // 排除不需要处理的文件夹
      loader: 'babel-loader', //  所用的loader名称
      query:{
            presets: ['es2015', 'react']  // 支持es5与react
      }
    }]
  },
  devServer:{
    contentBase: "./dist", //读取目录
    port: 2333,   //端口号
    inline: true, //实时刷新
    historyApiFallback: true //单页面不跳转
  },
}
ログイン後にコピー

完成以上工作后接着来安装react

npm install --save react react-dom
ログイン後にコピー

接着修改src文件夹中的Index.js与main.js的代码,react使用的版本"react": "^16.0.0":

以下是Index.js代码:

import React from 'react';
import ReactDOM from 'react-dom';
class Greeter extends React.Component{
  render() {
    return (
      <div>
        <span>my god</span>
      </div>
    );
  }
};
export default Greeter
ログイン後にコピー

以下为main.js代码:

import React from &#39;react&#39;;
import ReactDOM from &#39;react-dom&#39;;
import Greeter from &#39;./Index&#39;;
ReactDOM.render(<Greeter />, document.getElementById(&#39;root&#39;));
ログイン後にコピー

Babel的配置选项

因为babel有非常多的配置选项,在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂,因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。因此现在我们就提取出相关部分,分两个配置文件进行配置(webpack会自动调用.babelrc里的babel配置选项)。

将webpack.config.js中的query去掉,建立.babelrc文件写出一下代码:

{
  "presets": ["react", "es2015"]
}
ログイン後にコピー

css的相关安装

webpack把所有文件当成模块处理,只要有合适的loaders,它都可以被当做模块来处理。webpack提供两个工具处理样式表css-loader,style-loader,二者处理的任务不同,css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

安装loader

npm install --save-dev style-loader css-loader
ログイン後にコピー

接着webpack.config.js中添加loaders

module.exports = {
  devtool: &#39;eval-source-map&#39;,
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders:[
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: &#39;babel-loader&#39;
      },
      {
        test: /\.css$/,
        loader: &#39;style-loader!css-loader&#39;
      }
    ]
  },
  devServer:{
    contentBase: "./dist", //读取目录
    port: 2333,   //端口号
    inline: true, //实时刷新
    historyApiFallback: true //单页面不跳转
  },
}
ログイン後にコピー

接着我们可以创立一个css文件,记好路径,在main.js中(也就是webpack的入口文件)我们导入css文件即可使用。

这里题外说个问题,我们想在react中使用sass,就在此基础上先进行npm下载

加载: npm install sass-loader node-sass –save-dev

之后我们在webpack.config.js中添加loaders

module.exports = {
  devtool: &#39;eval-source-map&#39;,
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders:[
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: &#39;babel-loader&#39;
      },
      {
        test: /\.(css|scss)$/,
        loader: &#39;style-loader!css-loader!sass-loader&#39;
      }
    ]
  },
  devServer:{
    contentBase: "./dist", //读取目录
    port: 2333,   //端口号
    inline: true, //实时刷新
    historyApiFallback: true //单页面不跳转
  },
}
ログイン後にコピー

之后再style文件夹中创立一个scss文件导入到main.js文件中即可使用了。

eslint的安装与使用

首先安装依赖包 npm install –save-dev eslint eslint-loader

通过配置webpack.congfig.js以及创建.eslintrc文件来配置好初始值即可在项目中使用eslint。

webpack.config.js:
module.exports = {
  devtool: &#39;eval-source-map&#39;,
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders:[
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: &#39;babel-loader!eslint-loader&#39;
      },
      {
        test: /\.(css|scss)$/,
        loader: &#39;style-loader!css-loader!sass-loader&#39;
      }
    ]
  },
  devServer:{
    contentBase: "./dist", //读取目录
    port: 2333,   //端口号
    inline: true, //实时刷新
    historyApiFallback: true //单页面不跳转
  },
};
.eslintrc
{
    "parser": "babel-eslint",
    "rules": {
        "semi": [
            "error",
            "always"
        ]
    }
}
ログイン後にコピー

eslint的相关规则根据自己的需求来制定即可。

以上がReactフレームワークにWebpackを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート