依照webpack的React项目搭建,react开发环境的详实步骤

By admin in 4858美高梅 on 2019年4月14日

安装

在早期的级差,能够利用在线编辑的网址来学学React基本的语法。
从 Hello World
开始,可以在Codepen,或者codesandbox上展开编写制定。
自然,也能够利用npm只怕yarn来安装重视,本地开展付出。
那里先讲解通过create-react-app来创设二个React项目,后边会详细讲解怎么着用webpack创造二个react项目。

一、安装准备工作 ( 本教程在windows下安装达成 )

    1、安装 Node.js ( 传送门:Node.js
的安装)

        官方下载 NodeJs 对应系统安装包,执行安装即可,打开cmd  执行 node
-v 查看 node 版本确认 node 是不是安装成功,执行 npm -v  查看 npm 版本

    二、将 npm 改成 cnpm 以满足国内翻墙不易的喜剧,在 node.js
安装笔记中也早就介绍

全局安装的话可实施该命令:

    npm install -g cnpm –registry=

条件至关主要借助版本

 

create-react-app

详尽文书档案能够去github查看。

二、使用脚手架创建项目(推荐)

     create-react-app 是出自于
照片墙,通过该命令大家不用配置就能非常快塑造 React 开发环境。
 create-react-app 自动创设的类别是根据 Webpack + ES陆 。React
官网

    执行以下命令创建项目,当中 my-app 为你的项目名称,npm start 
为运维服务命令:

$ cnpm install -g create-react-app

$ create-react-app jiaocheng

$ cd my-app/

$ npm start

4858美高梅 1

设置界面

4858美高梅 2

安装成功后的类型目录

 node_modules:
这一个中含有了react项目中会用到的局地组件,install的时候下载下来的,你能够进入看看,有1部分如base64之类的我们可能会用到的组件;

public:里面含有了大家项目中的运营页面,react比较吻合单页面项目选拔开发,所以一时半刻只包涵三个index.html,并且那也是react工程的进口页面,入口页面怎么理解,便是您运转项目后,打开的首页,第贰眼突显的可怜页面;

src:里面富含了有的大家温馨使用的js文件,css文件,img文件等等,但您打开src文件夹你会意识很凌乱,不要管什么app.js,你就看出index.js即可,系统暗中认可将index.html对准了index.js,index.js相当于大家的入口js,他和index.html所对应。

运用 npm start
命令运营服务后,则会自行打开项目主页  ,结果如下图所示:

4858美高梅 3

开行服务进程

4858美高梅 4

起步服务后的主页

温馨安顿过webpack的同窗只怕会意识,“好像少点什么?”,create-react-app脚手架工具对webpack配置文件实行了隐形,为了可以得手的搭建antd-mobile,我们必要让配置文件“展现出来”,命令如下:

npm run eject

小提醒:运营前你只怕要求按CT奥迪Q5L+C退出运转的连串

运营后,发现它会实施1多重安装..出现如下结果注脚成功达成:

依照webpack的React项目搭建,react开发环境的详实步骤。Running npm install…

added 117 packages and updated 1 package in 14.894s

Ejected successfully!

Please consider sharing why you ejected in this survey:

npm run eject执行后项目中多出了多个叫config的文本夹具体如下:

4858美高梅 5

config 目录文件

为了阅读那篇文章的同室前面少些坑,大家顺手消除下打包路径的题材。用create-react-app脚手架搭建的react项目应用
npm run build
之后生成的打包文件只可以在根目录访问,那样放在服务器目录就访问不到了,为了你们不要和自笔者同1包裹后在哭着百度化解方案,在那边一并释放:

config文件夹上边找到paths.js文件,打开后大致在3四~39行内外有如下代码:

function getServedPath(appPackageJson) {

  const publicUrl = getPublicUrl(appPackageJson);

  const servedUrl =envPublicUrl || (publicUrl ?
url.parse(publicUrl).pathname : ‘/’);

  return ensureSlash(servedUrl, true);

}

