Wie konfiguriere ich die Reaktionsentwicklungsumgebung? Konfigurationsschritte für die React + Webpack-Entwicklungsumgebung (ausführlicher Artikel)

In diesem Artikel geht es hauptsächlich um das detaillierte Verständnis der Konfigurationsschritte der Entwicklungsumgebung von react+webpack. Jetzt lesen wir diesen Artikel gemeinsam

Hier werden wir zunächst die Gründe und Praktiken der einzelnen Schritte erläutern In anderen Artikeln geht es darum, wie man schnell ein Webpack erstellt, was nicht so umständlich sein muss. Grundlegenden Artikellink konfigurieren: http://www.php.cn/js-tutorial-409770.html

Übertragung in das obige Verzeichnis:

Verzeichnis
2. Webpack-Upgrade-Kapitel
6. ES6-auf-ES5-Modul
7. URL- und Dateimodul
3. Webpack-Erweitertes Kapitel
1. Syntaxprüfer eslint
2. Uglify-Quellcodeverschlüsselung und -komprimierung
3.moduleconcatenationPlugin
4.devtool
5.happypack
6.dll

6.ES6-zu-ES5-Modul

Da einige Browser ES6 nicht unterstützen Die Syntax ist nicht vollständig kompatibel, aber NodeJS unterstützt ES6 bereits, sodass Webpack ein ES6-zu-ES5-Modul bereitstellt.
Installationsanweisungen (im Entwicklungsmodus verwendet):

npm install babel-loader babel-core babel-preset-env webpack --save-dev

Wenn Sie React unterstützen möchten, müssen Sie die folgenden Module installieren:

npm install babel-preset-es2015 babel-preset-react babel-preset-stage-3 --save-dev

Webpack.config.js-Code:

module.exports = {...module:{    
    rules:[...
   {
        test:/\.jsx$/,
        exclude:/(node_modules|bower_components)/,//排除XXX类型文件
        use:{
            loader:'babel-loader'           
        }
    }
]
}...}

Erstellen Sie die .babelrc-Datei im Stammpfad

{
  "presets": ["es2015","react"]}

7.URL- und Dateimodule
Führen Sie das URL-Modul zum Verarbeiten von Bildern und das Dateimodul zum Verarbeiten anderer Dateitypen als Bilder ein
Anweisung:

npm install url-loader file-loader --save-dev

webpack.config.js-Code:

module.exports = {...
    {   //配置辅助loader,处理图片  
        test:/\.(png|jpg|gif)$/,
        loader:'url-loader',
        options:{limit:8192,name:"images/[name].[ext]"}
    },
    { //处理图片外的其他文件类型
        test:/\.(appcache|svg|eot|ttf|woff|woff2|mp3|pdf)(\?|$)/,
        include:path.resolve(__dirname,'src'),
        loader:'file-loader?name=[name].[ext]' 
    }...}

3. Erweitertes Webpack
1. Syntax-Checker eslint
ESLint ist ein QS-Tool zur Vermeidung von Schwachstellen Fehler auf -Ebene beheben und den Codestil vereinheitlichen.
Installationsanweisungen:

npm install eslint eslint-loader --save-dev

Erstellen Sie nach der Installation von eslint eine Regeldatei über den Befehl init.

指令：
cd 进入项目文件夹根路径，敲./node_modules/.bin/eslint --init  

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single? What line endings do you use? Windows
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON

Nach Beantwortung der Frage wird im Stammverzeichnis eine Datei im Format .eslintrc.json generiert und das entsprechende Paket automatisch installiert. Der Inhalt in .eslintrc.json
kann an Ihre eigenen Programmiergewohnheiten angepasst werden. Chinesische ESLINT-Website
Hier ist ein Beispiel:

