重温 Webpack, Babel 和 React
Posted lovollll
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重温 Webpack, Babel 和 React相关的知识，希望对你有一定的参考价值。
开始之前
在书写文章之前，我假设大家已经有了 javascript，Node 包管理工具，Linux 终端操作 这些基本技能，接下来，我将一步一步指引大家从头搭建一个 React 项目
最终实现的效果
我们将使用 Webpack 和 Babel 搭建一个 React 应用，我们的目的很清晰，就是 更好的理解和掌握这些工具的使用
我们创建的应用程序既要做到 最小，也要遵循 最佳实践，为不是特别熟练的同学巩固一下基础
初始化
创建你的项目，并添加的你的配置文件 package.json
mkdir webpack-babel-react-revisited
cd webpack-babel-react-revisited
yarn initWebpack
我们首先安装 Webpack，它是目前非常流行的 模块打包器，它将应用程序包含的每个模块打包成少量的 块，以便这些代码从服务器加载到浏览器中
yarn add webpack --dev接下来，我们开始书写一些模块。我们将源文件 app.js 保存到 src 目录中
/** app.js */
console.log(‘Hello from 枫上雾棋!‘);然后，我们跑一下 Webpack
./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.js如果你打开生成的 app.bundle.js，你会发现上面是 webpack 的模块处理代码，下面是我们书写的 console.log
这条指令是将我们的 app.js 作为 Webpack 的 入口文件，将结果输出到 dist 文件夹中，指令有些冗长，在实际开发中，我们使用 webpack 配置文件来代替，为了文档结构看起来更加清晰，参考 目录 如下
├── config
│ ├── paths.js
│ ├── webpack.config.prod.js
├── src
│ ├── app.js
├── package.json下面是参考 配置
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‘),
};<p>这个文件不是必须的，但在项目增大后，它的意义就瞬间出来了</p> <p><code>webpack.config.prod.js</code></p> <pre><code class="javascipt">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;这里我们还添加了一个 html-webpack-plugin，它简化了我们
HTML文件的创建，安装我们就不再这里赘述了，如果还不知道的同学可以点击链接查看其中，我们还使用了一个
语法糖，这样在我们导入.js，.jsx时就不需要指定扩展名了接下来，我们指定配置文件再跑一下
Webpack./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.js发现除了实现上面的效果外，还自动帮我们生成了一个
index.html，我们可以点击这个html，在控制台中查看效果，相比上面，是不是方便了很多当然，最后我们肯定也不是使用这种方式来
build，打开package.json，添加如下脚本命令，然后执行yarn build，是不是瞬间感觉nice了很多"scripts": { "clean": "rimraf dist *.log .DS_Store", "build": "yarn run clean && webpack --config config/webpack.config.prod.js --progress" }Webpack dev server
除此之外，
Webpack为我们提供了一个的dev server，它还支持模块热替换首先，安装
webpack-dev-serveryarn add --dev webpack-dev-server在
config目录中添加配置文件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;
<p>在 <code>webpack.config.prod.js</code> 的基础上，我们增加了 <a href="https://github.com/baldore/open-browser-webpack-plugin" rel="nofollow noreferrer">open-browser-webpack-plugin</a> 插件和 <code>devServer</code> 配置，<code>open-browser-webpack-plugin</code> 插件顾名思义，会帮我们自动打开 <code>dev server</code> 最后返回给我们的地址</p> <p>更新 <code>package.json</code></p>"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"
}<p>现在，我们就可以通过如下方式来启动</p>yarn start
<p>启动后，有没有瞬间感觉很棒</p> <h2>Babel</h2> <p>为了能够使用 <code>ES6</code> 以及更高版本，我们需要一个 <code>转换编译器</code>，我们选择 <code>Babel</code>，它能将 <code>ES6</code> 转换成可以在浏览器中运行的代码，除此之外，他还内置了 <code>React JSX</code> 扩展，可以说它的出现推动了 <code>JavaScipt</code> 的发展</p> <p>所有，我们安装下面这些依赖包</p>yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react
<p>创建 <code>Babel</code> 默认配置文件 <code>.babelrc</code></p>{
"presets": ["env", "react"]
}<p>这个是告诉 <code>Babel</code> 用我们刚刚安装的两个 <code>presets</code></p> <p>接下来，更新 <code>webpack</code> 配置文件</p> <pre><code class="javascipt">config.module = { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: [‘babel-loader‘], }, ], }更新以后，虽然看不到什么变化，但事实上我们可以使用
ES6了React
最后，我们来添加
React，这也可能是你阅读这篇文章的原因首先，我们还是先安装它
yarn add react react-dom用下面代码替换
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‘));
<p>因为要添加 <code><div id="app"></div></code>，所以我们要修改一下 <code>html-webpack-plugin</code> 的配置</p>new HtmlWebpackPlugin({
template: path.join(paths.appSrc, ‘index.html‘),
}),
```参考
template如下
<!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> <div id="app"></div> </body> </html>接下来，就是见证奇迹的时刻
重新启动服务，你有没有发现搭建一个
React应用程序就这么简单接下来，大家就可以
自行探索，添加更多的东西来适应自身应用程序的需要下面再补充一下如何添加
CSS和图片CSS
每个 web 应用程序都离不开
CSS，我们在src目录中创建style.cssbody, 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‘;<p>最后更新 <code>webpack</code> 配置文件</p> <pre><code class="javascipt">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-loaderyarn add --dev file-loader我们在
src/images中放入一张图片，在app.js中导入
import avatar from ‘./images/avatar.jpg‘;export default class Hello extends Component {
render() {
return (
<div>
<img src={avatar} alt="avatar" style={{ width: 400, height: 250 }} />
</div>
);
}
}<p>更新 <code>webpack</code> 配置文件</p> <pre><code class="javascipt">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其他内容，欢迎查看日志其他文章原文链接：Setting up Webpack, Babel and React from scratch, revisited
以上是关于重温 Webpack, Babel 和 React的主要内容，如果未能解决你的问题，请参考以下文章
将 webpack 与 babel 和 babel-preset-react 和 babel-preset-es2015 一起使用
使用 Webpack、Babel 和 React 的 IE11 中的语法错误
使用 express 和 babel 在 React 应用程序中配置 Webpack
React Native - 为啥我需要 babel 或 webpack？