将那句修改为:(仔细看,最前面包车型客车”/”后边加了八个”.”)

const servedUrl =envPublicUrl || (publicUrl ?
url.parse(publicUrl).pathname : ‘./’);

上边举办LESS
CSS预处理器配置,antd-mobile注重LESS模块,不安装和配备好,样式是不会起效果的,在项目根目录运维如下命令:

cnpm install

less less-loader

–save-dev

那之中注意下 less 和 less-loader
都以急需安装的,不然在起步项目时就会报Error in Cannot find module
‘less’ 原因是npm @
叁不能够再分析peerDependencies了,OK安装后,我们还要出手安排下,打开config文件夹中的webpack.config.dev.js文件,搜索“exclude:” 
找到大致这么一行:

  exclude: [/\.js$/, /\.html$/, /\.json$/],

loader: require.resolve(‘file-loader’)

… …

在exclude: 前边的数组中进入1项   /\.less$/   那行变为

exclude: [/\.js$/, /\.html$/, /\.json$/,/\.less$/],

然后在loders中投入1段:

//新增less支持

{

    test: /\.less$/,

    use: [

      require.resolve(‘style-loader’),

      require.resolve(‘css-loader’),

      {

        loader: require.resolve(‘postcss-loader’),

        options: {

          ident: ‘postcss’, //

          plugins: () => [

            pxtorem({

              rootValue: 100,

              propWhiteList: [],

            }),

            autoprefixer({

              browsers: [‘last 2 versions’, ‘Firefox ESR’, ‘> 1%’,
‘ie >= 8’, ‘iOS >= 8’, ‘Android >= 4’],

            }),

          ],

        },

      },

      {

        loader: require.resolve(‘less-loader’),

        options: {

          modifyVars: { “@primary-color”: “#1DA57A” },

        },

      },

    ],

},

搞不清楚loders结构的同班,找下如下代码,加在其最终二个花括号下方即可:

          {

            test: /\.(js|jsx|mjs)$/,

            include: paths.appSrc,

            loader: require.resolve(‘babel-loader’),

            options: {

              plugins: [

                      [‘import’, { libraryName: ‘antd-mobile’, style:
true }],

                    ],

              // This is a feature of `babel-loader` for webpack
(not Babel itself).

              // It enables caching results in
./node_modules/.cache/babel-loader/

              // directory for faster rebuilds.

              cacheDirectory: true,

            },

  },

同样的法子在
config文件夹里的webpack.config.prod.js里在做一回,这步配置就形成了。接下来安装babel-plugin-import
,然后就足以按需加载组件了,并且它会活动关联css样式,无需单独引进。大家只须要如此引进三次即可:import
{ Button } from ‘antd-mobile’;详细的见官网吧。

cnpm install babel-plugin-import –save-dev

安装达成后,在webpack.config.dev.js中找到那段代码按如下配置:

{

    test: /\.(js|jsx)$/,

    include: paths.appSrc,

    loader: require.resolve(‘babel-loader’),

    options: {

      plugins: [

        [‘import’, { libraryName: ‘antd-mobile’, style: true }],

      ],

      // This is a feature of `babel-loader` for webpack (not Babel
itself).

      // It enables caching results in
./node_modules/.cache/babel-loader/

      // directory for faster rebuilds.

      cacheDirectory: true,

    },

},

至此,Create-React-App脚手架搭建antd-mobile并拓展按需加载的开销环境布署达成!

  1. webpack@4.8.1
  2. webpack-cli@2.1.3
  3. webpack-dev-server@3.1.4
  4. react@16.3.2
  5. babel-core@6.26.3
  6. babel-preset-env@1.6.1
  7. bable-preset-react@6.24.1

前言 

工欲善其事,必先利其器。为了更加好的求学React,我们先简要的把开发条件搭建起来。本文主要介绍使用webpack搭建React项目,尽管您对React或es陆的基本功语法还不打听,提出先去上学学习。

  • #### 基础环境

