从零配置webpack 4+react脚手架（一）

时间 2019-11-06

标签配置 webpack 4+react react 脚手架栏目 React 繁體版

原文原文链接

前言：

可前往个人Github/blog进行阅读，如有帮助，赏个star😊javascript

若是你和我同样学习了webpack相关的教程，并跟着webpack官方指南进行了一些简单的配置，可是不知道如何去使用它，那么这个系列的文章将经过搭建webpack+react脚手架给予你必定的配置经验，写这个系列的文章一是为了方便之后本身有配置需求时能够及时回顾，二是增强本身对于webpack的理解。我会尽量详细地一步一步讲解这个脚手架配置步骤，也会对一些须要注意的点进行提醒，但愿能帮助到你们～html

前提：

务必安装Node.js的最新版本，在控制台中输入 node -v 查看当前版本，若没有安装或不是最新版本，这里提供Node.js官网以便下载
已经了解过webpck的相关配置，否则你跟着这篇文章操做并不能增长多少熟练度，固然了，你能够先关注一下，以后再来看，题外话，若是你是webpack老手了，请务必关闭这篇文章，你的时间很是值钱。
当前文章的写做基于mac os环境下完成，如果windows，与我相同操做却得不到结果的，请Google
保持耐心，我会将这篇文章分为许多小节，防止太多时间专一形成的疲劳，你能够休息一下子看一节。

开始吧！

建一个空文件夹

让咱们在桌面建一个空文件夹，名为 webpck-react-scaffold ，并使用你的编辑器打开它。
将此文件夹拖到终端，执行：java

npm init -y
复制代码

上面命令会在你的根目录生成 package.json 文件，该文件定义了这个项目所须要的各类模块，以及项目的配置信息（好比名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。node

安装webpack

由于咱们使用的是 webpack 4+ 版本，还须要安装 webpack-cli ，执行如下命令：react

npm install --save-dev webpack webpack-cli
复制代码

安装完成，你会发如今 package.josn 中多了一个 devDependencies 属性，这是由于咱们安装依赖包时 --save-dev 的结果，这表明了开发时的依赖。以后咱们会只用 --save 安装依赖包，这表明了运行时依赖。webpack

咱们确认一下，如今根目录下的文件结构以下：git

webpack-react-scaffold
  |- node_modules
  |- package.json
复制代码

接下来，咱们在根目录下新建一个文件夹名为 config 用于存放配置文件，在此文件夹下建立一个 .js 文件名为 webpack.common.config.js ，敲入如下代码：github

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
  },
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, '../dist')
  }
}
复制代码

webpack 配置是标准的 Node.js的CommonJS 模块，它经过require来引入其余模块，经过module.exports导出模块，由 webpack 根据对象定义的属性进行解析。web

entry 属性定义了入口文件路径， output 定义了编译打包以后的文件名以及所在路径。
这段代码的意思是告诉webpack，入口文件是 src 目录下的 app.js 文件。打包输出的文件名字为 bundle.js ，保存在上一级目录下的 dist 文件夹中。chrome

咱们建立一个文件夹名为 src ，在其中新建一个js文件名为 app.js ，如今咱们的目录结构以下：

webpack-react-scaffold
+ |- config
+ |- webpack.common.config.js
  |- node_modules
+ |- src
+ |- app.js
  |- package.json
复制代码

那咱们怎么打包呢？在 package.json 中配置以下属性：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+ "start": "webpack --config ./config/webpack.common.config.js"
  },
复制代码

好了，咱们试试怎么打包吧，虽然你的 app.js 中什么代码也没有。
在控制台中输入如下代码：

npm run start
复制代码

想必你也看出来了，为何是 “start”，--config选项来指定配置文件。
执行以后，你会发现根目录多出了一个文件夹： dist/js ，其中有一个js文件： bundle.js ，那么至此，咱们已经成功编译打包了一个js文件，即入口文件： app.js 。

使用webpack-merge

咱们将使用一个名为 webpack-merge 的工具。经过“通用”配置，咱们没必要在环境特定(environment-specific)的配置中重复代码。简单来讲就是生产环境不一样，咱们要给的配置也有所不一样，可是能够共用一个共有的配置。

咱们先从安装 webpack-merge 开始：

npm install --save-dev webpack-merge
复制代码

安装结束以后，咱们在 config 这个文件夹下新建两个文件，分别为 webpack.prod.config.js 和 webpack.dev.config.js ，这两个文件分别对应生产和开发两个环境的配置。

如今的目录结构：

webpack-react-scaffold
  |- config
     |- webpack.common.config.js
+ |- webpack.prod.config.js
+ |- webpack.dev.config.js
  |- node_modules
  |- src
     |- app.js
  |- package.json
