webpack摸索（一）webpack-dev-server热模块替换

攻城狮世鹏技术 2022年11月12日

0 收藏 465 点赞 3,435 浏览 1074 个字

webpack-dev-server 是生成在内存中的

本地开发：

index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body>hello, webpack<script type="text/javascript" src="http://127.0.0.1:8080/bundle.js"></script></body></html>

webpack.config.js

const path = require('path');const webpack = require('webpack');module.exports = {    entry: [        'webpack-dev-server/client?http://127.0.0.1:8080', // 资源服务器地址        'webpack/hot/only-dev-server',        './app/main.js'    ],    output: {        publicPath:"http://127.0.0.1:8080/",        path:'./',        filename:'bundle.js'    },    devServer:{        historyApiFallback:true,        hot:true,        inline:true,        progress:true,    },    plugins: [        new webpack.DefinePlugin({            'process.env.NODE.ENV': 'development' //设置环境变量为开发环境        }),        new webpack.HotModuleReplacementPlugin()    ]};

package.json{ “name”: “webpack”,

"version": "1.0.0",  "description": "",  "main": "webpack.config.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",
　　 "start": "webpack-dev-server --inline --hot"
  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "path": "^0.12.7",    "webpack": "^1.14.0",    "webpack-dev-server": "^1.16.2"  }}

命令行执行：

webpack-dev-server –inline