没有指令操作的属性生产环境,有指令操作的属于开发环境

  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插件的使用方法的更多相关文章

  1. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  2. 优化单页面开发环境:webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  3. webpack入门之打包html,css,js,img(一)

    webpack到底是什么,网上一大堆介绍的东西,越看越不知道说的什么,所以今天打算自己来记录一下这段时间学习webpack的成果, webpack就是打包文件用的,html,css,js,img,为什 ...

  4. webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...

  5. webpack正式、测试环境接口地址本地运行及打包命令配置

    声明:本文由w3h5原创,转载请注明出处:<webpack正式.测试环境接口地址本地运行及打包命令配置> https://www.w3h5.com/post/521.html 为了方便开发 ...

  6. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  7. webpack打包提取css到独立文件

    将本来镶嵌在bundle.js的css转到外面来,我们需要用到一个插件:extract-text-webpack-plugin 使用方法: 1.安装 npm i extract-text-webpac ...

  8. 继webpack后又一打包神器Parcel

    前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又 ...

  9. webpack模块化管理和打包工具

    Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的 ...

随机推荐

  1. join 与 countdownlatch 的区别 扩展 栅栏 CyclicBarrier

    我们先看一个 小例子 , 使用 join 与CountDownSlatch 都可以完成 当1,2线程 完全结束后 3 线程 start 对比我们就能够知道 CountDownSlatch 比 JOIN ...

  2. AT&T推出云5G网络开源工具Airship

    导读 AT&T新推出的云5G网络依赖于一个名为“Airship”的开源供应工具,该工具在周一发布了第一个版本. AT&T负责网络云的副总裁Amy Wheelus告诉LightReadi ...

  3. CentOS 基础命令

    命令格式: 命令字  选项   参数1 参数2 ..... CentOS 7 主目录介绍 [xbb@localhost ~]$ ls -l /total 16lrwxrwxrwx. 1 root ro ...

  4. 006-Zabbix agent on Zabbix server is unreachable for 5 minutes

    环境描述:        环境介绍:CentOS6.5   zabbix3.2.6(zabbix客户端与服务端在一台主机)   1.在安装完zabbix之后,添加客户端,客户端配置(zabbix_ag ...

  5. [Python模块]Windows环境安装PyV8并执行js语句

    安装这个玩意儿真挺坑的,pip直接安装失败,windows的py库压根搜不到.. 搜索良多解决办法终于找到了,在这里贴出来,主要是把这个库下载下来再安装,但它的下载地址HERE位于外面的世界(你懂得) ...

  6. C语言实现栈代码

    /* 栈的特性:先进后出. 栈在计算语言处理和将递归算法改为非递归算法等方面起着非常重要的作用. */ #define INITSIZE 100 //储存空间的初始分配量 typedef int El ...

  7. django middleware介绍

    Middleware Middleware是一个镶嵌到django的request/response处理机制中的一个hooks框架.它是一个修改django全局输入输出的一个底层插件系统. 每个中间件 ...

  8. java 集合之ArrayList、Vector、LinkedList、CopyOnWriteArrayList

    ArrayList 线程不安全. 底层Object[]数组实现,用transient关键字修饰,防止序列化,然后重写了readObject和writeObject方法,为了提高传输效率. 插入时会判断 ...

  9. python中导入from appium import webdriver时报错:ModuleNotFoundError: No module named 'appium'

    1.检查一下有没有安装Appium-Python-Client,执行语句:pip install Appium-Python-Client进行安装 2.安装后,出现ModuleNotFoundErro ...

  10. 树莓派VI命令大全(附vim使用异常,卸载重新安装步骤)

    vi有3个模式:插入模式.命令模式.低行模式. 插入模式:在此模式下可以输入字符,按ESC将回到命令模式. 命令模式:可以移动光标.删除字符等. 低行模式:可以保存文件.退出vi.设置vi.查找等功能 ...