文档章节

webpack 对外访问

mucoding
 mucoding
发布于 2016/10/27 23:51
字数 276
阅读 24
收藏 0

安装 webpack

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

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

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

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

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

© 著作权归作者所有

共有 人打赏支持
mucoding
粉丝 0
博文 35
码字总数 5744
作品 0
南京
程序员
Webpack+React项目入门——入门及配置Webpack

一、入门Webpack 参考文章:《入门Webpack,看这篇就够了》 耐心看完这篇非常有帮助 二、React+Webpack环境配置 参考文章:《webpack+react项目初体验》 项目实战:《webpack+react小项目》 三、...

xiaobiB
08/09
0
0
webpack2入门+小案例

介绍 webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。你能够针对你的代码来对 webpack 进行...

bug_killer
2017/12/25
0
0
[翻译]阮一峰webpack教程

翻译它主要是用于学习Webpack,原地址为github.com/ruanyf/webp… 安装使用指南 首先,全局安装Webpack和webpack-dev-server 然后克隆clone阮一峰的仓库 安装依赖 现在开始进入demo*目录并且...

爱吃叉烧
07/10
0
0
升级到新版的vue-cli后只能使用localhost访问无法使用ip访问 手机访问时只显示title不显示内容

只能使用localhost访问无法使用ip访问 手机访问时只显示title不显示内容 只能使用localhost访问,无法使用ip访问 关于这个问题,其实是因为 webpack 导致的,因为我们使用 vue-cli 来构建项目...

webpack+vue+es6
2017/12/19
0
0
一粒云盘--YliYun

产品说明 一粒云企业云盘是深圳一粒云科技有限公司针对企业推出的一款企业数据共享,存储,基于文件的对外对内办公协作,与移动办公相结合的数据管理系统。 一粒云盘拥有 web 端,windows p...

jiuyuehe
2017/06/27
841
0

没有更多内容

加载失败,请刷新页面

加载更多

day96-20180923-英语流利阅读-待学习

英国王子也不看好人工智能,理由却和霍金不同 Daniel 2018-09-23 1.今日导读 2016 年 3 月 9 日至 15 日,世界围棋冠军李世石与谷歌研发的计算机围棋程序 AlphaGo 进行人机大战并以 1 比 4 ...

飞鱼说编程
32分钟前
1
0
今天在码云遇到一个很有意思的人 for Per.js

今天在码云遇到一个很有意思的人,他在我的Per.js项目下面评论了一句,大意为“你试试这句代码,看看速度到底是你快还是Vue快”【当然,这个评论被我手残不小心删掉了...】。 然后我就试了,...

Skyogo
37分钟前
24
0
Java -------- 首字母相关排序总结

Java 字符串数组首字母排序 字符串数组按首字母排序:(区分大小写) String[] strings = new String[]{"ba","aa","CC","Ba","DD","ee","dd"}; Arrays.sort(strings); for (int i ...

切切歆语
39分钟前
1
0
还在用 Git 的 -f 参数强推仓库,你这是在作死!

最近,美国一个程序员因为同事不写注释,代码不规范,最严重的是天天使用 git push -f 参数强行覆盖仓库,该程序员忍无可忍向四名同事开抢,其中一人情况危急!!! 不写注释、代码不规范是一...

红薯
52分钟前
401
0
NPM报错终极大法

所有的错误基本上都跟node的版本相关 直接删除系统中的node 重新安装 sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*} 重新安装 $ n lts$ npm...

lilugirl
56分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部