Heim > Artikel > Web-Frontend > So erstellen Sie mit Webpack eine Reaktionsentwicklungsumgebung
So erstellen Sie mit Webpack eine Reaktionsentwicklungsumgebung
- php中世界最好的语言Original
- 2018-05-29 17:30:291553Durchsuche
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 .
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 packbarnode_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.jsconst 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-Pluginnpm 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 überBefehl. 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.jsconst 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-mergenpm 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 konfigurieren1. 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 -S3. 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中文网其它相关文章！
推荐阅读：
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!