您的位置：首页 > Web前端 > React

学习建立基于react,webpack模板项目

2017-06-08 19:36 781 查看

我是一个react的初学者，在学习的过程中遇到了模板搭建问题，想把自己遇到的问题记录下来，顺便加深印象，有不对的地方请指正。

学习的过程中，我主要感谢两个人的博客：

http://www.wukai.me/2016/09/14/create-a-react-webpack-es6-project/
http://www.jianshu.com/p/42e11515c10f

这两个人的博客写的都非常好，感兴趣的同学可以去看看。

由于我之前没有接触过webpack,所以先学习了一下博客2，然后在按照博客1进行的实现。

什么是webpack?

通俗说是一个模块打包机。它分析项目结构，找到JavaScript模块以及一些不能直接运行的拓展语言，然后将其打包合适的格式以供浏览器使用。它的工作方式是：把项目当做一个整体，通过一个给定的文件，从改文件开始找到项目的所有依赖文件，使用loaders处理他们，最后打包为一个浏览器可识别的js文件。

项目结构

-src

　　-index.js

　　-App.js

-.babelrc

-index.html

-package.json

-server.js

-webpack.config.js

项目步骤

环境搭建

需要安装node.js，因为后续要用到npm

初始化项目

首先创建一个空的文件夹，名字自己拟定。在该文件中，同时按shift和鼠标右键进入当前的命令行,输入：

npm init //按照提示输入项目的基本信息
//或者是输入
npm init -y //按照默认方式设置基本信息
//作用是：初始化一个项目，此时多出来一个package.json文件

package.json 文件的作用是：

相当于你本地项目的一个文档说明
允许你制定你项目中所使用的node包版本
偏于给其他人共享

将部分package.json的内容列举如下：

{
"name": "react-webpack-babel",//名称项目，全部小写，不能有空格
"version": "1.0.0", // 项目版本号，最好遵守GNU版本号管理
"description": "",
"main": "index.js",//目录中启动文件名称（入口文件），一般都是index.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"//一般默认为一个test空文件夹，用作写测试代码
},
"keywords": [],//项目的关键词
"author": "",
"license": "ISC",
"devDependencies": { // 开发或者测试时，依赖的包
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"react-hot-loader": "^1.3.1",
"webpack": "^3.0.0-rc.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": { //正式使用时，依赖的包
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}

webpack 安装

npm install webpack --save-dev  //作用：给项目安装webpack

此时会发现多出来一个 node_modules 文件夹，这里存放着项目所依赖的npm包的地方

--save-dev :表示将会把webpack的名称写入package.json,并且会写入到“devDenpendencies”项中

--save:表示会写入的是“dependencies”项

webpack 测试

在项目文件夹下新建index.js文件，里面写入：

console.log("this is a javascript file for test");

　　如果webpack是非全局安装，则：

node_modules/.bin/webpack  index.js  bundle.js //

将index.js文件打包成为bundle.js的文件。后一个参数是你想生成的文件名称

　　如果想webpack全局安装，则：

npm install webpack -g //全局安装

　　全局安装后，运行的命令如下：

webpack index.js bundle.js //意思是：将index.js文件打包成为bundle.js的文件,后一个参数是你想生成的文件名称

　　运行后会发现多了一个bundle.js文件

node bundle.js

this is a javascript file for test.//输出结果

　　新建一个html文件，引入bundle.js

// index.html
<!DOCTYPE html>
<html>
<head>
<title>react webpack boilerplate</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

　　打开 index.html ,可以在浏览器的控制台看到输出结果

webpack 的配置文件

新建 webpack.config.js文件，输入如下：

var path = require('path');
var webpack = require('webpack');

module.exports = {
// webpack 进行打包的入口文件，这里 webpack 从根目录下的 index.js 开始进行打包
entry: [
'./index'
],
// webpack 打包后的输出文件的路径
output: {
path: path.join(__dirname, 'dist'), // 文件放至当前路径下的 dist 文件夹
filename: 'bundle.js',  // 将打包后的输出文件命名为 bundle.js
}
}

　　将HTML文件的引用路径改为：

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

　再将webpack 安装在本地：

npm install webpack --save-dev

　现在运行

npm install index.js bundle.js

刚开始会报错，但是你会发现生成了dist文件，在执行一次该命令，可以实现其效果。

如果有两个js文件是如何处理：

新建 a.js

var a = 1;
module.exports = a;

　　在index.js中加入下列语句：

var a = require("./a.js")//“./”表示当前目录
console.log("a = ", a);

　　再输入： npm index.js bundle.js 即可。

现在我们不需要在index.html中用script 标签分别来引入 index.js 和 a.js两个文件了，直接引入 bundle.js 这一个就行了。这种方式很适合当需要引用很多的资源时，简单方便。

安装 web-dev-server

npm i webpack-dev-server --save-dev

　　新建server.js文件

// server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');

var server = new WebpackDevServer(webpack(config)); //创建了一个webpack dev server,这是一个
//node.js express 服务器 

server.listen(3000, 'localhost', function(err, result) {
if (err) {
return console.log(err);
}
return console.log('listening at locahost:3000...');
})

　　在webpack.config.js的output这一项中加上：

publicPath :"/static"

　　server.js修改为：

var server = new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath
});

