webpackでreact開発環境を構築する手順を詳しく解説

今回は、webpack を使用して React 開発環境を構築する手順について詳しく説明します。Webpack を使用して React 開発環境を構築する際の 注意事項 は何ですか?実際の事例を見てみましょう。

1.プロジェクトを初期化します

mkdir react-redux && cd react-redux
npm init -y

2. webpackをインストールします

npm i webpack -D

npm i -D は、npm install --save-dev の略で、モジュールをインストールして保存することを意味します。 package.json の devDependency (主に開発環境の依存関係パッケージ) webpack 4+ バージョンを使用する場合は、CLI もインストールする必要があります。

npm install -D webpack webpack-cli

3. 新しいプロジェクト構造を作成します

react-redux
 |- package.json
+ |- /dist
+  |- index.html
 |- /src
  |- index.js

index.html

nbsp;html>


  <meta>
  <title>Title</title>


<p></p>
<script></script>

index.js

document.querySelector('#root').innerHTML = 'webpack使用';

非グローバルインストールでパッケージ化します。

node_modules\.bin\webpack src\index.js --output dist\bundle.js --mode development

dist ディレクトリの html を開いて webpack を表示します。

を使用して webpack を設定します1。

設定ファイル

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(dirname,'dist')
  }
};

を使用してコマンドを実行します: node_modules.binwebpack -- mode Production OK 2.NPM スクリプト (NPM スクリプト) をパッケージ化します。 npm スクリプト (npm スクリプト) を package.json に追加します。 "build": "webpack --modeproduction" Run npm run build パッケージ化の準備完了

node_modules.binwebpack --mode production 可以以进行打包 2.NPM 脚本(NPM Scripts) 在在 package.json 添加一个 npm 脚本(npm script)： "build": "webpack --mode production" 运行 npm run build 即可打包

使用webpack构建本地服务器

webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载。

1.安装 npm i -D webpack-dev-server 修改配置文件webpack.config.js

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(dirname,'dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
  }
};

运行 webpack-dev-server --progress ,浏览器打开localhost:3000,修改代码会实时显示修改的结果. 添加scripts脚本,运行 npm start 自动打开 http://localhost:8080/

"start": "webpack-dev-server --open --mode development"

启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此使用webpack-dev-server进行开发的时候都看不到编译后的文件

2.热更新

配置一个webpack自带的插件并且还要在主要js文件里检查是否有module.hot

plugins:[
    //热更新,不是刷新
    new webpack.HotModuleReplacementPlugin()
  ],

在主要js文件里添加以下代码

if (module.hot){
  //实现热更新
  module.hot.accept();
}

在webpack.config.js中开启热更新

devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
    hot:true //开启热更新
  },

热更新允许在运行时更新各种模块，而无需进行完全刷新.

配置Html模板

1.安装html-webpack-plugin插件

npm i html-webpack-plugin -D

2.在webpack.config.js里引用插件

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    //添加hash可以防止文件缓存,每次都会生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve('dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
    hot:true //开启热更新
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //会在打包好的bundle.js后面加上hash串
    })
  ]
};

运行 npm run build 进行打包,这时候每次npm run build的时候都会在dist目录下创建很多打好的包.应该每次打包之前都将dist目录下的文件清空,再把打包好的文件放进去,这里使用clean-webpack-plugin插件.通过 npm i clean-webpack-plugin -D 命令安装.然后在webpack.config.js中引用插件.

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    //添加hash可以防止文件缓存,每次都会生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve('dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
    hot:true //开启热更新
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //会在打包好的bundle.js后面加上hash串
    }),
     //打包前先清空
    new CleanWebpackPlugin('dist')
  ]
};

之后打包便不会产生多余的文件.

编译es6和jsx

1.安装babel npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader: babel

webpackを使用してローカルサーバーを構築します

webpack-dev-serverはシンプルなWebサーバーを提供し、リアルタイムでリロードできます。

1. npm i -D webpack-dev-server をインストールします。設定ファイル webpack.config.js を変更します

{
 "presets": ["env", "stage-0","react"] //从左向右解析
}

webpack-dev-server --progress を実行し、ブラウザで localhost:3000 を開きます、変更 コードは、変更された結果をリアルタイムで表示します。スクリプトを追加し、npm start を実行すると、http://localhost:8080/

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(dirname,'dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度
        use:{
          loader:'babel-loader'
        }
      }
    ]
  }
};

が起動されます。ターゲットフォルダ。リアルタイムでコンパイルされたファイルがメモリに保存されます。そのため、開発に webpack-dev-server を使用する場合、コンパイルされたファイルを見ることができません

2. ホットアップデート

webpack に付属するプラグインを設定し、メインの js ファイルに module.hot があるかどうかを確認します

npm install --save-dev webpack-merge

次のコードをメインの js ファイルに追加します

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
  entry:['babel-polyfill','./src/index.js'],
  output:{
    //添加hash可以防止文件缓存,每次都会生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve(dirname,'dist')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //会在打包好的bundle.js后面加上hash串
    }),
    //打包前先清空
    new CleanWebpackPlugin('dist'),
    new webpack.HotModuleReplacementPlugin() //查看要修补(patch)的依赖
  ],
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度
        use:{
          loader:'babel-loader'
        }
      }
    ]
  }
};

