初学webpack与react

React 2020-05-23

刚接触webpack，在网上看了些入门的教程和资料，在此作下记录。

什么是webpack?

简单说就是模块加载器，本文不作过多的介绍。

安装webpack

首先确保你的机器已经安装了Node.js和npm（安装方式请参考其他相关资料）。
第一步，为你的项目新建一个文件夹，然后输入 npm init，然后填写相关问题。
这样会为你创建了 package.json。
第二步，接下来我们安装 Webpack，我们要把它安装在本地，输入 npm i webpack --save-dev
到此就完成了webpack的安装了。

项目目录

  • /app
    main.js
    component.js

  • /build
    bundle.js (自动创建)
    index.html

package.json
webpack.config.js

我们会使用 Webpack 在我们的 /app 里来自动创建 bundle.js 。接下来，我们来设置 webpack.config.js。

设置webpack

webpack.config.js文件设置

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname,'app/main.js'),output: {
        path: path.resolve(__dirname,'build'),filename: 'bundle.js',},};

按上述项目目录时，__dirname可写为''

运行一个HelloWorld demo

经过上述的配置，我们已经有了一个最简单的配置了，下面我们用它来编译一个简单的Hello World。

  • app/component.js

'use strict';

module.exports = function () {
    var element = document.createElement('h1');

    element.innerHTML = 'Hello world';

    return element;
};

  • app/main.js

'use strict';
var component = require('./component.js');

document.body.appendChild(component());

然后在你的命令行运行 webpack，接着你可以看到应用会开始编译，一个 bundle.js 文件会这样出现在 /build 文件夹下。

  • build/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

我们在index.html中引入刚才编译好的bundle.js，我们可以打开 index.html，在浏览器中预览一下效果。

设置 package.json scripts

npm是一个非常好用的用来编译的指令，通过 npm 你可以不用去担心项目中使用了什么技术，你只要调用这个指令就可以了，只要你在 package.json 中设置 scripts 的值就可以了。
接下来我们把编译通过 npm run build 来执行：
把下面的内容添加到 package.json中。

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

现在你可以输入 npm run build 就可以编译了。

开始工作流

每次编译都需要输入npm run build，想必大家都不愿意，下面我们使用webpack-dev-server在每次文件改变后自动执行编译。

设置webpack-dev-server

第一步需要安装webpack-dev-server，在命令行中输入 npm i webpack-dev-server --save，安装完成后我们需要调整package.json的scripts 部分去包含这个指令。

  • package.json

