文档章节

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
[翻译]阮一峰webpack教程

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

爱吃叉烧
07/10
0
0
webpack-dev-server 核心概念

webpack-dev-server 核心概念 Webpack 的 ContentBase vs publicPath vs output.path webpack-dev-server 会使用当前的路径作为请求的资源路径(所谓 当前的路径 就是运行 webpack-dev-serv...

粒子数反转
11/22
0
0
webpack2入门+小案例

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

bug_killer
2017/12/25
0
0
升级到新版的vue-cli后只能使用localhost访问无法使用ip访问 手机访问时只显示title不显示内容

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

webpack+vue+es6
2017/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vuex进阶知识点巩固

我们先回忆一下上一篇的代码 computed:{ getName(){ return this.$store.state.name }} 这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.na...

嫣然丫丫丫
8分钟前
0
0
Python出现安全策略问题的解决方法

Python运行期间出现如下错误 import: attempt to perform an operation not allowed by the security policy `PS' @ error/constitute.c/IsCoderAuthorized/408. 解决方法:在脚本的开头添加......

大糊涂
15分钟前
0
0
Angularjs实现控制器之间通信方式示例

利用angularjs开发项目中,控制器之间的通信,比如参数的传递,数据的传递,都是比较常见的。控制器之间的通信,显得尤为重要。常见的方式有如下两种:一、angular服务的方式;二、基于事件广...

前端攻城老湿
23分钟前
0
0
xshell使用xftp传输文件

12月11日任务 15.4 xshell使用xftp传输文件 15.5 使用pure-ftpd搭建ftp服务 1.xshell使用xftp传输文件 示例一:xshell使用sftp传输文件 新建一个会话 定义为sftp 连接登入 可以get文件,下载...

hhpuppy
25分钟前
1
0
深入解析Vuex实战总结

这篇文章主要介绍了Vuex的初探与实战小结,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 1.背景 最近在做一个单页面的管理后台项...

前端攻城小牛
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部