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配置
文档
webpack插件配置(一) webpack-dev-server 路径配置的更多相关文章
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...
- webpack 插件 ProvidePlugin 的使用方法和 eslint 配置
ProvidePlugin:自动加载模块,而不必到处 import 或 require .(点击查看官方文档) 使用方法: 配置 webpack.config.js文件里 plugins 属性 new ...
- 从0开始编写webpack插件
1. 前言 插件(plugins)是webpack中的一等功臣.正是由于有了诸多插件的存在,才使得webpack无所不能.在webpack源码中也是使用了大量的内部插件,插件要是用的好,可以让你的工作 ...
- webpack插件之webpack-dev-server
webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server 现在只需要使用 npm run build指令就可以自动打包,并自动处理好 ...
- webpack插件之htmlWebpackPlugin
webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin 由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...
- webpack插件解析:HtmlWebpackPlugin是干什么的以及如何使用它
HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行). 为何使用它 简单来说,H ...
- VS 配置外部DLL的引用路径【可执行文件的环境路径】
右键项目,属性->配置属性->调试->环境,在这里写入可执行文件运行时的环境路径,格式为:PATH=ABC,如PATH=$(SolutionDir)/env 这样,我们就可以把运行时 ...
- 笔记:配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
随机推荐
- 在MyEclipse中使用javadocAPI文档
开始啦 1.打开MyEclipse,选中要导出的项目,右击Exprot弹出窗口,选择java----javadoc点击next到下一界面. 2.选出要导出的项目或要添加的项目,在browse中选择路径 ...
- ==和equasl、hashmap原理(***)
public class String01 { public static void main(String[] args) { String a="test"; String b ...
- Eloquent JavaScript #02# program_structure
第一章中作者介绍了各种值,但是这些独立的值是没有意义的,只有当值放在更大的框架的时候才会彰显它们的价值.所以第二章开始介绍程序结构. 1.var VS. let 以及 const 作者推荐用 let ...
- 在idea中不出现大波浪的设置
在idea中如果有重复代码时候,就会出现大波浪 ,然后,现在可以设置 Duplicated Code 的对号去掉就可以没有大波浪
- linux下nginx编译安装
步骤: 1.获取nginx安装包. 进入nginx官网:http://nginx.org/ 找到稳定版本: 点击红框内的链接. 使用wget获取安装包. wget http://nginx.org/d ...
- python通过sftp远程传输文件
python提供了一个第三方模块paramiko,通过这个模块可以实现两台机器之间的网络连接,sftp是paramiko的一个方法,使用sftp可以在两台机器之间互相传输 拷贝文件.然而paramik ...
- Spring是如何处理注解的
如果你看到了注解,那么一定有什么代码在什么地方处理了它. Alan Hohn 我教Java课程时强调的一点是注解是惰性的.换句话说,它们只是标记,可能具有某些属性,但没有自己的行为.因此,每当你在一段 ...
- 零基础Python爬虫实现(爬取最新电影排行)
提示:本学习来自Ehco前辈的文章, 经过实现得出的笔记. 目标网站 http://dianying.2345.com/top/ 网站结构 要爬的部分,在ul标签下(包括li标签), 大致来说迭代li ...
- IO流-基础
//创建输出流对象 FileWriter fw = new FileWriter("d:\\a.txt"); /* * 创建输出流对象做了哪些事情: * A:调用系统资源创建了一个 ...
- 尚硅谷面试第一季-11MyBatis中当实体类中的属性名和表中的字段名不一样怎么办
问题: MyBatis中当实体类中的属性名和表中的字段名不一样 ,怎么办 ? 解决方案: 1.写sql语句时起别名 <!-- id属性:必须是接口中方法的方法名 resultType属性:必须是 ...