webpack 对外访问

时间 2019-11-19

标签 webpack 对外访问繁體版

原文原文链接

安装 webpackhtml

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

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

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

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

webpack 使用一个名为 webpack.config.js 的配置文件, 如今在你的项目根目录下建立该文件. 咱们假设咱们的工程有一个入口文件 app.js, 该文件位于 app/ 目录下, 而且但愿 webpack 将它打包输出为 build/ 目录下的 bundle.js 文件. webpack.config.js 配置以下:服务器

var path = require('path');app

module.exports = { entry: path.resolve(__dirname, 'app/app.js'), output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' } } 如今让咱们测试一下, 建立 app/app.js 文件, 填入一下内容:webpack-dev-server

document.write('It works'); 建立 build/index.html, 填入如下内容:测试

<!DOCTYPE html>ui

<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