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

前端开发过程中，静态页面直接双击HTML文件就能在浏览器打开，有时候我们很希望可以用localhost启动，在局域网内可以直接用手机或者是别的电脑访问。

如果你用的是框架脚手架或者你是webpack大神就不用往下看了。今天分享的只是最简便用webpack-dev-server快速localhost访问静态资源。

Node环境一定要有，这个我就不说了。新建一个文件夹，注意，这边文件夹最好不要中文，不然会报错。然后在这个文件夹里面用命令行打开：

初始化：npm init -y(-y少了询问步骤)，会自动生成package.json；

下载依赖：npm install webpack webpack-cli webpack-dev-server -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）。

原文链接：https://blog.csdn.net/wade3po/article/details/88706737

 

值得注意的是webpack-cli的版本会导致报错改用3.3.12版本就好了