GVKun编程网logo

重温 Webpack, Babel 和 React（babel和webpack如何配合的）

17

最近很多小伙伴都在问重温Webpack,Babel和React和babel和webpack如何配合的这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展babel-使用Webpack和

最近很多小伙伴都在问重温 Webpack, Babel 和 React和babel和webpack如何配合的这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展babel - 使用Webpack和Babel来搭建React应用程序、Material-UI + React + Babel + Webpack 环境配置、React 【ES2015】+ Babel + Gulp + Webpack、React 项目迁移 Webpack Babel7的实现等相关知识，下面开始了哦！

本文目录一览：

重温 Webpack, Babel 和 React（babel和webpack如何配合的）

重温 Webpack, Babel 和 React（babel和webpack如何配合的）

开始之前

在书写文章之前，我假设大家已经有了 JavaScript，Node 包管理工具，Linux 终端操作 这些基本技能，接下来，我将一步一步指引大家从头搭建一个 React 项目

最终实现的效果

我们将使用 Webpack 和 Babel 搭建一个 React 应用，我们的目的很清晰，就是 更好的理解和掌握这些工具的使用

我们创建的应用程序既要做到 最小，也要遵循 最佳实践，为不是特别熟练的同学巩固一下基础

初始化

创建你的项目，并添加的你的配置文件 package.json

mkdir webpack-babel-react-revisited
cd webpack-babel-react-revisited

yarn init

Webpack

我们首先安装 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'),};

这个文件不是必须的，但在项目增大后，它的意义就瞬间出来了

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;

这里我们还添加了一个 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-server

yarn 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',new OpenbrowserPlugin({ url: `http://${hostname}:${port}` }),devServer: {
    contentBase: paths.appdist,compress: true,port,};

module.exports = config;

在 webpack.config.prod.js 的基础上，我们增加了 open-browser-webpack-plugin 插件和 devServer 配置，open-browser-webpack-plugin 插件顾名思义，会帮我们自动打开 dev server 最后返回给我们的地址

更新 package.json

"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"
}

现在，我们就可以通过如下方式来启动

yarn start

启动后，有没有瞬间感觉很棒

Babel

为了能够使用 ES6 以及更高版本，我们需要一个 转换编译器，我们选择 Babel，它能将 ES6 转换成可以在浏览器中运行的代码，除此之外，他还内置了 React JSX 扩展，可以说它的出现推动了 JavaScipt 的发展

所有，我们安装下面这些依赖包

yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react

创建 Babel 默认配置文件 .babelrc

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

这个是告诉 Babel 用我们刚刚安装的两个 presets

接下来，更新 webpack 配置文件

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

因为要添加 <div id="app"></div>，所以我们要修改一下 html-webpack-plugin 的配置

new HtmlWebpackPlugin({
  template: path.join(paths.appSrc,

参考 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.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 (
      <div>
        <img src={avatar} alt="avatar" style={{ width: 400,height: 250 }} />
      </div>
    );
  }
}

更新 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 其他内容，欢迎查看日志其他文章

原文链接：Setting up Webpack,Babel and React from scratch,revisited

babel - 使用Webpack和Babel来搭建React应用程序

babel - 使用Webpack和Babel来搭建React应用程序

用Webpack(npm install -g webpack)代码打包，Webpack大致需要知道三件事：


1)让Webpack知道应用程序或js文件的根目录
2)让Webpack知道做何种转换
3)让Webpack知道转换后的文件保存在哪里

具体来说，大致要做以下几件事情：

1)在项目根目录下有一个webpack.config.js文件，这个是惯例
2)确保webpack.config.js能导出一个对象


module.exports = {};

3)告诉Webpack入口js文件在哪里

module.exports = { entry: ['./app/index.js'] }

4)告诉Webpack需要哪些转换插件

'./app/index.js'],module: { loaders: [] } }

所有的转换插件放在loaders数组中。

5)设置转换插件的细节

module: { loaders: [ { test: /\.coffee$/,include: __dirname + 'app',loader: "coffee-loader" } ] } }

  • test:运行.coffee结尾的文件
  • include:哪些文件件
  • loader：具体的转换插件

6)告诉Webpack导出到哪里

"coffee-loader" } ] },output: { filename: "index_bundle.js",path: __dirname + '/dist' } }

【文件结构】

app/
.....components/
.....containers/
.....config/
.....utils/
.....index.js
.....index.html
dist/
.....index.html
.....index_bundle.js
package.json
webpack.config.js
.gitignore

我们不禁要问，如何保证app/index.html和dist/index.html同步呢？

如果，我们每次运行webpack命令后，把app/index.html拷贝到dist/index.html中就好了。

解决这个问题的人是：html-webpack-plugin(npm install --save-dev html-webpack-plugin)。

引入html-webpack-plugin之后，webpack.config.js看起来是这样的：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',filename: 'index.html',inject: 'body'
});

