So erstellen Sie mit Webpack eine Reaktionsentwicklungsumgebung-js-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, wie Sie Webpack zum Erstellen einer Reaktionsentwicklungsumgebung verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Webpack zum Erstellen einer Reaktionsentwicklungsumgebung gelten. Schauen wir uns die folgenden praktischen Fälle an .

1.Projekt initialisieren

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

Nach dem Login kopieren

2. Webpack installieren

npm i webpack -D

Nach dem Login kopieren

npm i - D Dies ist die Abkürzung für npm install --save-dev, die sich auf die Installation von Modulen und deren Speicherung in den devDependencies von package.json bezieht, hauptsächlich auf Abhängigkeitspakete in der Entwicklungsumgebung. Wenn Sie Webpack 4+ Version verwenden, müssen Sie dies auch tun Installieren Sie die CLI.

npm install -D webpack webpack-cli

Nach dem Login kopieren

3. Erstellen Sie eine neue Projektstruktur

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

index.js

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

Nach dem Login kopieren

Nicht global Installation von Verpackungen.

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

Nach dem Login kopieren

Öffnen Sie den HTML-Code im dist-Verzeichnis, um das Webpack anzuzeigen.

Verwenden Sie das Konfigurationsdatei

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

Nach dem Login kopieren

Befehl ausführen: Kann gepackt werden 2. NPM-Skripte (NPM-Skripte) Fügen Sie ein NPM-Skript (npm-Skript) in package.json hinzu: Ausführen

das ist packbar

node_modules.binwebpack --mode production "build": "webpack --mode production" npm run build Erstellen Sie einen lokalen Server mit Webpack

webpack-dev-server stellt einen einfachen Webserver bereit und kann neu geladen werden Echtzeit. 1. Installieren

Ändern Sie die Konfigurationsdatei 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,//自动打开浏览器
  }
};

Nach dem Login kopieren

Führen Sie webpack-dev-server --progress aus, öffnen Sie localhost:3000 im Browser und den geänderten Code zeigt die Änderung in Echtzeit an. Fügen Sie das Skriptskript hinzu und führen Sie npm start aus, um http://localhost:8080/ automatisch zu öffnen.

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

Nach dem Login kopieren

npm i -D webpack-dev-server Nach dem Start von webpack-dev-server ist die kompilierte Datei nicht sichtbar im Zielordner. Die in Echtzeit kompilierten Dateien werden im Speicher gespeichert. Wenn Sie daher webpack-dev-server für die Entwicklung verwenden, können Sie die kompilierten Dateien nicht sehen

2. Hot-Update

Konfigurieren Sie ein Plug-in, das mit Webpack geliefert wird, und fügen Sie es auch in die Hauptdatei ein js-Datei Überprüfen Sie, ob module.hot vorhanden ist

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

Nach dem Login kopieren

Fügen Sie den folgenden Code in die Haupt-JS-Datei ein

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

Nach dem Login kopieren

Aktivieren Sie Hot Update in webpack.config.js

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

Nach dem Login kopieren

Hot Update darf verschiedene Module aktualisieren, ohne dass eine vollständige Aktualisierung erforderlich ist.

HTML-Vorlage konfigurieren

1. Installieren Sie das HTML-Webpack. Plugin-Plugin

npm i html-webpack-plugin -D

Nach dem Login kopieren

2. Verweisen Sie auf das 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串
    })
  ]
};

Nach dem Login kopieren

in webpack.config.js und führen Sie

zum Packen aus Das dist-Verzeichnis jedes Mal, wenn npm build ausführt. Die Dateien im dist-Verzeichnis sollten vor jedem Packen gelöscht und dann die gepackten Dateien eingefügt werden. Hier wird das Plug-in „clean-webpack-plugin“ verwendet. Installieren Sie es über

Befehl. Verweisen Sie dann auf das Plug-in in 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')
  ]
};

Nach dem Login kopieren

Nach dem Packen werden keine redundanten Dateien generiert. npm run build npm i clean-webpack-plugin -D

Es6 und jsx kompilieren

1. Babel installieren Loader babel-preset-env: Kompiliert nur Funktionen, die gemäß der konfigurierten Umgebung noch nicht unterstützt werden. babel-preset-react: jsx in js konvertieren

2. .babelrc-Konfigurationsdatei hinzufügen

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

Nach dem Login kopieren

npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader: babel3. Ändern Sie 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'
        }
      }
    ]
  }
};

Nach dem Login kopieren

Trennung von Entwicklungsumgebung und Produktionsumgebung

1. Installieren Sie webpack-merge

npm install --save-dev webpack-merge

Nach dem Login kopieren

2. Erstellen Sie eine neue Datei mit dem Namen webpack.common.js als öffentliche Konfiguration Schreiben Sie den folgenden Inhalt:

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

Nach dem Login kopieren

3. Erstellen Sie eine neue Datei mit dem Namen webpack.dev.js als Entwicklungsumgebungskonfiguration

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

Nach dem Login kopieren

4 Konfiguration der Produktionsumgebung

React konfigurieren

1. React installieren,

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

Nach dem Login kopieren

2. Erstellen Sie eine neue App.js und fügen Sie den folgenden Inhalt hinzu.

react-dom npm i react react-dom -S

Nach dem Login kopieren

3. Fügen Sie den folgenden Inhalt zu index.js hinzu.

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

Nach dem Login kopieren

4.安装 react-hot-loader

npm i -D react-hot-loader

Nach dem Login kopieren

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

Nach dem Login kopieren

2.安装 sass-loader node-sass

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

4.配置webpack配置文件

webpack.common.js

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

Nach dem Login kopieren

webpack.dev.js

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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