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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。