'/dist'
    },plugins: [HTMLWebpackPluginConfig]
}
  • template: 表示源文件来自
  • filename:目标文件的名称
  • inject: 'body'表示把对dist/index_bundle.js文件的引用，放到目标文件dist/index.html的body部分

【Webpack的一些指令】

webpack webpack -w //监测文件变化 webpack -p //不仅包括转换，还包括最小化文件

【Babel】

Babel可以用来把JSX文件转换成js文件。与Babel相关的安装包括：

npm install --save-dev babel-core npm install --save-dev babel-loader npm install --save-dev babel-preset-react

  • babel-core: 就是babel本身
  • babel-loader:用来加载
  • babel-preset-react:用来完成JSX到JS的文件转换

在项目根文件夹下创建.babelrc文件。

{
    "presets": ["react"]
}

把babel-loader放到webpack.config.js文件的设置中去。

module: {
        loaders: [
            {
                test: /\.js$/,21); line-height:1.8">"babel-loader"
            }
        ]
    },plugins: [HTMLWebpackPluginConfig]
}


参考：http://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/ 

Material-UI + React + Babel + Webpack 环境配置

Material-UI + React + Babel + Webpack 环境配置

Material-UI 是一套用React写成的，符合Google Material Design 的UI组件库。

此库在编写的时候用到了ES6与ES7的一些特性，并用Babel构建，于是我稍作研究，给出最小的环境配置来使用Material-UI这套库。

初始化

创建一个项目目录并初始化项目（如果没有的话）

$ mkdir hello-material-ui
$ cd hello-material-ui
$ npm init

安装依赖

按照npm的提示初始化完毕这个目录后，开始安装依赖

$ npm install --save react react-dom react-tap-event-plugin material-ui
$ npm install --save-dev babel-core babel-loader 
$ npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1
$ npm install --save-dev webpack

第一行是生产用的 React 与 Material-UI 部分。
第二行是Babel转换器的核心部分。
第三行是Babel转换器的三个额外配置：ES2015（ES6），React，Stage1（ES7）。
第四行是Webpack的部分。

第二、三、四行的内容只在工程构建之前有用（用于开发：-dev）。

安装完毕之后呢，可以先检查一下 package.json

npm init 之后，目录中就会有一个 package.json

如果安装顺利，里面应该有至少这样一些部分：

版本号不重要，各位配置的时候说不定已经出了新的版本。
如果确认跟随本文配置失败，那可以试试完全按照我的版本号来配置。

"dependencies": {
    "material-ui": "^0.15.0","react": "^15.0.0","react-dom": "^15.0.0","react-tap-event-plugin": "^1.0.0" },"devDependencies": {
    "babel-core": "^6.8.0","babel-loader": "^6.2.4","babel-preset-es2015": "^6.6.0","babel-preset-react": "^6.5.0","babel-preset-stage-1": "^6.5.0","webpack": "^1.13.0" }

配置 Babel

配置Babel的方案有两种，一种是在目录中新建一个.babelrc 的文件，然后按照JSON格式写入规则。

另一种，可以将.babelrc 与 package.json 合并（个人推荐）：

在 package.json 中添加一个域"babel"，与之前的"dependencies" 同级。

"babel": {
    "presets": [ "es2015","react","stage-1" ],"plugins": [] }

这等同于在.babelrc 中写入：

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

这样就将Babel配置好了，接下来考虑一下配置Webpack。

配置 Webpack

在项目目录新建一个webpack.config.js ，并写入：

var path = require('path');

module.exports = {
    entry: './entry.js',output: {
        path: path.join(__dirname,'/dist'),filename: 'bundle.js'
    },resolve: {
        extensions: ['','.js','.jsx']
    },module: {
        loaders: [
            { test: /\.jsx?$/,loaders: ['babel'] }
        ]
    }
}

看上去很像一个JSON，但它其实不是，它是一个JS对象，你可以把webpack.config.js 当成一个模块。

比起JSON，用JS模块来作为配置更灵活。因为JS模块可以进行运算，甚至配置一些自定义函数。而JSON只能配置一些比较死的东西。

其实也大致能猜出一二的，整个项目的入口是./entry.js ——与webpack.config.js 同个目录下的一个JS文件。

具体各个域都有什么用，更多的配置，参见官方文档。

配置 npm 脚本

现在我们还缺少一个构建脚本，编辑package.json 中的 "scripts" 域：

"scripts": {
    "build": "webpack","build-dev": "webpack -w -d" }

接下来我们就可以在项目目录下使用简单的构建脚本了：

$ npm run build

如果是开发中，可以使用监听式的Webpack，差量打包，提升效率。

$ npm run build-dev

按照配置，打包生成的文件为 dist/bundle.js 。

至此，基本的环境已经配置完毕，我们来尝试一下调用Material-UI库。

Hello,Material-UI!

接下来用一个简洁的方式构建一个Web页面。

创建Web入口

在项目目录下创建一个index.html，写入：

<!doctype html>
<html>
    <head>
        <Meta charset="utf-8" />
    </head>
    <body>
        <script src="dist/bundle.js"></script>
    </body>