把 index.html 中对bundle.js 的引用路径改为： "./static/bundle.js"

运行 node server.js 在浏览器中输入 http://localhost:3000查看效果

在package.json中加上下面这一项

"scripts": {
"start": "node server.js"
},//效果是： 可以用 npm start 来代替上面的 node server.js  这两者是等价的    有的教程里 写成 "start":"webpack",相当于把npm的start命令指向webpack命令

　　Babel

Babel 是转码器，可以将ES6代码转化为ES5代码。从而在现有的环境中执行。（由于ES6中有些语法还没有得到广泛支持）

配置文件

Babel 的配置文件是 .babelrc，存放在项目的根目录下。使用Babel之前，首先是配置这个文件。

该文件是用来设置转码规则和插件的

在项目中，需要安装这样几个package

npm install --save-dev  babel-loader babel-core
npm install  babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev
npm install babel-cli --save-dev

　　在 .babelrc中写入如下内容：

{
”presets”:["es2015", "stage-0"] //presets 字段设定转码规则，
 "plugins":[]
}

　　webpack.config.js 文件进行修改：

module: {
loaders: [{
test: /\.js$/,
loaders: ['babel-loader'],  //注意：很多教程写的是 babel ，但是新版的webpack要求输入完整，不能丢弃loader
include: path.join(__dirname, 'src')
}]
},
devServer: {
stats: 'errors-only'
}

安装React

npm install react react-dom --save  // 安装react的package
npm install babel-preset-react // 为了让babel对react进行处理

　　在 .babelrc 文件中加入： "presets":["es2015","stage-0","react"]

新建一个组件：

在index.html 中加上这样的一个元素：

<div id="app"></div> //在此部分进行渲染

　　新建一个src文件夹，然后在src文件夹下新建两个文件 App.js index.js

./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

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

./src/App.js

import React, { Component } from 'react';
export default class App extends Component {
  render() {
    console.log('%c%s', 'font-size:20px;color:red', 'Something happened.');

    return (
      <div>This is a react boilerplate project with webpack and es6.</div>
    );
  };
}

可以用 npm start 查看效果

安装 react-hot-loader

目的是：实现浏览器自动刷新的效果。

安装 react-hot-loader

npm install react-hot-loader --save-dev

　　在server.js 中加一行

var server = new WebpackDevServer(webpack(config), {
stats: config.devServer.stats,
hot: true,
publicPath: config.output.publicPath
});

　　webpack.config.js 修改如下：

entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],

loaders: [{
test: /\.js$/,
loaders: ['react-hot-loader', 'babel'-loader], //注意加loader，还要注意顺序
include: path.join(__dirname, 'src')
}]

plugins:[
new webpack.HotModuleReplacementPlugin()
]

到此模板项目完成

输入 npm start, 运行效果为

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航