侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

webpack 对外访问

2023-12-15 星期五 / 0 评论 / 0 点赞 / 117 阅读 / 1608 字

安装 webpack在此之前你应该已经安装了 node.js.npm install webpack -g参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack

安装 webpack

在此之前你应该已经安装了 node.js.

npm install webpack -g参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.

webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上

npm install webpack-dev-server -gwebpack 配置文件

webpack 使用一个名为 webpack.config.js 的配置文件, 现在在你的项目根目录下创建该文件. 我们假设我们的工程有一个入口文件 app.js, 该文件位于 app/ 目录下, 并且希望 webpack 将它打包输出为 build/ 目录下的 bundle.js 文件. webpack.config.js 配置如下:

var path = require('path');

module.exports = {entry: path.resolve(__dirname, 'app/app.js'),output: {path: path.resolve(__dirname, 'build'),filename: 'bundle.js'}}现在让我们测试一下, 创建 app/app.js 文件, 填入一下内容:

document.write('It works');创建 build/index.html, 填入以下内容:

<!DOCTYPE html>

<head> <meta charset="UTF-8"> <title>Hacker News Front Page</title></head><body> <script src="./bundle.js"></script> </body></html>其中 script 引入了 bundle.js, 这是 webpack 打包后的输出文件.

运行 webpack 打包, 运行 webpack-dev-server 启动服务器. 访问 http://localhost:8080/build/index.html, 如果一切顺利, 你会看到打印出了 It works.

**访问不了的时候执行 **

webpack-dev-server --host 0.0.0.0

广告 广告

评论区