我想本地跑一下打包好的html，js，css文件，咋办？

前端snow2024-06-14 17:55

文件打包好了，是html，js，css，我想启动它怎么办？你的第一反应是不是webpack的webpack-dev-server？

亲爱的，上线以后就没有webpack-dev-server，我就想模拟线上，难道就没有办法了吗？

有啊，看这里：http-server 废话不多说，直接上操作流程：

1.全局下载：

vbscript 复制代码

npm install http-server -g

2.检查一下：

vbscript 复制代码

http-server -v

3.创建一个项目：my-app，初始化一下

csharp 复制代码

npm init -y

4.安装webpack

css 复制代码

npm i webpack webpack-cli -g

5.文件目录如下：

6.index.html文件，用shift+！会自动生成html初始化表情

7.在src下面建立一个index.js文件

ini 复制代码

var arr = [78,4,15,12,14,63,5,2,1,4,98,65]
console.log("原始数据：", arr)
for(var i = 0; i< arr.length-1; i++){
    for(var j = 0; j< arr.length-1-i; i++){
        if(arr[j] > arr[j+1]){
            tem = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = tem;
        }
    }
    throw Error();
    console.log(`第${i}次排序的：${arr}`)
}
console.log("最终排序：", arr)

8.webpack.config.js 配置如下：

如果你安装了webpack-dev-server,用devServer里面的配置也可以启动一个项目的，但是现在我们不用它。

9.执行打包：打包的时候你直接执行npx webpack 也行，在package.json的 scripts里面配置下也行，都可以。

执行：

arduino 复制代码

npm run build

在项目里面出现dist文件，里面有个打包好的index.js

10.启动这个dist，在dist下面加一个index.html文件，如下：

你用script标签把这个打包好的js文件引入进来了，对吗？是不是很眼熟？只不过正常情况下，咱们的包经过了loader的处理，代码压缩，代码混淆，代码分块，使得我们打包出来的东西更加复杂而已。简洁才能看清本质，对不？

11.现在http-server上场表演了，执行命令

bash 复制代码

npx http-server -p 8080 ./dist

如果你直接输入 npx http-server 它会自动找当前目录下面的index.html启动服务，如果你给定了目录，它就会去这个目录下找index.html，当然你也可以指定具体的html文件，比如： npx http-server ./xxx/aa.html