webpack.config.js でホット アップデートを有効にする

const merge=require('webpack-merge');
const path=require('path');
let webpack=require('webpack');
const common=require('./webpack.common.js');
module.exports=merge(common,{
  devtool:'inline-soure-map',
  mode:'development',
  devServer:{
    historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
    contentBase:path.resolve(dirname, '../dist'),//本地服务器所加载的页面所在的目录
    inline: true,//实时刷新
    open:true,
    compress: true,
    port:3000,
    hot:true //开启热更新
  },
  plugins:[
    //热更新,不是刷新
    new webpack.HotModuleReplacementPlugin(),
  ],
});

ホット アップデートを使用すると、完全な更新を必要とせずに、実行時にさまざまなモジュールを更新できます。HTML テンプレートを構成します

1. html-webpack-plugin プラグインをインストールします

const merge = require('webpack-merge');
 const path=require('path');
 let webpack=require('webpack');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
   mode:'production',
   plugins: [
     new UglifyJSPlugin()
   ]
 });

2. webpack.config.js でプラグインを参照します🎜

react-dom npm i react react-dom -S

🎜この時点で、パッケージ化のために npm run build を実行します。 npm が build を実行するたびに、dist ディレクトリに多数のパッケージ化されたパッケージが作成されます。各パッケージの前に dist ディレクトリ内のファイルをクリアしてから、パッケージ化されたファイルを配置する必要があります。 clean-webpack-plugin プラグインは次のとおりです。 npm i clean-webpack-plugin -D コマンドを渡してインストールします。その後、webpack.config.js でプラグインを参照します。🎜

import React from 'react';
class App extends React.Component{
  render(){
    return (<p>佳佳加油</p>);
  }
}
export default App;

🎜 パッケージ化後、余分なファイルは生成されません。 🎜🎜🎜🎜es6 と jsx をコンパイルします🎜🎜 🎜🎜1. babel npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader をインストールします。 babel ローダー babel-preset -env: 設定された環境に従ってまだサポートされていない機能のみをコンパイルします。 babel-preset-react: jsx を js に変換します🎜🎜2. .babelrc 設定ファイルを追加します🎜

import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import App from './App';
ReactDOM.render(
  <appcontainer>
    <app></app>
  </appcontainer>,
  document.getElementById('root')
);
if (module.hot) {
  module.hot.accept();
}

🎜3. webpack.config.js を変更します🎜🎜🎜開発環境を本番環境から分離します🎜🎜🎜🎜1. webpack をインストールします - merge🎜

npm i -D react-hot-loader

🎜 2. webpack.common.js という名前の新しいファイルをパブリック設定として作成し、次の内容を記述します:🎜

npm install style-loader css-loader url-loader --save-dev

🎜 3. webpack.dev.js という名前の新しいファイルを開発環境設定として作成します🎜

npm install sass-loader node-sass --save-dev

🎜4. 新しいファイルを作成します webpack.prod.js という名前のファイルが本番環境の設定として使用されます🎜

npm install --save-dev mini-css-extract-plugin

🎜🎜🎜を設定します。react をインストールします。🎜

{
  test:/\.(png|jpg|gif)$/,
  use:[
    "url-loader"
  ]
},

🎜2.次のコンテンツを追加します。🎜

{
  test:/\.scss$/,
  use:[
    "style-loader",
    "css-loader",
    "sass-loader"
  ]
}

🎜3.index.js に次のコンテンツを追加します。🎜

import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import App from './App';
ReactDOM.render(
  <appcontainer>
    <app></app>
  </appcontainer>,
  document.getElementById('root')
);
if (module.hot) {
  module.hot.accept();
}

4.安装 react-hot-loader

npm i -D react-hot-loader

5.修改配置文件 在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要写在entry 的最前面，如果有 babel-polyfill 就写在babel-polyfill 的后面

6.在 .babelrc 里添加 plugin, "plugins": ["react-hot-loader/babel"]

处理SASS

1.安装 style-loader css-loader url-loader

npm install style-loader css-loader url-loader --save-dev

2.安装 sass-loader node-sass

npm install sass-loader node-sass --save-dev

3.安装 mini-css-extract-plugin ,提取单独打包css文件

npm install --save-dev mini-css-extract-plugin

4.配置webpack配置文件

webpack.common.js

{
  test:/\.(png|jpg|gif)$/,
  use:[
    "url-loader"
  ]
},

webpack.dev.js

{
  test:/\.scss$/,
  use:[
    "style-loader",
    "css-loader",
    "sass-loader"
  ]
}

webpack.prod.js

const merge = require('webpack-merge');
 const path=require('path');
 let webpack=require('webpack');
 const MiniCssExtractPlugin=require("mini-css-extract-plugin");
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
   mode:'production',
   module:{
     rules:[
       {
         test:/\.scss$/,
         use:[
           // fallback to style-loader in development
           process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
           "css-loader",
           "sass-loader"
         ]
       }
     ]
   },
   plugins: [
     new UglifyJSPlugin(),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
       filename: "[name].css",
       chunkFilename: "[id].css"
     })
   ]
 });

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理

Nodejs发布自己的npm包并制作成命令行工具步骤详解

以上がwebpackでreact開発環境を構築する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。