本文介绍了从零开始搭建React项目的过程，包括初始化、添加模板文件、配置Webpack、处理CSS样式、加载图片资源、配置ESLint等步骤。通过这个最简单的Webpack配置，你可以更好地理解React项目的构建流程。
前言
搭一个脚手架真不是一件容易的事，之前为了学习webpack是怎么配置的选择自己搭建开发环境，折腾了好几天总算对入口文件、打包输出、JSX, es6编译成es5、css加载、压缩代码等这些基础的东西有了一个大体的了解。后来有一次组内分享技术，我作死的选择了webpack，为了看起来高大上又去折腾它的按需加载、怎样处理第三方插件、拆分CSS文件、利用Happypack实现多进程打包等等。彻底把自己搞晕了。再后来接手了一个紧急的项目，实在来不及去折腾webpack了，就选择使用react官方推荐的脚手架create-react-app，这个脚手架确实搭的非常完善，几乎不需要我们修改配置，我也研究了一下它的配置，准备从零开始搭建一个react+webpack的开发环境，配置从简单到复杂，由于内容较多，我将分为几篇文章讲述，这是第一篇。
另外，热更新我单独写成一篇文章了，当你修改一次代码就需要手动启动服务器，然后你烦了的时候，你可以先去把热更新配置好再回来继续：开始一个React项目(二) 彻底弄懂webpack-dev-server的热更新
------------------------- start 2017/12/25更 --------------------------
Yarn自称是比npm快十倍的包管理工具，并且还有一些很赞的特性，应该是2017年前端的一个惊喜，根据我的亲身体验，真的是快到飞起，所以强烈建议各位小伙伴也用起来吧！使用方式很简单，用你的npm 安装它：
npm install yarn -g
然后切换为淘宝源你才能感受到速度：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
好了，真的很简单，它的命令与npm几乎一样：
- 初始化：
yarn init- 安装一个包：
yarn add 包名- 更新一个包：
yarn upgrade 包名- 删除一个包：
yarn remove 包名- 安装所有包：
yarn或者yarn install
Yarn是没有全局安装的，所以安装还是用npm。
另外，Yarn的包依赖也是写在package.json文件里的，所以你可以在已经使用npm的项目里使用Yarn。
我在配置这个项目的时候用的是npm，因为我懒所以我就不改啦。
------------------------- end 2017/12/25更 --------------------------
初始化
先贴出项目结构
my-app/
|
--- README.md
--- package.json
--- webpack.config.js
--- public/
|
--- index.html（模板文件）
--- favicon.ico（网站图标）
--- src/（项目文件都在这里）
|
--- index.js（入口文件）
--- pages/ （页面）
--- components/（抽离的公用组件）
--- css/
--- js/
--- images/
一开始最重要的需要你建好的文件是public/index.html和src/index.js。
新建一个项目，使用npm init初始化生成一个package.json文件。可以全部回车，后面反正是可以修改的。
安装webpack: npm install webpack --save-dev
全局安装： npm install webpack -g(全局安装以后才可以直接在命令行使用webpack)
一个最简单的webpack.config.js文件可以只有entry(入口文件)和output(打包输出路径)
新建webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', //相对路径
output: {
path: path.resolve(__dirname, 'build'), //打包文件的输出路径
filename: 'bundle.js' //打包文件名
}
}
新建入口文件 src/index.js
function hello() {
console.log('hello world');
}
好了这就够了，我们已经可以运行这个项目了，打开命令窗口试一下：webpack
编译成功了，项目根目录下已经生成好build/bundle.js文件了，bundle.js文件前面的几十行代码其实就是webpack对怎么加载文件，怎么处理文件依赖做的一个声明。
我们可以将启动wepback的命令写到package.json中并添加一些有用的参数：
package.json
"scripts": {
"start": "webpack --progress --watch --hot"
},
progress是显示打包进程，watch是监听文件变化，hot是启动热加载，更多命令行参数详见：webpack cli
以后只需要执行npm start就可以了。
添加模板文件index.html
配置react项目最重要的两个文件是入口文件（这里是src/index.js）和html模板文件(这里是public/index.html)，入口文件是整个项目开始运行的地方，模板文件是构建DOM树的地方，相信有一部分小伙伴在网上看到的教程是直接在打包路径build里面建一个index.html，然后手动或者使用html-webpack-plugin将打包后的js引入，这样存在一个问题是build本身是打包路径，而这个路径的所有文件都不应该是我们手动去添加的，甚至包括这个文件夹也不是我们事先建好的。所以最好是按照create-react-app的方式，将这类不需要被webpack编译的文件放到public路径下。
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
现在要让webpack知道这就是我们的html入口文件，并且我们不需要手动引入打包后的js文件，需要安装html-webpack-plugin:
npm install html-webpack-plugin --save-dev
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
mod
最低0.47元/天 解锁文章
扫一扫
775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
