初学webpack与react

时间 2019-11-08

标签初学 webpack react 栏目 React 繁體版

原文原文链接

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

什么是webpack?

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

安装webpack

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

项目目录

/app
main.js
component.jsreact
/build
bundle.js (自动建立)
index.htmlwebpack

package.json
webpack.config.jsweb

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

设置webpack

webpack.config.js文件设置json

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" 看到效果。
上述配置顶的意义：
一、webpack-dev-server - 在 localhost:8080 创建一个 Web 服务器
三、devtool eval - 为你的代码建立源地址。当有任何报错的时候可让你更加精确地定位到文件和行号
四、progress - 显示合并代码进度
五、colors - 命令行中显示颜色！
六、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')],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.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('', 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    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', path.resolve(__dirname, 'app/main.js')],
    resolve: {
        alias: {
          'react': pathToReact
        }
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel'
        }],
        noParse: [pathToReact]
    }    
};

module.exports = config;

咱们在配置中作了两件事：
一、无论 “React” 是何时在代码中引入的，它会去匹配压缩后的 React JS 文件取代去 node_modules 中遍历。
二、无论 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', path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  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>
    )
  }
});

1. React+ES6+Less+Bootstrap----webpack初探
2. 初学webpack
3. webpack初学
4. Webpack学习-Webpack初识
5. webpack初学者（1）
6. react初学
7. React 初学
8. 初学react
9. react 初学
10. webpack学习（五）—webpack+react+es6（第1篇）
更多相关文章...
• XSL-FO 与 XSLT - XSL-FO 教程
• PHP - AJAX 与 PHP - PHP教程
• 适用于PHP初学者的学习线路和建议
• Tomcat学习笔记（史上最全tomcat学习笔记）