23、webpack-dev-server

现在我们编程,在异步上发生了什么挑战。我们必须有一个服务器才能发出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的版本的问题

猜你喜欢

转载自blog.csdn.net/sinat_36414515/article/details/81479211