Hello World 实例来介绍如何用 Webpack 设置 React 开发环境

最新推荐文章于 2022-10-07 20:16:32 发布

maomao_wei_4023273

最新推荐文章于 2022-10-07 20:16:32 发布

阅读量316

点赞数

分类专栏： react

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.依据你的作业系统安装 Node 和 NPM（目前版本的 Node 都会内建 NPM）

2.透过 NPM 安装 Webpack、webpack loader、webpack-dev-server// 按指示初始化 NPM 设定档 package.json

$ npm init 
// --save-dev 是可以让你将安装套件的名称和版本资讯存放到 package.json，方便日后使用
$ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react html-webpack-plugin webpack webpack-dev-server

3.在根目录设定 webpack.config.js

// 这边使用 HtmlWebpackPlugin，将 bundle 好的 <script> 插入到 body。${__dirname} 为 ES6 语法对应到 __dirname  
const HtmlWebpackPlugin = require('html-webpack-plugin');

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: `${__dirname}/app/index.html`,
  filename: 'index.html',
  inject: 'body',
});
 
module.exports = {
  // 档案起始点从 entry 进入，因为是阵列所以也可以是多个档案
  entry: [
    './app/index.js',
  ],
  // output 是放入产生出来的结果的相关参数
  output: {
    path: `${__dirname}/dist`,
    filename: 'index_bundle.js',
  },
  module: {
  }}

4. 在根目录设定 .babelrc

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

5. 安装 react 和 react-dom

$ npm install --save react react-dom

6.撰写 Component（记得把 index.html 以及 index.js 放到 app 资料夹底下喔！）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>React Setup</title>
 <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
 <!-- 欲插入 React Component 的位置 -->
 <div id="app"></div>
</body>
</html>

index.js

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

在终端机使用 webpack 进行成果展示，webpack 相关指令：
- webpack：会在开发模式下开始一次性的建置
- webpack -p：会建置 production 的程式码
- webpack --watch：会监听程式码的修改，当储存时有异动时会更新档案
- webpack -d：加入 source maps 档案
- webpack --progress --colors：加上处理进度与颜色
如果不想每次都打一长串的指令码的话可以使用 package.json 中的 scripts 设定
```
"scripts": {
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}
```
然后在终端机执行：
```
$ npm run dev
```

当我们此时我们可以打开浏览器输入 http://localhost:8008 ，就可以看到 Hello, world! 了

maomao_wei_4023273

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Hello World 实例来介绍如何用 Webpack 设置 React 开发环境

1.依据你的作业系统安装 Node 和 NPM（目前版本的 Node 都会内建 NPM）2.透过 NPM 安装 Webpack、webpack loader、webpack-dev-server// 按指示初始化 NPM 设定档 package.json$ npm init // --save-dev 是可以让你将安装套件的名称和版本资讯存放到 package.json，方便
复制链接

扫一扫

专栏目录