Need help with build-a-hn-front-page?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

theJian
409 Stars 101 Forks 23 Commits 5 Opened issues

Description

Learn React & Webpack by building a hacker news front page

Services available

!
?

Need anything else?

Contributors list

Learn React & Webpack by building the Hacker News front page

这是一篇给初学者的教程, 在这篇教程中我们将通过构建一个 Hacker News 的前端页面来学习 ReactWebpack. 它不会覆盖所有的技术细节, 因此它不会使一个初学者变成大师, 但希望能给初学者一个大致印象.

注意: 这篇文章已经有部分过时,需要等待更新.文章写成时 webpack 版本使用的是 1.x,现在 webpack 默认安装 2.x.按照本篇的配置 webpack 将会报错,~~教程更新已在计划中~~

准备工作

  • 安装 webpack

在此之前你应该已经安装了 node.js.

sh
  npm install webpack -g
参数
-g
表示我们将全局(global)安装 webpack, 这样你就能使用
webpack
命令了.

webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上

sh
  npm install webpack-dev-server -g
  • webpack 配置文件

webpack 使用一个名为

webpack.config.js
的配置文件, 现在在你的项目根目录下创建该文件. 我们假设我们的工程有一个入口文件
app.js
, 该文件位于
app/
目录下, 并且希望 webpack 将它打包输出为
build/
目录下的
bundle.js
文件.
webpack.config.js
配置如下:
  var path = require('path');

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

现在让我们测试一下, 创建

app/app.js
文件, 填入一下内容:
js
  document.write('It works');
创建
build/index.html
, 填入以下内容:
html


<meta charset="UTF-8">
<title>Hacker News Front Page</title>


<script src="./bundle.js"></script>  


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.