webpack创建服务
我们开发时候肯定是希望用localhost的方式 或者一个ip地址的方式来访问我们自己的页面,不会想用file:///D:/code/nodejscode/webpack_demo/dist/inedex.html此种方式,这个时候我们就希望开启一个服务,在当前build目录下,生成这样的一个文件,
webpack 也内置了一个开发服务,通过impress 实现这样一个静态服务,
可以在命令中 yarn add webpack-dev-server -D 其中-D也是开发依赖,
也可以npx webpack-dev-server (或者配一个脚本?怎么配?),它的好处是不会真实的打包文件,而是生成所谓内存中的打包,把文件写入内存中,
此时我们可以访问 http://localhost:8080/ :
此时它默认以当前目录生成了个静态目录,
但我们希望它可以自动进入build 里打开页面,所以我们需要在webpack.config.js中设置,
module.exports:{
devServer : { //开发服务器的配置
port:3000 ,//自定义访问的端口号
progress:true,
contentBase:’./build’ //指定运行目录
}
}
此时我们将命令webpack-dev-server 加入到package.json 中,方便以后run
此处应该配置为 “dev”: “webpack-dev-server --config webpack.config.my.js”,上图配错.
至于怎么发现的,当我运行npm run dev 后再访问3000端口,此处目录下没有index.html 这些dist目录下的文件,我就知道了3000端口的程序运行的目录不在dist,而是其他地方,但webpack.config.my.js 文件没有写错,唯一可能性是此时node 并没有调用webpack.config.my.js 文件,而是用的默认的webpack.config.js 这个默认文件!!!!
所以,我打开了package.json重新编辑了下 dev命令,再次回到cmd中运行npm run dev,此时又提醒 Error: listen EADDRINUSE: address already in use 127.0.0.1:3000,也就是说3000正在运行,我不能在用这个端口了。所以决定杀死程序,重新启动3000。
故用查看进程的方式(netstat -ano查看所有进程windows的cmd命令之一) 找到3000这个进程的pid,从而又找到 node.exe 是此进程的应用程序(windows cmd命令行窗口中敲入tasklist回车可查看 所有正在运行的程序,也可以在task manager中查看),解决办法是kill该进程(tskill 7140,也可以等一会,他自己就死了。。)
此时我们想能自动配置到index.html中,故引入插件 html-webpack-plugin ,
调用 yarn add html-webpack-plugin -D
此时编辑webpack.config.my.js
但还没有装上插件(因为网速慢),报错信息 Error: Cannot find module ‘html-webpack-plugin’
,细节如下图:
但是,当我 run build 时候,报错:
错误信息提示为
Child html-webpack-plugin for “index.html”:
ERROR in Entry module not found: Error: Can’t resolve ‘D:\code\nodejscode\webpack_demo\src\index.html’ in ‘D:\code\nodejscode\webpack_demo’
原因: index.html 写成了 inedex.html 。。吐血,原来是拼写错误。。
改好后又报错:
错误信息为:
ERROR in Entry module not found: Error: Can't resolve 'src/index.js' in 'D:\code
\nodejscode\webpack_demo'
Child html-webpack-plugin for "index.html":1 assetEntrypoint undefined = index.html[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 297 by
tes {0} [built][2] (webpack)/buildin/global.js 472 bytes {0} [built][3] (webpack)/buildin/module.js 497 bytes {0} [built]+ 1 hidden module
究其原因,查看下config.js中 写成了这样:
说明此处路径不对,应该为
entry:'./src/index.js', //被打包的文件
再次执行命令npm run build ,运行成功:
<html>
<head></head>
<body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
如果想压缩目标文件 template 中的index.html 文件,我们可以这样做,加上removeAttributeQuotes:true ,如下:
plugins:[//数组,放着所有的webpack插件new HtmlWebpackPlugin({template:'./src/index.html',filename:'index.html',minify:{removeAttributeQuotes:true, // 决定template 是否有双引号collapseWhitespace:true //是否是一行(此处collapseWhitespace无自动提示,并不代表运行错误或者无效)},hash:true //是否带有hash })]
此时如果双引号没有去掉的,是因为字符串里边有逗号,所以不能被去掉。
是否是一行效果:
是否带有hash效果:
要做到 bundle.js 是否每次产生的都是新的文件,只需要:
output:{filename:'bundle.[hash].js',//打包后的文件名path:path.resolve(__dirname,'dist') //路径必须是个绝对路径},
于是生成了一个新的bundle.XXXX.js, 效果如下:
如果不修改index.js ,每次产生的hash 是不变的,当修改index.js中的代码再编译时候才会产生新的hash值及新的文件,这里是防止覆盖,或者防止缓存的问题,
变化如下:
重新编译后,效果如下:
如果希望hash code 稍微短一点,可这样设置:
output:{filename:'bundle.[hash:8].js',//打包后的文件名path:path.resolve(__dirname,'dist') //路径必须是个绝对路径},
效果如下:
怎样支持 css 模块, js 模块,图片的转化,见下一篇文章。
要思考的问题:
yarn.lock 文件是什么,有什么作用?
为什么是devServer这个节点? 因为命令是webpack-dev-server,我猜是死规定,没有为什么。
webpack devserver的说明
一般我们在项目中 如果用webpack的话,基本都会用到webpack-dev-server,配置大致如下:
devServer={
contentBase: basePath,
historyApiFallback: true,
hot: true,
devtool: ‘eval’,
host: ‘0.0.0.0’,
port: 3009,
inline: true,
noInfo: false,
// proxy: {
// ‘*’: {
// target: ‘http://localhost:8088’,
// secure: false
// // changeOrigin: true
// }
// }
};
webpack创建服务相关推荐
- 用delphi创建服务程式
视窗系统 2000/XP和2003等支持一种叫做"服务程式"的东西.程式作为服务启动有以下几个好处: (1)不用登陆进系统即可运行. (2)具有SYSTEM特权.所以你在进程管理器 ...
- SAP MM初阶创建服务采购订单时订购单位和物料组的缺省值
SAP MM初阶创建服务采购订单时订购单位和物料组的缺省值 执行事务代码ME21N 创建采购订单,输入了单据类型,供应商,组织结构相关的数据,账户分配类别指定为K.如下图, 当把item catego ...
- SAP MM ML81N为采购订单创建服务接收单,报错- No matching PO items selected -
SAP MM ML81N为采购订单创建服务接收单,报错- No matching PO items selected - SAP里的服务采购流程跟有形的实物采购流程并不相同.除了在采购单据上的差异以外 ...
- angular js一factory,service,provider创建服务
服务:在AngularJS 中,服务是一个函数或对象 在写控制器的时候,不要复用controller,当我们的controller里面有相同的代码时,此时需要把它抽取成一个服务,所有的服务都符合依赖注 ...
- 使用angular2 自带的指令,快捷创建服务,组件等!
为什么80%的码农都做不了架构师?>>> 使用ng 指令创建一个组件! ng g component produce 可以直接创建指令并更新app.module.ts; ng ...
- Linux给GCC编译的应用程序创建服务
一.创建服务文件 linux 服务文件的位置在: /etc/systemd/system ,进入该目录. 首先创建一个服务文件,名字可以按照xxx.service 的格式命名,例如我的噪声处理服务命名 ...
- 创建服务factory和service方法的区别
factory方法返回的是对象,json或数组,也可以返回字符串类型的数据,但service方法只能返回数据或对象 创建服务有3种方法 $provide.provider('服务名',function ...
- Java实训项目12:GUI学生信息管理系统 - 实现步骤 - 创建服务接口实现类
文章目录 七.实现步骤 (八)创建服务接口实现类 1.创建学校服务接口实现类 单元测试:对CollegeServiceImpl进行单元测试 (1)编写测试方法testFindCollegeById() ...
- Java实训项目11:GUI学生信息管理系统 - 实现步骤 - 创建服务接口
文章目录 七.实现步骤 (七)创建服务接口 1.创建学校服务接口 2.创建状态服务接口 3.创建学生服务接口 4.创建用户服务接口 七.实现步骤 (七)创建服务接口 服务接口调用数据访问接口,可以添加 ...
最新文章
- Field、CopyField、DynamicField的一些简介,用法
- boost::mpi::cartesian_communicator相关用法的测试程序
- 【原】UCS-2和UTF-8的互相转换
- 二元函数泰勒公式例题_高等数学入门——二元函数可微性的判断方法总结
- 数字信号处理基础知识之DFT、DTFT、DFS、FFT基本概念扫盲
- 提高开发效率,eclipse的常用快捷键、旁门左道、系统错误小贴士
- linux 多CPU
- Java-20180419
- 用什么软件测试电视盒子真假,网络机顶盒哪个好?专业盒子测评告诉你哪款最值得买...
- url 转码 java_URL 转码遇到的坑
- 为什么你的ASO效果不好_ASO优化重要吗
- 【信息通信与软件工程国际会议】2022年第二届信息通信与软件工程国际会议
- c++的一些小知识点
- 10分钟了解何为ECharts
- GCJ-02和BD-09互转、GCJ-02和WGS-84互转
- 使用反向代理给 PPA 加速
- Maplab系列15:Inverted File
- 区块链与DApp开发(学习总结)
- SpringBoot整合Elasticsearch详细步骤以及代码示例(附源码)
- 武汉大学计算机学院 优秀夏令营,武汉大学计算机学院2014年优秀大学生暑期夏令营通知...