之前在开发中一直使用gulp同步刷新，简单方便：），后来在学习react过程中接触到webpack的热更新，开始转移到webpack平台；
自己简单构建了一个webpack+react环境
操作步骤：
1:、首先安装完node后，若安装速度太慢，可以使用淘宝镜像，接下来安装webpack，
npm config set registry"http://registry.npm.taobao.org"
npm install webpack-g
2、接下来使用 npm init 命令，初始化，package.json 文件
npm init
3、接下来开始添加依赖包及插件
安装webpack和react相关包
npm install webpack react react-dom react-hot-loader jsx-loader html-webpack-plugin --save-dev
安装babel插件,用于编译和转化,若缺少这几个加载器，es2015语法就会报错。
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react
babel-preset-stage-0 --save-dev
安装自动刷新热更新服务
npm install webpack-dev-server--save-dev
安装自动生成 HTML 文件插件
HtmlWebpackPlugin = require('html-webpack-plugin')
在package.json文件中为scripts添加服务命令,以下是完整pagkage.json文件，完整代码可以查看这里github.com（其中webpack.production.js用于生产打包，webpack.config.js用于开发）
{
"name": "cobby",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.production.js",
"start": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"html-webpack-plugin": "^2.28.0",
"jsx-loader": "^0.13.2",
"open-browser-webpack-plugin": "0.0.5",
"path": "^0.12.7",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^1.3.1",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}}
webpack.config.js文件配置如下
var path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, './src/js/root.jsx')
],
output: {
path: path.resolve(__dirname, './__build__'),
filename: 'bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}}]},
resolve: {
extensions: [ '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new webpack.HotModuleReplacementPlugin(),
new OpenBrowserPlugin({ url: 'http://localhost:8080' })
]};
npm run start 开发命令
npm run build 打包命令
运行 npm run start 后会自动自动打开 http://localhost:8080
网友评论