{
  "scripts": {
    "build": "webpack","dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  }
}

配置完成后，我们可以在命令行里运行 npm run dev ，运行的时候他会执行 dev 属性里的值。编译完成后，我们可以访问"http://localhost:8080" 看到效果。
上述配置顶的意义：
1、webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
3、devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
4、progress - 显示合并代码进度
5、colors - 命令行中显示颜色！
6、content-base build - 指向设置的输出目录

让浏览器自动刷新

当运行 webpack-dev-server 的时候，它会监听你的文件修改。当项目重新合并之后，会通知浏览器刷新。为了能够触发这样的行为，你需要把你的 index.html 放到 build/ 文件夹下，然后做这样的修改：

  • build/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
    <script src="bundle.js"></script>
  </body>
</html>

我们需要增加一个脚本当发生改动的时候去自动刷新应用，你需要在配置中增加一个入口点。

var path = require('path');

module.exports = {
    entry: ['webpack/hot/dev-server',path.resolve(__dirname,'app/main.js')],};

按上述目录时，__dirname可设置为''

就是这样！现在你的应用就可以在文件修改之后自动刷新了。

模块

Webpack 允许你使用不同的模块类型，但是 “底层”必须使用同一种实现。所有的模块可以直接在盒外运行。

ES6 模块

import MyModule from './MyModule.js';

CommonJS

var MyModule = require('./MyModule.js');

AMD

define(['./MyModule.js'],function (MyModule) {
});

理解文件路径

一个模块需要用它的文件路径来加载，看一下下面的这个结构：

--app
------modules
-----------MyModule.js
------main.js (entry point)
------utils.js

打开 main.js 然后可以通过下面两种方式引入 app/modules/MyModule.js

  • app/main.js

// ES6
import MyModule from './modules/MyModule.js';

// CommonJS
var MyModule = require('./modules/MyModule.js');

最开始的 ./ 是 “相对当前文件路径”
让我们打开 MyModule.js 然后引入 app/utils：

  • app/modules/MyModule.js

// ES6 相对路径
import utils from './../utils.js';

// ES6 绝对路径
import utils from '/utils.js';

// CommonJS 相对路径
var utils = require('./../utils.js');

// CommonJS 绝对路径
var utils = require('/utils.js');

相对路径是相对当前目录。绝对路径是相对入口文件，这个案例中是 main.js。

安装ReactJs

在命令行在输入npm install react --save

在代码中使用 ReactJS

  • component.jsx

import React from 'react';

export default class Hello extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

  • main.js

import React from 'react';
import Hello from './component.jsx';

main();

function main() {
    React.render(<Hello />,document.getElementById('app'));
}

  • build/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div id="app"></div>

    <script src="http://localhost:8080/webpack-dev-server.js"></script>
    <script src="bundle.js"></script>
  </body>
</html>

转换 JSX

为了能够使用 JSX 语法，你需要用 Webpack 来转码你的 JavaScript，这是加载器的工作，我们可以使用一个很好用也有很多功能的 Babel。

npm install babel-loader --save-dev

现在我们需要去配置 Webpack 来使用加载器。

  • webpack.config.js

var path = require('path');
var config = {
  entry: ['webpack/hot/dev-server',path.resolve('',output: {
    path: path.resolve(__dirname,filename: 'bundle.js'
  },module: {
    loaders: [{
      test: /\.jsx?$/,// 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
      loader: 'babel' // 加载模块 "babel" 是 "babel-loader" 的缩写
    }]
  }
};

module.exports = config;

在命令行中运行 npm run dev，然后刷新页面就可以看到修改。

优化重合并

你可能注意到在引入 React JS 到你的项目之后，给你的应用重新合并会花费太多的时间。在开发环境中，最理想的是编译最多 200 到 800 毫秒的速度，取决于你在开发的应用。
在开发环境中使用压缩文件
为了不让 Webpack 去遍历 React JS 及其依赖，你可以在开发中重写它的行为。

  • webpack.config.js

var path = require('path');
var node_modules = path.resolve(__dirname,'node_modules');
var pathToReact = path.resolve(node_modules,'react/dist/react.min.js');

config = {
    entry: ['webpack/hot/dev-server',resolve: {
        alias: {
          'react': pathToReact
        }
    },module: {
        loaders: [{
            test: /\.jsx?$/,loader: 'babel'
        }],noParse: [pathToReact]
    }    
};

module.exports = config;

我们在配置中做了两件事：
1、不管 “React” 是什么时候在代码中引入的，它会去匹配压缩后的 React JS 文件取代去 node_modules 中遍历。
2、不管 Webpack 什么时候试图是解析压缩文件，我们阻止它，告诉它那不是必须的。

加载CSS

Webpack允许像加载任何代码一样加载 CSS。你可以选择你所需要的方式，但是你可以为每个组件把所有你的 CSS 加载到入口主文件中来做任何事情。
加载 CSS 需要 css-loader 和 style-loader，他们做两件不同的事情，css-loader会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
安装加载器
在命令行中输入npm install css-loader style-loader --save-dev
安装完毕后可以将加载器配置到 Webpack.config.js 文件中。

  • webpack.config.js

var path = require('path');
var config = {
  entry: ['webpack/hot/dev-server',module: {
    loaders: [{
      test: /\.jsx$/,loader: 'jsx'
    },{
      test: /\.css$/,// Only .css files
      loader: 'style!css' // Run both loaders
    }]
  }
};

module.exports = config;

加载 CSS 文件
加载一个 CSS 文件就和加载其他文件一样：

  • main.js

import './main.css';
// Other code

  • Component.jsx

import './Component.css';
import React from 'react';

export default React.createClass({
  render: function () {
    return <h1>Hello world!</h1>
  }
});

将所有CSS合并成一个
在你的主入口文件中个，比如 app/main.js 你可以为整个项目加载所有的 CSS：

  • app/main.js

import './project-styles.css';
// 其他 JS 代码

CSS 就完全包含在合并的应用中，再也不需要重新下载。
如果你想发挥应用中多重入口文件的优势，你可以在每个入口点包含各自的 CSS：

  • app/main.js

import './style.css';
// 其他 JS 代码

  • app/entryA/main.js

import './style.css';
// 其他 JS 代码

  • app/entryB/main.js

import './style.css';
// 其他 JS 代码

你把你的模块用文件夹分离，每个文件夹有各自的 CSS 和 JavaScript 文件。再次，当应用发布的时候，导入的 CSS 已经加载到每个入口文件中。
具体的组件
你可以根据这个策略为每个组件创建 CSS 文件，可以让组件名和 CSS 中的 class 使用一个命名空间，来避免一个组件中的一些 class 干扰到另外一些组件的 class

  • app/components/MyComponent.css

.MyComponent-wrapper {
  background-color: #EEE;
}

  • app/components/MyComponent.jsx

import './MyComponent.css';
import React from 'react';

export default React.createClass({
  render: function () {
    return (
      <div className="MyComponent-wrapper">
        <h1>Hello world</h1>
      </div>
    )
  }
});

使用内联样式取代 CSS 文件
在 “React Native” 中你不再需要使用任何 CSS 文件，你只需要使用 style 属性，可以把你的 CSS 定义成一个对象，那样就可以根据你的项目重新来考略你的 CSS 策略。

  • app/components/MyComponent.jsx

import React from 'react';

var style = {
  backgroundColor: '#EEE'
};

export default React.createClass({
  render: function () {
    return (
      <div style={style}>
        <h1>Hello world</h1>
      </div>
    )
  }
});

相关文章

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接...
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc ...