Comment utiliser Webpack pour créer un environnement de développement React-js tutoriel-php.cn

Cette fois, je vais vous montrer comment utiliser webpack pour créer un environnement de développement React, et quelles sont les précautions pour utiliser Webpack pour créer un environnement de développement React. Voici des cas pratiques, jetons un coup d'œil. .

1.Initialiser le projet

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

Copier après la connexion

2. Installer le webpack

npm i webpack -D

Copier après la connexion

npm i -D est l'abréviation de npm install --save-dev, qui fait référence à l'installation de modules et à leur enregistrement dans devDependencies dans package.json, principalement des packages de dépendances dans l'environnement de développement. Si vous utilisez la version webpack 4+, vous également. besoin d'installer la CLI.

npm install -D webpack webpack-cli

Copier après la connexion

3. Créer une nouvelle structure de projet

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

Copier après la connexion

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<p id="root"></p>
<script src="bundle.js"></script>
</body>
</html>

Copier après la connexion

index.js

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

Copier après la connexion

Packaging sous installation non globale.

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

Copier après la connexion

Ouvrez le code HTML dans le répertoire dist pour afficher le webpack Utiliser

Configurer le webpack

1. Fichier de configuration

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

Copier après la connexion

commande d'exécution : node_modules.binwebpack --mode production peut être empaqueté 2.Scripts NPM (scripts NPM) Ajoutez un script npm (script npm) dans package.json : "build": "webpack --mode production" exécutez npm run build Prêt à empaqueter

Utiliser webpack pour créer un serveur local

webpack-dev-server fournit un serveur Web simple et peut Rechargement en direct.

1. Installer npm i -D webpack-dev-server Modifier le fichier de configuration 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,//自动打开浏览器
  }
};

Copier après la connexion

Exécuter webpack-dev-server --progress, ouvrir localhost:3000 dans le navigateur et modifier le code en temps réel Affichez les résultats modifiés. Ajoutez le script scripts et exécutez npm start pour ouvrir automatiquement http://localhost:8080/

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

Copier après la connexion

Après avoir démarré webpack-dev-server, vous ne pouvez pas voir. la version compilée dans le dossier cible. Les fichiers compilés en temps réel sont sauvegardés en mémoire. Par conséquent, lorsque vous utilisez webpack-dev-server pour le développement, vous ne pouvez pas voir les fichiers compilés

2. Mise à jour à chaud

Configurez un plug-in fourni avec webpack et incluez-le également dans le fichier principal js Vérifiez s'il existe module.hot

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

Copier après la connexion

Ajoutez le code suivant au fichier js principal

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

Copier après la connexion

Activez la mise à jour à chaud dans webpack.config.js

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

Copier après la connexion

Les mises à jour à chaud permettent de mettre à jour divers modules au moment de l'exécution sans avoir besoin d'une actualisation complète

Configuration des modèles HTML

1. . Installez le plug-in html-webpack-plugin

npm i html-webpack-plugin -D

Copier après la connexion

2. Référencez le plug-in

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串
    })
  ]
};

Copier après la connexion

dans webpack.config.js et exécutez npm run build pour l'empaquetage. cela se produira à chaque fois que npm exécutera build Créez de nombreux packages packagés dans le répertoire dist Vous devez effacer les fichiers du répertoire dist avant chaque package, puis y placer les fichiers packagés. Le plug-in clean-webpack-plugin est utilisé ici. . Installez-le via la commande npm i clean-webpack-plugin -D Puis référencez le plug-in dans 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')
  ]
};

Copier après la connexion

Après l'empaquetage, aucun fichier supplémentaire ne sera généré

Compilez es6 et jsx

1. Installez babel

loader babel-preset-env : compilez uniquement les fonctionnalités qui ne sont pas encore prises en charge en fonction de l'environnement configuré. babel-preset-react : Convertir jsx en jsnpm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader: babel

2. Ajouter le fichier de configuration .babelrc

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

Copier après la connexion

3. Modifier 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//实时刷新
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度
        use:{
          loader:'babel-loader'
        }
      }
    ]
  }
};

Copier après la connexion

<.>

Séparation de l'environnement de développement et de l'environnement de production1. Installez webpack-merge

2. Créez un nouveau fichier nommé webpack.common. js En tant que configuration publique, écrivez le contenu suivant :

npm install --save-dev webpack-merge

Copier après la connexion

3. Créez un nouveau fichier nommé webpack.dev.js en tant que configuration d'environnement de développement

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'
        }
      }
    ]
  }
};

Copier après la connexion

4. nouveau fichier nommé webpack Le fichier .prod.js est utilisé comme configuration de l'environnement de production

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(),
  ],
});

Copier après la connexion

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()
   ]
 });

Copier après la connexion

Configurer React1. ,

2. Créez un nouveau App.js et ajoutez le contenu suivant.

react-dom npm i react react-dom -S

Copier après la connexion

3. Ajoutez le contenu suivant à index.js.

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

Copier après la connexion

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

Copier après la connexion

4.安装 react-hot-loader

npm i -D react-hot-loader

Copier après la connexion

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

Copier après la connexion

2.安装 sass-loader node-sass

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

Copier après la connexion

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

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

Copier après la connexion

4.配置webpack配置文件

webpack.common.js

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

Copier après la connexion

webpack.dev.js

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

Copier après la connexion

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"
     })
   ]
 });

Copier après la connexion

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