suchen

Heim >Web-Frontend >js-Tutorial >So erstellen Sie mit Webpack eine Reaktionsentwicklungsumgebung

So erstellen Sie mit Webpack eine Reaktionsentwicklungsumgebung

php中世界最好的语言
php中世界最好的语言Original
2018-05-29 17:30:291645Durchsuche

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

2. Webpack installieren

npm i webpack -D

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

3. Erstellen Sie eine neue Projektstruktur

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使用';

Nicht global Installation von Verpackungen. 

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

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

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

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

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

Aktivieren Sie Hot Update in webpack.config.js

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

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

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

Trennung von Entwicklungsumgebung und Produktionsumgebung

1. Installieren Sie webpack-merge

npm install --save-dev webpack-merge
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'
        }
      }
    ]
  }
};

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

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()
   ]
 });
2. Erstellen Sie eine neue App.js und fügen Sie den folgenden Inhalt hinzu. 

react-dom npm i react react-dom -S
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();
}

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

推荐阅读：

详细解析微信小程序入门教程+案例

怎样使用angularjs中http服务器

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Webpack eine Reaktionsentwicklungsumgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie die Vux-Uploader-Bild-Upload-KomponenteNächster Artikel：So verwenden Sie die Vux-Uploader-Bild-Upload-Komponente

In Verbindung stehende Artikel

Mehr sehen