Home > Article > Web Front-end > Knowledge about Webpack, Babel and React
Before writing the article, I assume that everyone already has JavaScript
, Node package management tool
, Linux terminal operation
These basic skills, next, I will guide you step by step to build a React
project from scratch
We will use Webpack
To build a React
application with Babel
, our purpose is very clear, which is to better understand and master the use of these tools
We create The application should not only be minimum
, but also follow best practices
to consolidate the foundation for students who are not particularly skilled
Create your project and add your configuration file package.json
mkdir webpack-babel-react-revisited cd webpack-babel-react-revisited yarn init
We first install Webpack
, it is currently very The popular module packager
, which packages each module included in the application into a small number of chunks
so that these codes are loaded from the server into the browser
yarn add webpack --dev
Next, we start writing some modules. We save the source file app.js
to the src
directory
/** app.js */ console.log('Hello from 枫上雾棋!');
Then, we run Webpack
./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.js
If you open the generated app.bundle.js
, you will find that the above is the module processing code of webpack
, and the following is the console.log
## we wrote
app.js as the
entry file of
Webpack, and output the result to the
dist file folder, the instructions are a bit lengthy. In actual development, we use the
webpack configuration file instead. In order to make the document structure look clearer, refer to the
Directory as follows
├── config │ ├── paths.js │ ├── webpack.config.prod.js ├── src │ ├── app.js ├── package.jsonThe following is a reference
Configuration
paths.js
const path = require('path'); const fs = require('fs'); const appDirectory = fs.realpathSync(process.cwd()); const resolveApp = relativePath => path.resolve(appDirectory, relativePath); module.exports = { appDist: resolveApp('dist'), appSrc: resolveApp('src'), };This file is not necessary, but as the project grows, its significance becomes instantaneous Out
webpack.config.prod.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const paths = require('./paths'); const plugins = [ new HtmlWebpackPlugin({ title: 'webpack babel react revisited', filename: path.join(paths.appDist, 'index.html'), }), ]; const config = { entry: { app: path.join(paths.appSrc, 'app'), }, output: { path: paths.appDist, filename: 'assets/js/[name].js', }, resolve: { extensions: ['.js', '.jsx'], }, plugins, }; module.exports = config;Here we also added a html-webpack-plugin, which simplifies our
HTML We won’t go into details about the creation and installation of files here. If you don’t know yet, you can click on the link to view
syntax sugar, so that when we import
.js,
.jsx, there is no need to specify the extension
Webpack
./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.jsfound that in addition to achieving the above effect, it also automatically generated an
index.html for us. We can click on this
html to view the effect in the console. Compared with Isn’t the above a lot more convenient?
build. Open
package.json and add the following
script Command , and then execute
yarn build, do you feel
nice instantly?
"scripts": { "clean": "rimraf dist *.log .DS_Store", "build": "yarn run clean && webpack --config config/webpack.config.prod.js --progress" }Webpack dev server In addition,
Webpack provides us with a
dev server, which also supports
module hot replacement
webpack-dev- server
yarn add --dev webpack-dev-serverAdd the configuration file
webpack.config.dev.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const OpenBrowserPlugin = require('open-browser-webpack-plugin'); const paths = require('./paths'); const hostname = process.env.HOST || 'localhost'; const port = process.env.PORT || 3000; const plugins = [ new HtmlWebpackPlugin({ title: 'webpack babel react revisited', filename: path.join(paths.appDist, 'index.html'), }), new OpenBrowserPlugin({ url: `http://${hostname}:${port}` }), ]; const config = { entry: { app: path.join(paths.appSrc, 'app'), }, output: { path: paths.appDist, filename: 'assets/js/[name].js', }, resolve: { extensions: ['.js', '.jsx'], }, plugins, devServer: { contentBase: paths.appDist, compress: true, port, }, }; module.exports = config;
in the
config directory. On the basis of config.prod.js, we added the open-browser-webpack-plugin plug-in and the devServer
configuration. The open-browser-webpack-plugin
plug-in, as the name suggests, will Help us automatically open the dev server
and finally return the address to usUpdate
<pre class="brush:js;toolbar:false;">"scripts": {
"clean": "rimraf dist *.log .DS_Store",
"webpack:dev":
"NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.js --progress",
"webpack:prod":
"NODE_ENV=production webpack --config config/webpack.config.prod.js --progress",
"start": "yarn run clean && yarn run webpack:dev",
"build": "yarn run clean && yarn run webpack:prod"
}</pre>
Now, we can do it in the following way Starting
yarn start
After starting, is there a moment when you feel great
Babel
and higher, we need a Conversion compiler
, we choose Babel
, which can convert ES6
into code that can run in the browser. In addition, it also has built-in React JSX
extension, it can be said that its emergence has promoted the development of JavaScipt
All, we install the following dependency packages
yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react
Create
BabelDefault configuration file.babelrc
<pre class="brush:js;toolbar:false;">{
"presets": ["env", "react"]
}</pre>
This tells
to use the two presets
## we just installed #Next, update the
webpack
config.module = { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'], }, ], }
After the update, although we can’t see any changes, in fact we can use
ES6
React
First, let’s install it first
yarn add react react-domReplace
console.log
import React, { Component } from 'react'; import { render } from 'react-dom'; export default class Hello extends Component { render() { return <h1>Hello from 枫上雾棋!</h1>; } } render(<Hello />, document.getElementById('app'));
with the following code because we need to add
4c766faa15dbdc3e0301dfaffd03c28d94b3e26ee717c64999d7867364b1b4a3, so we need Modify the configuration of html-webpack-plugin
new HtmlWebpackPlugin({ template: path.join(paths.appSrc, 'index.html'), }),
Reference
template as follows<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>webpack babel react revisited</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <p id="app"></p> </body> </html>
The next step is to witness the miracle
重新启动服务,你有没有发现搭建一个 React
应用程序就这么简单
接下来,大家就可以 自行探索
,添加更多的东西来适应自身应用程序的需要
下面再补充一下如何添加 CSS
和 图片
每个 web 应用程序都离不开 CSS
,我们在 src
目录中创建 style.css
body, html, #app { margin: 0; width: 100%; height: 100%; } #app { padding: 30px; font-family: '微软雅黑'; }
将其添加到应用程序中我们需要使用 css-loader
如果想将 css
注入 style
标签中,我们还需要 style-loader,通常,是将这两个结合使用
我们使用 extract-text-webpack-plugin 将其解压到外部
为此,我们首先安装
yarn add --dev css-loader style-loader extract-text-webpack-plugin
然后在 app.js
中导入 style.css
import './style.css';
最后更新 webpack
配置文件
config.module = { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', }), }, ], } config.plugins.push([ new ExtractTextPlugin("styles.css"), ])
看起来稍显复杂,但是大功告成,为了更好地使用它,我们都得经历这个过程
重新启动服务,你会发现你的 dist
目录中多了一个 styles.css
最后我们增加 file-loader 来处理我们引入的图片等文件
首先,安装 file-loader
yarn add --dev file-loader
我们在 src/images
中放入一张图片,在 app.js
中导入
import avatar from './images/avatar.jpg'; export default class Hello extends Component { render() { return ( <p> <img src={avatar} alt="avatar" style={{ width: 400, height: 250 }} /> </p> ); } }
更新 webpack
配置文件
config.module = { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'assets/images/', }, }, ], }, ], }
重启服务,哈哈
如果有什么问题,可以查看 webpack-babel-react-revisited 仓库
现在,大家对搭建 React
应用程序是不是感觉轻松了很多,但 React
整个技术栈并不止包括这些,还有 Redux
,React Router
,单元测试
,代码校验
等内容,关于 React
其他内容,欢迎查看日志其他文章
The above is the detailed content of Knowledge about Webpack, Babel and React. For more information, please follow other related articles on the PHP Chinese website!