{    "env": {        "browser": true,        "commonjs": true,        "es6": true,        "node": true
    },    "extends": "plugin:react/recommended",    "parserOptions": {        "ecmaVersion": 8,//ECMAScript syntax 最新版本
        "ecmaFeatures": {            "impliedStrict": true,            "experimentalObjectRestSpread": true,            "jsx": true
        },        "sourceType": "module"
    },    "plugins": [        "react"
    ],    "rules": {        "semi": [            "error",            "always"
        ],              
        "no-debugger": "error",//不允许用debugger这个关键字
        "no-dupe-args": "error",//不允许函数参数同名
        "no-caller": "error",//不允许用callee等，es6严格模式不支持
        "no-unmodified-loop-condition": "error",        "no-with": "error",//不允许用with来声明
        "no-catch-shadow": "error"
    }
}

Konfiguration von webpack.config.js

module: {
        rules: [        ...{
        test:/\.js$/,
        enforce:'pre',
       loader:'eslint-loader',
       include:path.resolve(__dirname,'src')
    }...]
}

2.uglify-Quellcodeverschlüsselung und -komprimierung (wenn Sie mehr sehen möchten, gehen Sie zu PHP Chinese Learn in der Spalte React Reference Manual )

ist ein Plug-in für Webpack, verwenden Sie es einfach direkt.

webpack.config.js 代码：
module.exports = {   ...
 plugins:[
 ..  
new webpack.optimize.UglifyJsPlugin(
{output: { 
    comments:false,//删除代码中所有注释
},
compress:{
 warnings:false,
}
})
]...}

4.devtool
Das von Webpack bereitgestellte Hilfstool kann beim Debuggen die Anzahl der Fehlerzeilen im Quellcode korrekt anzeigen. eval-soure-map wird im Entwicklungsmodus verwendet. Andere Parameter verwenden die Umgebung

module.exports = {...devtool:'eval-soure-map'...}

5.happypack
Lassen Sie den Loader Dateien in mehreren Prozessen verarbeiten, um die Webpack-Erstellung zu beschleunigen

安装指令：npm install happypack --save-dev

var os = require('os');//os.cpus().Length 一般会取不到值，这里直接size:4,而不是size:os.cpus().lengthvar Happypack = require('happypack');var happypackThreadPool = Happypack.ThreadPool({size:4});//size:os.cpus().Lengt根据电脑的idle，配置当前最大的线程数量module.config.js 下面的配置module.exports = {
...module:{    rules:[
 {        test:/\.js$/,    
        include:path.resolve(__dirname),        loader:'happypack/loader?id=happybabel'

    }
]
}plugins:[new Happypack({    id:"happybabel",    loaders:['babel-loader'],    threadPool:happypackThreadPool,    cache:true,    verbose:true}),
]
}

6.dll
Erstellen Sie eine webpack.dll in die Stammverzeichnisdatei .config.js

//webpack.dll.config.js 的内容：const webpack = require('webpack');const path = require("path");const fs=require('fs');const vendors = [  'react' //这里添加第三方库文件

];module.exports = {  entry: {    vendor: vendors,
  },  output: {    path: path.join(__dirname+'/build'),    filename: '[name].[chunkhash].js',    library: '[name]_[chunkhash]',
  },  plugins: [    new webpack.DllPlugin({      path: path.join(__dirname+"/build"+'/manifest.json'),      name: '[name]_[chunkhash]',      context: __dirname,
    }),
  ],
};//console.log(path.join(__dirname+"/build"));

Geben Sie den folgenden Befehl in das Powershell-Fenster ein:

webpack --config webpack.dll.config.js -p

Zwei Dateien werden im Build-Pfad generiert, eine ist manifest.json und die andere ist Vendor.XXXX.js-Datei. Vendor.xxx.js muss in HTML eingeführt werden (hier direkt in die HTML-Vorlage geschrieben).
webpack.config.js füllen Sie aus:

 moule.exports = { ...
 plugins:[  ...
 new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./build/manifest.json'),
    }),    ...]
....
}

und geben Sie dann npm start in Powershell ein.

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen). .

Das obige ist der detaillierte Inhalt vonWie konfiguriere ich die Reaktionsentwicklungsumgebung? Konfigurationsschritte für die React + Webpack-Entwicklungsumgebung (ausführlicher Artikel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!