![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 54
一闪一闪亮晶晶,漫天都是小星星
这个作者很懒,什么都没留下…
展开
-
webpack —— host:“0.0.0.0“
如果在开发环境中启动了一个devserve服务,希望局域网的同事也可以访问到。原创 2024-03-19 22:47:55 · 137 阅读 · 0 评论 -
webpack 背景图路径错误导致图片出不来
自己学习webpack的时候,打包之后,发现 img标签中的src图片能够现实出来,但是css中的背景图不能显示出来???解决:配置url-loader { test:/\.(gif|png|jpg)\??.*$/, use:{ loa...原创 2019-05-28 11:02:39 · 2020 阅读 · 0 评论 -
webpack 打包 HTML img
转载地址:https://www.jianshu.com/p/087a873d7784使用 webpack 进行前端开发时, 遇到在 html-webpack-plugin template html 中 img 标签 src 无法正常解析, 但是写在 css, less 中的 url可以正常解析, 比如:background: url(~assets/images/logo.p...转载 2019-05-13 16:36:00 · 384 阅读 · 0 评论 -
关于webpack-dev-server 多页面启动index时,url栏带上页面路径
因为我的webpack页面配置会在生成页面的时候加上view这个目录var getHtmlConfig = function(name,title){ return { template: './src/view/'+name+'.html', filename: 'view/'+name+'.html', favicon : './f...原创 2019-05-07 18:01:34 · 3829 阅读 · 3 评论 -
webpack path 和publicPath 的区别
转载地址:https://www.cnblogs.com/gaomingchao/p/6911762.html关于webpack的path和publicPath。path:所有输出文件的目标路径;publicPath:输出解析文件的目录,url 相对于 HTML 页面区别:path是webpack所有文件的输出的路径,必须是绝对路径,比如:output输出的js,url-load...转载 2019-05-06 10:18:46 · 435 阅读 · 0 评论 -
html-webpack-plugin 和 html-loader冲突
1. 首先,使用html-webpack-plugin 不使用html-loader的时候:我的页面结构:index.html:(因为有使用<%= %>表达式,所以我把该页面改外asp页面)在index.html中我引入了一个公用的html模板(header-common.html),里面是一些公用的header标签打包,可以看到head的页面中已经引入了...原创 2019-04-30 11:48:05 · 2857 阅读 · 0 评论 -
webpack 配置
参考地址:https://segmentfault.com/a/1190000012536871#articleHeader101: 配置选项 Config options: --config 配置文件路径,字符串格式,默认是`根目录`下的 webpack.config.js 或 webpackfile.js, --config-name 使用配置的名字,字符串 -...转载 2019-04-29 14:47:28 · 200 阅读 · 0 评论 -
webpack全局与本地
webpack一般都会有个全局的webpack版本和项目内的webpack版本比如 我全局的webpack版本是: 4.16.0 项目安装的是 1.15.0在项目里安装过后 输入 webpack -v 发现结果为全局的4.16.0因为:只有写在npm scripts里才会去找node_modules里的webpack,直接命令行运行就是全局的。需要在package.j...原创 2019-04-26 16:53:43 · 893 阅读 · 0 评论 -
webpack08——— 使用html-webpack-plugin插件,操作html(比如,传参。。。)
怎么实现传参呢??html-webpack-plugin 是支持类似于 js 模板语言的webpack.config.js 文件添加title属性:html:运行打包!结果:参数尊的被传递过来啦~~~~~ 开森 查看html-webpack-plugin 的所有属性要怎么看呢??npm 传送地址 https://www.npmjs.com/pa...原创 2018-12-21 17:32:25 · 1279 阅读 · 0 评论 -
webpack07—— html页面自动生成打包的filename值
经过学习entry 和webpack 占位符的学习后entry:https://blog.csdn.net/assassin_0302/article/details/85161729webpack 占位符:https://blog.csdn.net/assassin_0302/article/details/85163086 项目中的html 里有引用一个写死的bundle...原创 2018-12-21 16:21:18 · 539 阅读 · 1 评论 -
webpack05 __ 配置文件中的entry
entry 是整个webpack打包的一个入口entry 为了应付各种需求,在 webpack 配置中有多种方式定义 entry 属性官方文档:https://www.webpackjs.com/concepts/entry-points/ 方式主要分为 : 1.单个入口方式 2.对象方式 一、单个入口方式:用法:entry: st...原创 2018-12-21 15:38:46 · 416 阅读 · 0 评论 -
webpack06 占位符
占位符有4个 [name] [hash] [chunkhash] [id]https://www.webpackjs.com/configuration/output/#output-filename[name]: 表示entry创建对象的时候,前面的那个key,生成的名字就是key[hash]:是打包时,生成的hash [chunkhas...原创 2018-12-21 15:37:16 · 553 阅读 · 0 评论 -
webpack-entry和output
1.新建项目文件夹 webpack-config2.进入文件夹,执行 npm init3.安装webpack npm install webpack --save--dev4. 新建项目组成1)、 新建放置代码源目录的文件夹 src,然后src文件夹下面需要新建 script文件夹 和style 文件夹用来存放js 和css文件2)、新建dist 目录,用来放置打包过后的静态...原创 2018-12-14 16:49:27 · 256 阅读 · 1 评论 -
webpack—part3——认识一些webpack 命令
承接part2 https://mp.csdn.net/postedit/85003231加载一个css就要写两个loader 就觉得很麻烦,我们可以不在这里指定。我们可以通过命令行工具。在终端输入webpack 我们可以看到 webpack还有很多参数。 上面只是一小部分使用相应的参数来指定相应的loader : --module-bind 来绑定相应的模块.绑...原创 2018-12-14 15:13:46 · 110 阅读 · 0 评论 -
webpack—part02——webpack 打包css文件
承接day01项目 https://mp.csdn.net/postedit/849997211.新建css文件2.导入hello.js文件中运行终端 webpack hello.js hello.bundle.js 报错,webpack不能打包css文件其中画绿线的地方表示,我们需要一个该文件类型的loader去解析它从以上截图可以看出,我们虽然引入了styl...原创 2018-12-14 14:45:20 · 152 阅读 · 0 评论 -
webpack—part01
以下内容均是参照https://www.imooc.com/learn/802视频记录1. 新建webpack_day01 文件夹2.进入该文件夹3. 运行npm init (一直回车)初始化 得到node_module 文件夹 和 package.json 文件4.安装 webpack 模块 npm install webpack --save--dev5.在该文件夹中新建...原创 2018-12-14 11:46:31 · 160 阅读 · 0 评论