前端开发过程中，静态页面直接双击HTML文件就能在浏览器打开，有时候我们很希望可以用localhost启动，在局域网内可以直接用手机或者是别的电脑访问。
如果你用的是框架脚手架或者你是webpack大神就不用往下看了。今天分享的只是最简便用webpack-dev-server快速localhost访问静态资源。
Node环境一定要有，这个我就不说了。新建一个文件夹，注意，这边文件夹最好不要中文，不然会报错。然后在这个文件夹里面用命令行打开：
初始化：npm init -y(-y少了询问步骤)，会自动生成package.json；
下载依赖：npm install webpack webpack-cli webpack-dev-derver -D(-D是开发时依赖)，会自动生成node_modules文件夹；
在这个目录新建文件webpack.config.js和src：
检查一下是否下载了这三个依赖，打开package.json：
然后src里面新建main.js和其他你想创建的东西，我这边新建了page和img文件夹，在里面新建了一个HTML和一张图片：
接着我们在webpack.config.js里面配置最简单的webpack配置：
let path = require(‘path’);
module.exports = {
entry: ‘./src/main.js’,
mode: ‘development’,
devServer: {
port: 8080,
contentBase: path.join(__dirname, ‘src’),
open: true
}}
想要知道这些参数的建议去webpack官网看看，挺简单的。这边说一下contentBase我默认指向了src文件夹。
然后在package.json里面配置启动命令：
接着直接npm run dev启动，我切换到手机模式：
这边要访问什么直接点击，或者地址直接相对路径输入：
http://localhost:8080/img/cash-logo.png
http://localhost:8080/page/index.html
就可以访问静态资源了（page会自动指向index.html）。
有一点webpack基础的应该都能搭建，这边只是分享最基础的。搭建好了之后，以后要使用直接把文件拉倒这个src里面，然后用绝对路径访问就可以了。
（完）
Coding 个人笔记