webpack插件配置(一) webpack-dev-server 路径配置
本文的路径配置主要涉及到webpack.config.js文件中devServer与output两个选项的配置
webpack-dev-server
定义
webpack-dev-server
主要是启动了一个使用express
的Http服务器
。它的作用主要是用来伺服资源文件。此外这个Http服务器
和client
使用了websocket
通讯协议,原始文件作出改动后,webpack-dev-server
会实时的编译,但是最后的编译的文件并没有输出到目标文件夹,即output中的配置:
output: {
path: './dist/js',
filename: 'bundle.js'
}
注意:你启动webpack-dev-server后,你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件
配置实践
前提:
1.项目的目录结构如下:
app
|__content
| |__index.html
|__src
| |__index.js
|__node_modules
|__package.json
|__webpack.config.js
2.package.json添加start命令,配置完成后运行npm start命令,打开浏览器访问http://127.0.0.1:8080/
"scripts": {
"start": "webpack-dev-server"
},
配置一:
webpack.config.js配置
//应用程序的起点入口。这个起点开始,应用程序启动执行
entry: './index.js',
output: {
filename: 'bundle.js',
},
devServer: {
inline: true,
contentBase: './content',
},
index.html内容:注意script src的值
<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<div id=app></div>
<script src="bundle.js"></script>
结论一:contentBase告诉服务器从哪个目录提供内容,只有在加载静态文件时才需要。上面index.html在项目的content文件夹下,所以contentBase值为'./content'。
配置二:
webpack.config.js
entry: './index.js', output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/asset/',
}, devServer: {
inline: true,
contentBase: './content',
},
html配置
<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<div id=app></div>
<script src="asset/bundle.js"></script>
运行结果:项目根目录没有生成dist文件夹,浏览器中正常显示‘Hello, React Router ’
结论二:output中的path是生成目标文件的绝对路径,但是目标文件路径中是看不到编译后的文件,因为webpack-dev-server实时编译的文件都保存到了内存中
结论三:output中的publicPath是访问output生成的文件的路径(是一个访问路径,不需要对应真实的文件路径),所以在html中需要将src设置为'asset/bundle.js'
配置三:
webpack.config.js
entry: './index.js', output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/asset/',
}, devServer: {
inline: true,
contentBase: './content',
publicPath: '/new/asset/',
},
html配置
<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<div id=app></div>
<script src="new/asset/bundle.js"></script>
结论四:devServer中的publicPath配置会覆盖output中的publicPath配置
文档
最新文章
- ubuntu 加载新硬盘或分区
- 自动化运维,远程交互从服务器A上ssh到服务器B上,然后执行服务器B上的命令。
- Twentydaysgone
- Markdown learning
- VB6.0 调用存储过程
- Vim 中使用cscope
- JSTL之迭代标签库
- 开源点评:Protocol Buffers介绍
- Codeforces 701C They Are Everywhere(Two pointers+STL)
- PAT1006:Sign In and Sign Out
- vue中部分api解释 ($nextTick)
- [luogu1452]Beauty Contest【凸包+旋转卡壳】
- 注册InstallShield
- ServletContextListener使用详解(监听Tomcat启动、关闭)
- PyCharm2017破解步骤
- Android简易项目--傻瓜式阿拉伯语输入法(Dummy Arabic Input)
- vuex简介(转载)
- III USP Freshmen ContestH. MaratonIME gets candies
- 学习React前端框架,报错 &#39;render&#39; is not defined no-undef
- 网页上播放音频、视频Mp3,Mp4
热门文章
- Failed to start component [StandardEngine[Tomcat].StandardHost[localhost]]
- 20165215 2017-2018-2 《Java程序设计》第4周学习总结
- 谷歌重磅开源强化学习框架Dopamine吊打OpenAI
- make是如何工作的
- prufer编码 cayley定理
- selenium得到弹出窗口
- hihocoder [Offer收割]编程练习赛8
- 11: python中的轻量级定时任务调度库:schedule
- 题说proxy
- 网络 --- 4 socketserver模块并发 连接合法性