node/npm

  • #### webpack

当代JavaScript程序行使的模块打包器。它最首要分析你的档次布局,找到JavaScript模块以及别的部分浏览器无法平素运营的拓展语言(Scss、less、TypeScript),将其更换和包裹为适当的格式供浏览器接纳。

  • #### 种类创制

成立1个文件夹first-react,进入该目录,在该目录下开拓两个终极,执行npm
init。依照提醒输入内容,也能够从来按回车键跳过。执行完后目录中会多二个package.json文件,那是项指标为主文件,蕴含包依赖管理湖剧本职责。 

mkdir first-react
cd first-react 
npm init
  • #### 安装react, react-dom, webpack

在档次根目录下举办上边发号施令,个中–save的意义是项目上线运营所需的包,即生产环境(–save-dev是开发条件所需的包)。

npm install react react-dom --save
npm install webpack --save-dev 
  • ####  连串目录和源码

    –your project
    |–dist(项目打包输出目录)

       |--bundle.js(该文件是由webpack打包生成)
       |--index.html  
    

    |–src

       |--index.js
    

    |–webpack

       |--webpack.config.js
    

    |–package.json

  index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
    /* react DOM*/
    </div>
    <script src="bundle.js"></script>
</body>
</html>

  index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

render(
    <div>Hello React!</div>,
    document.getElementById('app')
);

  webpack.config.js

const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件,程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    output: {
        path: path.resolve(__dirname, '../dist'), // 输出的路径
        filename: 'bundle.js'  // 打包后文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react'],
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

此处要是在类型根目录间接开始展览webpack构建会报错(创设命令:webpack
–config
webpack/webpack.config.js),因为大家利用了react,react是采纳jsx语法达成的,而jsx无法直接被浏览器度和胆识别和实行,所以那边须要引进Babel库进行转码。

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

  babel-loader: babel加载器

  babel-preset-es2015: 支持es2015

  babel-preset-react: jsx 转换成js

聊起底重复实行创设,然后点击build/index.html,即可看出Hello React!

webpack --config webpack/webpack.config.js // 更多webpack命令尽在webpack --help查阅

  接下去我们开始展览一下大致的优化,执行遵从等同。

index.js

import React from 'react';
import { render } from 'react-dom';
import App from './App'

const renderDom = Component => {
    render(
        <Component />,
        document.getElementById('app')
    );
}
renderDom(App);

 在项目根目录下新建json文件.babelrc,将babel的铺排单独提取出来。

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

webpack.config.js文件作相应的调整。

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件,程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    output: {
        path: path.resolve(__dirname, '../dist'), // 输出的路径
        filename: 'bundle.js'  // 打包后文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

在src下新建App.js。

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>Hello React!</div>
        );
    }
}
  • ####  以脚本格局实施创设

编排package.json,插足自定义脚本,在品种根目录执行npm run
dev即可达到地点壹样的效力。

"scripts": {
    "dev": "webpack --config webpack/webpack.config.js"
  }
  • ####  搭建前端服务器

能够发现,每一趟都要再度营造然后刷新index.html,才能获取最新的功用,开发成效十分的低。万幸webpack-dev-server能够扶助我们缓解那一个标题,webpack-dev-server是二个微型的静态文件服务器,为webpack打包的财富文件提供Web服务。并且提供自动刷新和Hot
Module
Replacement(模块热替换:前端代码变动后无需刷新整个页面,只把转变的局地替换掉)。OK,让大家初步设置和布局webpack-dev-server。

npm install webpack-dev-server --save-dev  

 在档次根目录下创立bin目录,进入bin目录,创设dev-server.js文件,编辑如下

'use strict'

const WebpackDevServer = require('webpack-dev-server');
const config = require('../webpack/webpack.config');
const webpack = require('webpack');
const path = require('path');
const compiler = webpack(config);

