webpack简单搭建localhost访问静态资源

前端开发过程中，静态页面直接双击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/

http://localhost:8080/page/index.html

就可以访问静态资源了（page会自动指向index.html）。

有一点webpack基础的应该都能搭建，这边只是分享最基础的。搭建好了之后，以后要使用直接把文件拉倒这个src里面，然后用绝对路径访问就可以了。

（完）