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

来源：互联网发布：淘宝的软件靠谱么编辑：程序博客网时间：2024/06/09 14:31

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 babel-preset-stage-1 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: {    // loaders 则是放欲使用的 loaders，在这边是使用 babel-loader 将所有 .js（这边用到正则式）相关档案（排除了 npm 安装的套件位置 node_modules）转译成浏览器可以阅读的 JavaScript。preset 则是使用的 babel 转译规则，这边使用 react、es2015。若是已经单独使用 .babelrc 作为 presets 设定的话，则可以省略 query    loaders: [      {        test: /\.js$/,        exclude: /node_modules/,        loader: 'babel-loader',        query: {          presets: ['es2015', 'react'],        },      },    ],  },  // devServer 则是 webpack-dev-server 设定  devServer: {    inline: true,    port: 8008,  },  // plugins 放置所使用的外挂  plugins: [HTMLWebpackPluginConfig],};

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! 了

阅读全文

0 0