const server = new WebpackDevServer(compiler, {
    contentBase: path.resolve(__dirname, '../dist'), //默认会以根文件夹提供本地服务器,这里指定文件夹
    historyApiFallback: true, //在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
    port: 9090, //如果省略,默认8080
    publicPath: "/"
});
server.listen(9090, 'localhost', function (err) {
    if (err) throw err
})

   编辑package.json,成立一条脚本

"scripts": {
    "dev": "node bin/dev-server"
  }

   最终,单独在该品种根目录起二个巅峰,执行npm run
dev,运维成功后走访
React!,恭喜您。 最终再做一下归纳的测试,将App.js修改如下后保存,能够窥见,项目会活动重新编写翻译运转,刷新浏览器即可知到最新的更改。

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello React</h1>
                <h2>Hello React</h2>
            </div>
        );
    }
}
  • ### Html-webpack-plugin

  删除根目录下dist目录,刚刚我们是团结编辑和配备index.html,将包装后的js引进到index.html中。现删除后运营服务会报错,未来大家使用插件完结自动引入,免去手工业配置,安装html-webpack-plugin

npm install html-webpack-plugin --save-dev

  在src目录新建index.template.html。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="app">
        </div>
    </body>
</html>

  编辑webpack.config.js。末了再度起动服务即可。假若想看包装后的公文可以打开chorme,在Sources即可看见。或然使用webpack –config
webpack/webpack.config.js实行创设,在项目目录的dist目录查看。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件,程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    output: {
        path: path.resolve(__dirname, '../dist'), // 输出的路径
        filename: 'app/[name]_[hash:8].js'  // 打包后文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
   plugins: [
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, '../src/index.template.html'),
       inject: true
     })
   ]

}

Node和Npm

率先安装Node.js,这一个从来在Node官网下载安装包即可。提出下载短期支撑版,bug会较少。
设置完成后,在终端恐怕cmd里输入

npm -v

假若要运用npx,确定保证npm的版本大于五.2。假使npm版本较低,使用

npm i -g npm

履新npm到新型版,就能够应用npx了。有关npx的详细新闻,能够查看那篇小说。
比方利用yarn,也足以自行去yarn官网下载安装。

②、不使用脚手架手动安装 React 项目

    安装项目重视包

1、安装node.js  将镜像改成天猫商城的 使用cnpm进行设置

二、打开cmd(小黑窗)进入到品种目录

4858美高梅 6

友好手动创造项目目录并切换来目录下

三、安装包管理 执行命令  cnpm init
直接回车,直接使用默许值即可,也得以根据提醒自个儿自定义项目内容

4858美高梅 7

陈设 package.json 的骨干音信

依据以下顺序进行设置相关注重  (其中 -D 同 –save
1样,都是将设置的包名称和版本号记录在 pachage.json 中)

cnpm install react -D                             #react本身

cnpm install react-dom -D                     #react-dom本身

cnpm install react-hot-loader -D            #react热更新

#babel相关的库

cnpm install babel-core -D                      #后台编写翻译

cnpm install babelify -D                          #

cnpm install babel-preset-react -D         #bable-react预设

cnpm install babel-preset-es2015 -D      #babel对ES2015的预设

cnpm install babel-loader -D                    #babel加载器

4858美高梅 8

安装 react 及 react-dom

4858美高梅 9

安装 babel-core 

4858美高梅 10

安装 babelify 、babel-preset-react 、babel-preset-es2015

设置到位后在品种文件夹下的 package.json 中就能够查阅已经设置的包文件

4858美高梅 11

翻看已设置项目

行使webpack举行打包,实行webpack包依赖安装

#首先先安装全局 webpack

cnpm install -g webpack                         #webpack的本地依赖库
 -g  是指全局安装

cnpm install -g webpack-dev-server       #webpack服务器的地面正视库

设置新本子的webpack 会造成间接提示让安装 webpack-cli
的提示,所以尽只怕先安装 老版本 webpack壹.壹三.二版本 

