webpack是基于模块化开发的一个工程化开发工具，因此在webpack中，任何资源（图片、css等等）都可以作为模块加载进来（当然加载的时候需要一些load加载机）。
这个工具的模块化规范基于commojs的，也支持amd，cmd规范，但是建议我们使用commomjs规范，因此我们可以像书写node一样书写项目。
Webpack是由react推动的（react文件都是由webpack编译的），因此react相关的demo很多都是基于webpack实现的，所以对于react的相关处理插件，webpack是最丰富的。当然gulp插件也是可以处理react的。
我是依赖webpack实现一个简单的react服务。
在安装webpack之前，我们首先建立一个文件夹并进入
mkdir webpack-react
cd webpack-react
然后我们进行初始化
npm init -y //初始化的时候有很多项目 -y 是都选择默认项
生成package.json之后，安装webpack
npm install --save-dev webpack // --save-dev是生产环境需要
配置webpack.config.js
在根目录建立webpack.config.js文件，要配置webpack的入口和出口
var path =require('path');
module.exports = {
mode: 'production',
//入口文件
entry:'./app/index.js',
//出口文件
output:{
filename:'index.js', //出口文件名字
path:path.resolve(__dirname,'dist'), //出口文件目录
},
}
新建index.html文件
在根目录建立index.html文件，引入webpack出口的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react全家桶-Harry</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/index.js"></script>
</body>
</html>
进行webpack打包
以上这些操作，我们就已经配置了一个简单的webpack，我们可以运行一下，在webpack的入口文件里面写
function component(){
var element = document.createElement('div');
element.innerHTML = ('Hello Harry');
return element;
}
document.body.appendChild(component());
这时候我们可以进行打包，在scripts属性中加入build命令
"scripts":{"build":"webpack"},
我们在命令行输入npm run build，就可以看到打包结果。我们通过浏览器打开这个index.html文件，应该就可以看到Hello Harry这几个字。
开发服务器配置
现在很少有这种让自己去浏览器打开html的，一般都是启动一个node服务器，我们也只用简单的配置一下，webpack就可以做到。
在命令行安装webpack-dev-server
npm install --save-dev webpack-dev-server
安装完之后，修改webpack.config.js文件
var path =require('path');
module.exports = {
mode: 'production',
//入口文件
entry:'./app/index.js',
//出口文件
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
},
devServer:{
contentBase:'./',
host:'localhost', //IP
compress:true, //是否压缩
port:1717 //端口
}
}
配置好之后再去修改package.json文件
"scripts": {
"build": "webpack",
"server": "webpack-dev-server --open"
},
--open的意思是打开浏览器的意思，配置完之后我们就可以在命令行输入
npm run server
自动刷新浏览器
现在有很多框架，都是热更新，当然这也很简单，webpack配置一下就好啦，我们在出口处添加
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist'),
publicPath:'temp/'
},
html文件中引入路径换成
<script src="./temp/index.js"></script>
我们再启动一下npm run server就好啦。
看到现在我们都没有用到react，下来我们配置一下react的环境，配置react的环境需要Babel和babel-loader，一般我们还需要支持es2015和React，所以要安装4个包
npm install --save-dev babel-core babel-preset-es2015 babel-preset-react //空格隔开 是安装多个包
npm install -save-dev babel-loader@7.0.0 //为什么分开安装，我一起安装的时候，安装完运行时报错啦，安装的babel-core是6版本的，babel-loader是8版本的，报错啦说6版本的babel-core不支持8版本的babel-loader，所以我们在这里指定安装版本7.0.0
安装完我们可以看到package.json里面多了这几个包
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
配置module
在安装完之后，再到webpack.config.js中配置module，也就是配置我们loader，我们的配置项，里面写
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loaders:"babel-loader",
query:{
presets:['es2015','react']
}
}
]
}
编写React
下来我们就可以编写react啦，在编写react之前，我们要安装两个包React和React-dom
npm install --save react react-dom
安装完之后我们就可以写啦，把之前app/index.js文件，改成react代码
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello Harry</div>,
document.getElementById("app")
);
我们只要运行一下npm run server
OK啦，一个基于webpack简单的react服务器就搭起来啦。
网友评论