webpack+babel+react环境搭建
webpack+babel+react环境搭建
一、创建项目
先创建一个项目的总文件夹
在项目中创建app和dist两个文件夹（这两个文件夹一个用来存放项目的源文件（app），一个用来存放打包好的文件（dist）——最终项目运行时实际用的文件）
还可以在app中创建component文件夹，用来存放组件
之后初始化项目：
npm init -y
初始化完成后的结构目录：
| 项目名称 |
|---|
| –app |
| ----component |
| –dist |
| –package.json |
| –webpack.config.js |
二、安装webpack
npm install webpack --save
安装完成后，项目目录下会生成一个node_modules的文件夹，用来存放npm插件
三、打开webpack.config.js 文件 并添加配置项目
module.exports = {
context:__dirname+"/app", //源文件目录
entry:{
app:"./index.js" //在源文件目录下去找index.js 文件作为打包的入口文件
},
output:{
path:__dirname+"/dist", //生成的文件存放目录
filename:"[name].bundle.js" //生成的文件 name 表示entry下面的app
}
}
四、让npm 可以运行 webpack --在package.json 文件中 添加一条命令
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"./node_modules/.bin/webpack" //这条命令是新增加的
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^2.2.1"
}
}
在dist文件夹下新建index.html文件，写入测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>首页</title>
</head>
<body>
</body>
<script src="app.bundle.js"></script>
</html>
在index.js文件中写入：
doucment.write("hello world!!!!")
执行npm run dev 命令后 会在dist目录下面生成一个 app.bundle.js 的文件 运行index.html 文件查看效果
五、安装babel来使用es6
注意：
在这里我们需要安装三个插件：babel-loader、babel-core、babel-preset;
其中babel-loader和babel-core之间存在版本的相互要求，需要注意好匹配，这里我选择了loader@7和core@6的组合，而且之前看到很多教程里面都是安装babel-preset-es2015,但是我在安装的时候提示官方不提倡继续使用，而是用最新的babel-preset-env，可以查看官方文档：https://babeljs.io/docs/en/env/
以下为安装指令：
npm install babel-core
npm install babel-loader@7
npm install babel-preset-env
context:__dirname+"/app",
entry:{
app:"./index.js"
},
output:{
path:__dirname+"/dist",
filename:"[name].bundle.js"
},
module:{
rules:[
{
test:/\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: { presets: ["react","env"] }
}],
},
]
}
}
更换为babel-preset-env后只需要将原来填写es2015的地方替换为env即可，官方文档中也有介绍；
六、添加react支持
npm install react react-dom babel-preset-react --save
修改app中index.js文件，写入测试代码：
import React from 'react';
import ReactDOM from 'react-dom';
class IndexComponent extends React.Component{
render(){
return <h1>hello world!!!</h1>
}
}
var oBox = document.getElementById("box");
ReactDOM.render(<IndexComponent/>,oBox)
修改dist中index.html文件，写入测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<div id="box"></div>
</body>
<script src="app.bundle.js"></script>
</html>
可以通过运行npm run dev然后运行index.html来查看结果；
七、添加web服务器支持
最开始安装的webpack还处于本地状态，将来往往会需要服务器支持，两者有些差别
安装 webpack-dev-server：
npm install webpack-dev-server --save
修改package.json文件：
将：
"dev": "./node_modules/.bin/webpack"
修改为：
"dev": "./node_modules/.bin/webpack-dev-server --content-base dist"
注释：这里的dist就是之前创建的用来存放压缩完后文件的文件夹，即放到服务器上最后运行的文件夹；
通过npm run dev 然后在浏览器中输入http://localhost:8080来进行访问；
最后：
这个文档参考了很多教程，之前看了好多各种各样的教程，都有各种各样的问题，这是亲测有效的一次搭建过程，之后应该还要解决打包完之后如何取消use strict的问题，有时候有些js代码不希望use strict，但是通过babel编译之后的代码默认添加上了use strict，这就会出现矛盾，不过应该在这之后的文档里了。