在react中，我们知道使用webpack就是最好的构建工具，那这样的一个简单的开发环境是如何从无到有一步步的搭建起来的呢？
这一篇文章的目的：就是基于node使用webpack搭建基础的开发环境。
1、node的安装
我们使用的webpack是基于nodejs的环境下开发的，可以看看自己的电脑中有没有安装node。打开命令窗口。输入node -v 就可以查看自己的node版本。
如果展示中有类似 V8.1.1 这样的字样，那你的电脑中就安装了node，如果没有安装，请到nodejs中文网安装node。
一般而言，安装了node之后，npm自动集成在node环境中，你的电脑也会自动安装了npm。可以直接使用命令 npm -v 查看npm版本。
2、npm的使用
一个项目的构建，首先从一个空的文件夹开始，做的第一件事，就是使用npm生成package.json文件。
新建你自己的文件夹，我这里的文件夹名为MyWebPackTest。
在你的文件夹的根目录下新建终端窗口。输入命令npm init命令，然后按下enter键，就会生成一系列英文提示，直接默认就好（enter键），没必要自己添加什么。
如果上面的已经完成，那么这时候你会在你的空文件夹下看到一个文件package.json.
3、使用使用命令全局安装webpack。命令如下：
npm install -g webpack
- 1
这句话的意思是我们全局安装了webpack。
//对这个命令的解读。
npm install 是下载命令。
-g是以全局方式下载
webpack是下载的内容。
下载完成后，使用命令webpack -v 查看下载的webpack版本。
4、测试webpack。（看看我们下载的webpack能狗使用吗）
在项目根目录下，新建一个index.html文件。使用script标签引入bundle.js。index.html文件如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script src="bundle.js"></script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
再在根目录下新建一个index.js文件。内容如下所示：
/**
* Created by mapbar_front on 2017/7/10.
*/
document.write("我是中国人");
- 1
- 2
- 3
- 4
这时候，在项目根目录的命令窗口中直接执行如下命令：
webpack index.js bundle.js
- 1
这样，就打包好了一个名字叫bundle.js的文件。
我们会神奇的发现，项目目录多了一个叫bundle.js的文件。
接下来，我们执行我们的index.html文件。就会成功的在网页中打印出一段文字:”我是中国人”。
5、webpack.config.js的使用。
每次在命令行中这样输入命令很不方便。那我们就对webpack进行基本的配置，使得我们更方便的使用。
在项目根目录下新建webpack.config.js。
这个配置文件的基本要素有三点：入口、出口和loader模块。
现在我们暂时配置一个带有入口和出口的模块：
/**
* Created by mapbar_front on 2017/7/10.
*/
module.exports = {
entry: './index.js',
output: {
filename:"./bundle.js"
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
这下我么删除上次生成的bundle.js文件，然后在窗口使用命令webpack，就会自动打包新的bundle.js。
6、loader的使用。
react使用的是基于es6的jsx语法，但是浏览器对es6的支持还不完全，我们就需要把es6语法解析为es5的语法，使得浏览器能够识别和解读。一般我们使用babel解析。通常使用到的模块有babel-core、babel-loader、babel-preset-es2015、babel-preset-react、babel-preset-stage-1。下载命令如下：
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-1
- 1
下载了这些模块，我们就能在package.json文件中的devDependencies中找到对应的模块。
这时候，就可以配置js(x)的loader了。配置如下：
module.exports = {
entry: './index.js',
output: {
filename:"./bundle.js"
},
module:{
loaders:[{
test:/\.js(x)?$/,
exclude:/node_modules/,
loader:"babel-loader",
query:{
presets:['es2015','react','stage-1']
}
}]
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
这样就配置了一个js的loader。
同理，我们需要配置css、图片、less等loader。
这些我们这里不会继续做过多的描述，如何配置可以参考webpack官方文档，在这里我会给一个我自己的webpack.config.js文件。
var webpack = require('webpack');
//import webpack from "webpack";
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080/',
'./src/index.js'
],
output: {
path: 'public',
filename: 'bundle.js'
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE.ENV': "development"
}),
new webpack.HotModuleReplacementPlugin(),
new OpenBrowserPlugin({
url: 'http://localhost:8080'
}),
new webpack.ProvidePlugin({
$: 'jquery'
}),
],
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015',"react","stage-1"]
}
}, {
test: /\.css$/,
loaders: ['style', 'css'],
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}, {
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}]
}
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
相对应的package.json文件如下：
{
"name": "webpack-demos",
"version": "1.0.0",
"description": "a collection of simple demos of Webpack",
"main": "index.js",
"keywords": [
"build",
"demo",
"webpack"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --progress --hot --inline",
"build": "webpack -w"
},
"author": "Ruan Yifeng",
"license": "MIT",
"dependencies": {
"babel-core": "6.x",
"babel-loader": "6.x",
"babel-preset-es2015": "6.x",
"babel-preset-stage-1": "^6.24.1",
"babel-preset-react": "6.x",
"bundle-loader": "^0.5.4",
"css-loader": "0.x",
"file-loader": "0.x",
"history": "^1.17.0",
"html-webpack-plugin": "2.x",
"jquery": "3.x",
"jsx-loader": "~0.13.2",
"open-browser-webpack-plugin": "0.x",
"react": "15.x",
"react-dom": "15.x",
"react-router": "2.x",
"style-loader": "0.x",
"url-loader": "~0.5.6",
"webpack": "1.x",
"webpack-dev-server": "1.x",
"prop-types": "^15.5.8",
"redux": "^3.6.0",
"react-redux": "^5.0.4"
},
"devDependencies": {
"babel-preset-stage-1": "^6.24.1",
"jquery": "^3.2.1",
"prop-types": "^15.5.8",
"react-addons-css-transition-group": "^15.5.2",
"react-redux": "^5.0.4",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"swiper": "^3.4.2"
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
在使用的时候，直接把这两个文件建在项目根目录下，使用命令npm install 就能下载对应的依赖。
7、有时候，我们希望在开发的时候，不手动对webpack进行打包，而让它自动刷新浏览器。这时候可以使用热替换。
在上面的我给出的webpack配置文件中，devServer是初始化一个node服务器。用于动态刷新。
entry和之前的配置有点区别，变成了一个数组，数组的第一项是：’webpack-dev-server/client?http://localhost:8080/‘。
plugins是插件相关，如打开浏览器的插件等等。
这时候。我们可以进行react项目的开发了。
如何开发？参考reactjs语法
学习react+webpack的项目demo的github地址：
https://github.com/liwudi/reactjs_study_es6.git