Maison > Article > interface Web > Comment utiliser Webpack pour créer un environnement de développement React

Comment utiliser Webpack pour créer un environnement de développement React

php中世界最好的语言original: 2018-05-29 17:30:291591parcourir

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

2. Installer le webpack

npm i webpack -D

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

3. Créer une nouvelle structure de projet

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

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>

index.js

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

Packaging sous installation non globale.

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

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

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,//自动打开浏览器
  }
};

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"

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

Ajoutez le code suivant au fichier js principal

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

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

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

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

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

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

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"] //从左向右解析
}

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

<.>

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

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

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

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

Configurer React1. ,

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

react-dom npm i react react-dom -S

3. Ajoutez le contenu suivant à index.js.

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

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

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中文网其它相关文章！

Articles Liés

Voir plus