webpack 安装一.一三.2 版本,安装在此之前卸载在此以前的webpack ,全局和文书夹内都卸载二遍

npm uninstall webpack -g   (全局卸载)

npm uninstall webpack    (从体系文件夹中卸载)

大局安装钦定版本包                       cnpm install -g webpack@1.1三.2

在类型文件夹中安装钦定版本包   cnpm install webpack@一.一三.2 -D

4858美高梅 12

webpack 全局安装如图

4858美高梅 13

 webpack-dev-server全局安装如图

#其次再安装webpack到花色中

cnpm install webpack -D                        #webpack的地面依赖库  -g
 是指全局安装

cnpm install webpack-dev-server -D      #webpack服务器的本土正视库

4858美高梅 14

设置如图

借使出现浅黄警戒则不用去管,没难点。此时查看
 package.json则会发现webpack的包已经安装上了

4858美高梅 15

翻开安装结果

在根目录配置webpack配置文件  webpack.config.js
(文件名称是固定的,不供给改变)
 如若设置任何名目则系统不可能自动找到,须求在布署文件中展开点名

webpack版本为三.捌.一 ,其安排文件内容如下:

4858美高梅 16

webpack.config.js 配置

4858美高梅 17

品种文件夹布局

index.html 及 indes.js 文件内容

4858美高梅 18

index.html 及 indes.js 文件内容

4858美高梅 19

webpack.config.js 文件

然后进入到花色目录下在cmd中执行命令:webpack
 进行李包裹装,假如有不当会平昔报错

4858美高梅 20

动用 webpack  举行编写翻译打包

假定 出现以下界面则是编写翻译成功

4858美高梅 21

编译打包成功

原项目中要将引进的index.js 替换到编译之后的bundle.js
文件,然后实施webpack命令则编写翻译成功今后的文书就一蹴而就,在浏览器中可观望结果

在未曾执行自动化监测在此以前,每一次变更文件内容都亟待执行三回命令重新编写翻译贰回文件,那样浏览器页面才会转移起效果

因为设置了webpack-dev-server 服务,所以可以动用自动化监测,执行命令
webpack –watch   则可运行,甘休按ctrl +c 

如此每一回变更文件从此,服务则会自动执行二回编写翻译,每一遍编写翻译的hash值都是例外的

4858美高梅 22

但是那样子每回都亟需刷新浏览器,执行如下:webpack-dev-server
命令使用该命令所给的链接则足以访问项目并在类型改变的景况下无需手动刷新浏览器则会活动刷新内容(试验失败,未中标)小伙伴们得以自行测试,壹般建议用脚手架安装相比便于,每一趟换代都会自动刷新

webpack的利用表明文书档案  
 

4858美高梅 23

webpack安装及布局

create-react-app

法定介绍了三种成立四个react-app的点子。
1.npx

npx create-react-app my-app

2.npm init xxx your-app

npm init react-app my-app

npm
init也就是三回npx的通令封装,具体解释能够看一下那篇npm文档-init|npm。
要求注意的是,那个方法需求越来越高版本的npm,六+。
3.yarn

yarn create react-app my-app

自笔者个人相比提议利用yarn来保管npm注重,速度越来越快,上手也相当粗略。此处yarn的本子供给0.25+。

  1. 起步

cd my-app

等到依靠安装收尾,进入到新创造的my-app目录里。

├── node_modules
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

create-react-app只设置了至少能运维三个react-app的借助,例子也很简短,今后大家运维一下。

yarn start

运作成功后,就能够在

新建项目目录,起先化npm,新建开发源目录

webpack

现行反革命前端开发常用的营造筑工程具是webpack。接下来介绍用webpack创设二个粗略的react-app。

mkdir webpack-react && cd webpack-react
npm init -y
mkdir src

新建目录

率先新建贰个索引。

mkdir webpack-react-app
cd webpack-react-app
npm init -y

