现在我们编程,在异步上发生了什么挑战。我们必须有一个服务器才能发出Ajax。
webpack-dev-server是一个小型的Node.js Express服务器。是我们搞前端的小服务器,不能用于生产环境,只能用于开发。webpack-dev-server是在webpack基础上,提供了一个小服务器。含有webpack的功能。
$ npm install --save-dev webpack-dev-server
$ npm install -g webpack-dev-server
此时用命令:
$ webpack-dev-server --content-base ./
就可以开启8080端口
但是我们一般这么用:改变webpack.config.js文件,增加一行语句: publicPath:"/dev/",
const path = require('path');
const webpack = require("webpack");
module.exports = {
entry: "./app/app.js",
output: {
path: path.resolve(__dirname, "dist"),
publicPath:"/dev/",
filename: "all.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/ ,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015','react'],
plugins: ["transform-object-rest-spread"]
}
}
}
]
},
watch : true
};
在package.json文件中:
{
"name": "02",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --content-base ./"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"jquery": "^3.2.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"redux": "^3.6.0",
"redux-logger": "^3.0.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
}
此时运行:
$ npm run start
注意webpack和webpack-dev-server的版本的问题