webpack 自动运行,及打包 img css json 的操作 npm插件的使用方法
没有指令操作的属性生产环境,有指令操作的属于开发环境
webpack:输入指令后,便会自动开启一个浏览器
需要插件:open-browser-webpack-plugin 生产环境
想使用 node.js 中 path 的方法,
var path=require("path") 路径操作
path.resolve() 方法将路径变成绝对路径, 参数(__dirname,"./目录"), 意思为 把当前目录放在哪个目录下
在自动启动服务器的时候,webpack-dev-server 会把当前项目当根目录
想指定根目录,并改端口;
我们在 webpack.config.js 在属性
devServer:{
contentBase:"" //根目录
port:"" //端口
proxy:"" //代理服务器
}
想引入图片 css json 等等怎么办;
图片主要针对的背景图片,因为 css 的打包的,所以,传统的引入背景的方法无效,所以我们需要将图片打包
json文件: require("json文件") 可以直接使用,但还是要打包
json-loader 需要下载的插件
打包的图片不能被加载,
img文件:
url-loader 需要下载的插件
limit:代表最大值;
load有先后顺序
css文件:
style-loader css-loader 需要加载的插件,
处理 js 针对 es6 的(将es6 换成 es5)
babel-loader 需要下载的插件
为什么我只介绍插件,不介绍使用方法呢? 因为 官网上提供了 详细的使用方法
官网名:https://www.npmjs.com/
第一步,搜索你想下载的插件

选中复合条件的插件

按照人给的提示操作:第一步在 npm 中下载插件

用法

webpack 自动运行,及打包 img css json 的操作 npm插件的使用方法的更多相关文章
- webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包
随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...
- 优化单页面开发环境:webpack与react的运行时打包与热更新
前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...
- webpack入门之打包html,css,js,img(一)
webpack到底是什么,网上一大堆介绍的东西,越看越不知道说的什么,所以今天打算自己来记录一下这段时间学习webpack的成果, webpack就是打包文件用的,html,css,js,img,为什 ...
- webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件
在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...
- webpack正式、测试环境接口地址本地运行及打包命令配置
声明:本文由w3h5原创,转载请注明出处:<webpack正式.测试环境接口地址本地运行及打包命令配置> https://www.w3h5.com/post/521.html 为了方便开发 ...
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- webpack打包提取css到独立文件
将本来镶嵌在bundle.js的css转到外面来,我们需要用到一个插件:extract-text-webpack-plugin 使用方法: 1.安装 npm i extract-text-webpac ...
- 继webpack后又一打包神器Parcel
前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又 ...
- webpack模块化管理和打包工具
Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的 ...
随机推荐
- 在线修改大表结构pt-online-schema-change
使用场景 在线数据库的维护中,总会涉及到研发修改表结构的情况,修改一些小表影响很小,而修改大表时,往往影响业务的正常运转,如表数据量超过500W,1000W,甚至过亿时 在线修改大表的可能影响 在线修 ...
- G1 垃圾收集器之对象分配过程
G1的年轻代由eden region 和 survivor region 两部分组成,新建的对象(除了巨型对象)大部分都在eden region中分配内存,如果分配失败,说明eden region已经 ...
- linux 配置环境变量三种方式
一:用于当前终端: export PATH=$PATH:<你的要加入的路径> 此方式仅用于当前终端,一旦该终端关闭,则配置失效 二:用于当前用户: vi ~/.bashrc 然后加入:ex ...
- vue2-brace-editor代码编辑器添加自定义代码提示(修改源码)
下载vue2-brace-editor源代码,先执行npm install安装项目依赖 在ace.component.vue组件的methods添加setCustomPrompts方法 修改完源码后, ...
- xml发post请求
# python3字符串换行,在右边加个反斜杠 body = '<?xml version="1.0" encoding = "UTF-8"?>' ...
- ssh远程登录故障解决方案
问题描述: xshell远程连接服务器连接不上,如下图所示: 故障排除: . 首先查看自己系统的防火墙是否关闭,没有关闭的话关闭一下. # centos 7中关闭防火墙命令: systemctl st ...
- 接口测试参数化详解(Jmeter)
简介 接口测试是目前最主流的自动化测试手段,它组合不同的参数向服务器发送请求,接受和解析响应结果,通过测试数据的交换逻辑来验证服务端程序工作的正确性.我们在测试过程中需要考虑不同的输入组合,来覆盖不同 ...
- hdu 6501 transaction transaction transaction 最长路/树形DP/网络流
最长路: 设置一个虚拟起点和虚拟终点,每个点与起点间一条负边,值为这个点书的价值的相反数(代表买书花钱),每个点与终点连一条正边,值为这个点的书的价格(代表卖书赚钱). 然后按照图中给的边建无向边,权 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(3)|所有权Ownership]
今天我们来讲讲rust最难,也是最重要的概念: Ownership,Borrowing,Lifetimes 首先我们来看看:ownership(所有权) 我们来看看下面的代码: let a = [1, ...
- SQLSERVER调用OPENROWSET的方法
前言:正好这两天在同步生产环境的某张表数据到测试环境,之前用过一些同步数据软件,感觉不太可靠,有时候稍有操作不当,就会出现生产环境数据被清空等情况,还要去恢复数据.如果能恢复还好,不能恢复那么.... ...