那儿,目录里会有2个package.json。接下来,大家新建二个HTML文件,存放到dist目录,作为四个载体。

mkdir dist
cd dist
touch index.html

它的代码如下

<!DOCTYPE html>
<html>
  <head>
    <title>webpack react app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/main.js"></script>
  </body>
</html>

此处的id,私下认可为app,在实际编写时,能够修改。main.js也是webpack自身生成的,能够修改。

2.webpack-cli

安装webpack

接下去安装webpack的部分依靠。

yarn add -D webpack webpack-dev-server webpack-cli

设置收尾之后,在package.json配置一下起动命令。

...
"scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode development",
  ...
},
...

–mode
用来陈设形式,能够分别是创设依旧支付格局,假如是营造发表,就把有些支出时的升迁等插件去掉。
–config 指向webpack的陈设文件,暗许为同目录下的 webpack.config.js

webpack从肆.x版本开头,须要同时设置webpack,webpack-cli(此工具用于在指令行中运转webpack)。

配置webpack

接下去大家来成立 webpack.config.js

touch webpack.config.js

它的骨干代码如下:

module.exports = {
  entry: './src/index.js', //webpack的入口文件
  output: { //输出目录配置
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'main.js'
  },
  devServer: { //开发时服务器的配置
    contentBase: './dist'
  }
};

依照习惯, src/index.js 是我们默许的进口。打包停止之后,生成叁个
main.js
到dist目录下。配置了DevSever之后,我们得以在浏览器里拜访到dist下的文件。
接下去须求编写制定 src/index.js

console.log('webpack test');

终极运维

yarn start

打开http://localhost:8080查看控制台出口。
健康输出了webpack test。
接下去要引进react。

npm install webpack webpack-cli --save-dev

安装babel

react用到了jsx语法,供给使用babel来转义三回,才能被浏览器平时读取。
安装babel和依赖

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

新建babel配置文件

touch .babelrc

安插如下:

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

具体的 babel-preset-env
配置能够查阅babel文档-babel-preset-env配置。
安装完成之后,新的 webpack.config.js 配置为

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  ...
};

随即就可以安装react信赖了。

yarn add -D react react-dom

index.js 重写一下。

import React from 'react';
import ReactDOM from 'react-dom';

const title = 'Hello World!';

ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);

运维一下

yarn start

ok,3个归纳的react-app就创制成功了。
下1篇,将会讲解react的基本概念和语法。
感激阅读。

三.wepback布局文件

在类型根目录新建webpack.config.js文件,此文件为webpack运营为主文件。

webpack.config.js 基本配置

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',              // 入口文件
  output: {                       // webpack打包后出口文件
    filename: 'app.js',               // 打包后js文件名称
    path: path.resolve(__dirname, 'dist')  // 打包后自动输出目录
  }
}

package.json 文件 scripts配置

"scripts": {
  "build": "webpack"
}

此刻在命令行运营npm run
build,就能履行webpack了,webpack会自动去找项目根目录里的webpack.config.js文件,执行打包。

npm run build
// webpack打包后的项目
├── dist
│  └── app.js       // 打包后的app.js
├── package.json
├── src
│  └── index.js      // 源目录入口文件
└── webpack.config.js

webpack.config.js module相关配置

webpack
视全部文件都为模块,图片,css文件,字体等静态能源都会卷入进js文件,所以会须求用到loader文件,愈来愈多Loaders能够查询网站,接下去大家设置一些必备的Loader文件。

npm install style-loader css-loader url-loader --save-dev

webpack.config.js加入module模块

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 }
}

引进loader后,就可以在你的src/index.js文件import你想引进的css文件可能其它静态能源。

cd src && touch main.css

src/index.js 文件引进css

import "./main.css";

webpack.config.js plugins配置

根本的js文件和静态文件都能不负众望打包成一个js文件后,大家需求把这一个js文件放到html文件里,webpack插件***html-webpack-plugin***就是干这一个事情的,它能自动生成2个html文件并把大家打包好的js文件放入html。