复制代码

在 webpack.prod.config.js 中输入如下代码：

const merge = require('webpack-merge');
const common = require('./webpack.common.config.js');

module.exports = merge(common, {
  mode: 'production',
});
复制代码

回到咱们以前建立的 app.js 文件，输入代码：

var root =document.getElementById('root');
root.innerHTML = 'hello, webpack!';
复制代码

在根目录下建立一个文件夹名为： public ，再新建一个html文件，名为： index.html ，如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>从零配置webpack4+react脚手架</title>
</head>
<body>
  <div id="root"></div>
  <script src="../dist/js/bundle.js"></script>
</body>
</html>
复制代码

如今的目录结构是这样子（只要不编译打包，要引入的 bundle.js 就没有）：

webpack-react-scaffold
   |- config
      |- webpack.common.config.js
      |- webpack.prod.config.js
      |- webpack.dev.config.js
   |- node_modules
+ |- public
+ |- index.html
   |- src
      |- app.js
   |- package.json
复制代码

打包以前，咱们修改 package.json ：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
- "start": "webpack --config ./config/webpack.common.config.js",
+ "build": "webpack --config ./config/webpack.prod.config.js"
  },
复制代码

好了，接下来咱们编译打包试试吧！控制台执行如下代码：

npm run build
复制代码

咱们能够看到，webpack从新进行了编译，这和执行
webpack --config config/webpack.prod.conf.js 是同样的效果。
如今你能够打开用浏览器 public/index.html ，看看是否是有东西了～～

安装React

在控制台输入如下代码：

npm install --save react react-dom
复制代码

安装完成以后，咱们就能够写react的JSX语法了。

这里为了和react官方脚手架 create-react-app 的目录结构相相似，咱们在 src 文件夹下新建一个js文件， index.js ，用于渲染根组件。

在 index.js 输入如下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root')); 复制代码

并用jsx语法重写 app.js ：

import React from 'react';

function App() {
  return (
    <div className="App">Hello World</div>
  );
}

export default App;
复制代码

对 webpack.common.config.js 文件中的入口进行修改，由于咱们如今要编译打包的应该 index.js ：

const path = require('path');

  module.exports = {
    entry: {
- app: './src/app.js',
+ index: './src/index.js',
    },
    output: {
      filename: 'js/bundle.js',
      path: path.resolve(__dirname, '../dist')
    }
  }
复制代码

如今尝试一下从新运行 npm run build ，会发现打包失败了，为何呢？接着看.....

使用babel 7

为何咱们上面写jsx会打包不了呢，由于webpack根本识别不了jsx语法，那怎么办？使用loader对文件进行预处理。
其中，babel-loader，就是这样一个预处理插件，它加载 ES2015+ 代码，而后使用 Babel 转译为 ES5。那开始配置它吧！

首先安装babel相关的模块：

npm install --save-dev babel-loader @babel/preset-react @babel/preset-env @babel/core
复制代码

**babel-loader：**使用Babel和webpack来转译JavaScript文件。
**@babel/preset-react：**转译react的JSX
**@babel/preset-env：**转译ES2015+的语法
**@babel/core：**babel的核心模块

理论上咱们能够直接在 webpack.common.config.js 中配置"options"，但最好在当前根目录，注意，必定要是根目录！！！新建一个配置文件 .babelrc 配置相关的"presets"：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          // 大于相关浏览器版本无需用到 preset-env
          "edge": 17,
          "firefox": 60,
          "chrome": 67,
          "safari": 11.1
        },
        // 根据代码逻辑中用到的 ES6+语法进行方法的导入，而不是所有导入
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ]
}
复制代码

这里有关bebel的配置可上官网查询文档。

再修改 webpack.common.config.js ，添加以下代码：

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
  },
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, '../dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      }
    ]
  }
}
复制代码

test 规定了做用于以规则中匹配到的后缀结尾的文件， use 便是使用 babel-loader 必须的属性， exclude 告诉咱们不须要去转译"node_modules"这里面的文件。

接下来：

npm run build
复制代码

是否是能打包成功了呢？回到你的html页面，看一下是否打印出了“hello webpack”吧！

咱们再最后确认一下咱们的目录：

webpack-react-scaffold
   |- config
      |- webpack.common.config.js
      |- webpack.prod.config.js
      |- webpack.dev.config.js
   |- node_modules
   |- public
      |- index.html
   |- src
+ |- index.js
      |- app.js
+ |- .babelrc
   |- package.json
复制代码

这一小节就到这里，你会发现有不少功能仍是没有得以实现，好比自动生成html文件，实时刷新页面等，下一节开始咱们会逐步优化咱们的配置！