</html>

这是最基本的入口，仅设置了编码，并引用了JS。

编写Webpack入口

编辑项目目录下的 entry.js，写入：

import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}> <AppBar title="Hello,Material-UI!" /> </MuiThemeProvider> ); let app = document.createElement('div'); ReactDOM.render(<App />,app); document.body.appendChild(app);

然后运行构建脚本：

$ npm run build

输出了：

Hash: bc7d93c87854ed7f539e
Version: webpack 1.13.0
Time: 11389ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.12 MB       0  [emitted]  main
    + 301 hidden modules

可以看到，这个Webpack构建一次还是相当花费时间的，bundle.js也不小。

对于Web应用来说，一开始就加载一个MB级别的资源不是一件好事。最好将bundle.js进一步压缩，并发布到CDN上加速。最好再写一个轻量的加载动画来提升用户体验。

现在可以看到目录下有了一个dist/bundle.js。

运行

打开index.html。

成功！如此我们就生成了一个HTML入口以及一个浏览器可以运行的前端JS文件。理论上来说可以配合任何的Web应用的后端进行开发。无论是使用PHP，Java Servlet、NodeJS（Express等）、Python、Ruby……都没有问题。

甚至可以部署到github.io上。

React 【ES2015】+ Babel + Gulp + Webpack

React 【ES2015】+ Babel + Gulp + Webpack

React 【ES2015】+ Babel + Gulp + Webpack

varwebpack=require("webpack");
varcommonsPlugin=newwebpack.optimize.CommonsChunkPlugin("common.js");

module.exports={
	entry:{//入口文件
		routes:"./src/routes.js"
	},output:{//打包输出
		path:__dirname,filename:"[name].entry.js"
	},resolve:{//定义模块路径
		extensions:['','.js','jsx']
	},externals:{
'React':'window.React'
},module:{//处理模块
		loaders:[{
			test:/\.js$/,loader:'babel-loader',query:{
				presets:['es2015','react']
			}
		},{
			test:/\.jsx$/,'react']
			}
		}]
	},plugins:[commonsPlugin]
};

package.json

{
"name":"cnode.js","version":"1.0.0","description":"","main":"index.js","scripts":{
"test":"echo\"Error:notestspecified\"&&exit1"
},"author":"jso0","license":"ISC","dependencies":{
"babel-core":"^6.5.2","babel-loader":"^6.2.2","bootstrap":"^3.3.6","gulp":"^3.9.1","gulp-webpack":"^1.5.0","localStorage":"^1.0.3","react":"^0.14.7","react-bootstrap":"^0.28.3","react-dom":"^0.14.7","react-router":"^2.0.0","webpack":"^1.12.13"
},"devDependencies":{
"babel-preset-es2015":"^6.5.0","babel-preset-react":"^6.5.0"
}
}

参考：

babel 为什么没能识别我 js 文件中的 jsx 语法?

React 项目迁移 Webpack Babel7的实现

React 项目迁移 Webpack Babel7的实现

不久前写了一篇 这里简单说下 React 项目的一些配置；

首先我们新建项目 react-web ，然后进入项目初始化 package.json ；

接下来我们安装 ，这里需要注意一点，是命令行已经单独提取出来了，我们不仅需要安装 webpack 还需要安装 。

接下来我们开始安装和 react 相关的依赖包；

接下来我们初始化 babel 的配置文件。

然后把下面内容粘贴进去；

实际上 webpack 4 是可以支持无配置构建的，但是我们还是按照传统的方式写一下配置文件;我们新建 webpack.config.js

接下来我们开始 做点和 React 组件相关的东西；

我们在 src 下新建目录 components ；

我们建立一个 Header.js 和 Footer.js .

Footer.js

class Footer extends Component {
constructor() {
super();
this.state = {
year: "2018"
};
}
render() {
return (
<footer>
copyright © {this.state.year}

); } } export default Footer;

Header.js

Logo Home
  • Link1
  • Link2
    • ); } } export default Header;

    然后我们新增文件 src/index.js

    rush:js;"> import React,{ Component } from "react"; import ReactDOM from "react-dom"; import Header from "../src/components/Header"; import Footer from "../src/components/Footer";

    class ReactApp extends Component {
    constructor() {
    super();
    }

    render() {
    return (
    <div>

    ); } }

    ReactDOM.render(,document.getElementById('react-app'));

    export default ReactApp;

    我们今天的关于重温 Webpack, Babel 和 React和babel和webpack如何配合的的分享就到这里，谢谢您的阅读，如果想了解更多关于babel - 使用Webpack和Babel来搭建React应用程序、Material-UI + React + Babel + Webpack 环境配置、React 【ES2015】+ Babel + Gulp + Webpack、React 项目迁移 Webpack Babel7的实现的相关信息，可以在本站进行搜索。

    本文标签：

    上一篇企业怎么做seo策划(广告策划seo)（企业seo怎么去做）

    下一篇webpack3 create-react-app ant-mobile 搭建项目（webpack配置react）

    相关文章