npm install html-webpack-plugin --save-dev

webpack.config.js 配置plugins

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({title: 'production'}) // 配置plugin
 ]
};

实践npm run build后,我们得以观望dist目录多出2个index.html文件。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>name</title>
 </head>
 <body>
 // 打包后的app.js已经被自动插入了html文件
 <script type="text/javascript" src="app.js"></script></body>
</html>

到那边,webpack最简便最中央的要求已经配备完毕。 此时项目组织为:

├── dist            // 生产目录
│  ├── app.js
│  └── index.html
├── package.json
├── src            // 源目录
│  ├── index.js
│  └── main.css
└── webpack.config.js

React 的webpack配置

安装react

npm install react react-dom --save

安装react,wepback转换依赖

React组件由JSX组成,浏览器不可能识别JSX,必要babel实行转移。

  1. babel-croe 为babel大旨文件
  2. babel-preset-env 将ES6转义成ES5
  3. babel-preset-react 将JSX转义成js
  4. babel-loader webpack的babe转换

复制代码 代码如下:

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

.babelrc配置文件

在档次根目录下新建.babelrc文件,此文件为bable宗旨配置,babel会自动在类型根目录下识别。

// .babelrc
{
 "presets": ["env", "react"]
}

webpack babel-loader 配置

// 在webpack.config.js 的modules.rules中加入此配置
{
 test: /\.(js|jsx)$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader'
 }
} 

html-webpack-plugin 模板配置

我们理解react须要获得页面多少个根成分,然后render才会生效,大家能够新建八个html文件,让html-webpack-plugin插件基于这么些文件来收入打包。

由此大家在根目录下新建一个html文件,以此文件作模板。

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
    // react需要的渲染根元素
 <div id="root"></div>
</body>
</html>

此时webpack.config.js配置:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
   loader: 'babel-loader'
  }
  },
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'production',
  template: './index.html'  // 模板文件位置
 }) 
 ]
};

书写React,运行webpack

// src/index.js
import React from 'react';
import ReactDom from 'react-dom';

import './main.css'

ReactDom.render(
 <h1>hello world</h1>,
 document.getElementById('root')
);

运维npm run
build,生成dist目录,打开dist目录中的index.html文件,能够窥见浏览器已健康渲染”hello
world”。

dev环境热更新配备

react的wepack完结之后,是还是不是发现每修改1遍代码,想看到功效,得重复打包二次才行。webpack-dev-server配置能够扶持大家落到实处热更新,在付出条件解放大家的生产力。

安装webpack-dev-server

npm install webpack-dev-server --save-dev

webpack.config.js 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
   loader: 'babel-loader'
  }
  },
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'production',
  template: './index.html'  
 }),
 // hot 检测文件改动替换plugin
 new webpack.NamedModulesPlugin(),   
 new webpack.HotModuleReplacementPlugin() 
 ],
    // webpack-dev-server 配置
 devServer: {
 contentBase: './dist',
 hot: true
 },
};

运行webpack-dev-server

在 package.json 文件 加入 scripts 配置:

"scripts": {
 "build": "webpack",
 "dev": "webpack-dev-server --open --mode development" // webpack-dev-server
},

命令行运维npm run dev

能够在浏览器中输入localhost:8080
内容即为dist目录下的index.html内容。修改src/index.js中的内容还是正视,即实时在浏览器热更新看到。

时至后天,react的webpack的基本功开发条件已全部配置完成。

如上正是本文的全部内容,希望对我们的求学抱有支持,也希望大家多多扶助脚本之家。

您或许感兴趣的稿子:

  • 利用webpack搭建react开发条件的主意
  • 4858美高梅 ,手动用webpack搭建第1个ReactApp的以身作则
  • 详解Webpack+Babel+React开发环境的搭建的不二等秘书诀步骤
  • 详解基于webpack搭建react运转条件

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有