模块化第一步  初始化 package.json 文件

  node.js  指令  npm init

  npm的官网:https://www.npmjs.com/   搜索插件名,查看插件的用法

  1. webpack 虽然并没有什么突出的地方,但是他的插件却非常多且好用;

      npm node包管理工具,可以对包进行 增 删 查 改

      下载 npm 包的指令  npm install 包名

  2. cnpm 淘宝 npm 镜像:与 npm 一样,但是比 npm 下载的快

      指令:npm install -g cnpm --registry=https://registry.npm.taobao.org

  3. 利用 browserify  对 js 文件,进行打包编译

       下载指令:npm install browserify --save-dev

      打包指令:browserify 主文件>要打包的文件

  4. 利用 package.json 文件,恢复之前所下载的包

      指令:npm install

  5. webpack 可以对前端资源进行打包  (前端资源:js css json 图片均可打包)

      下载指令:npm install webpack@3.8.1 --save-dev  (--save-dev:开发环境, @指令版本号 )

  6. webpack-dev-server 可以通过ctrl+s 来进行实时刷新的插件

      下载指令:npm install webpack-dev-server@2.9.4 --save-dev  (webpack的附属产品,要比webpack第一个大版本,如 webpack 是3点多的版本,他的附属产品只能的2点多)

      实时刷新指令:webpack-dev-server --hot --inline

  7. 如果只想用 webpack 来实现一键打包,我们需要在当前目录下,创建一个 webpack.config.js 文件

      文件内容的配置:https://www.cnblogs.com/shangjun6/p/10980093.html

  8. 如果我们想 通过一个指令来跑我们的 node.js,我们只能通过 package.json 文件

      指令:npm run dev

      文件内容的配置:https://www.cnblogs.com/shangjun6/p/10980087.html

  9. 想要去改相对路径变成绝对路径 我们需要用到 node 自带的插件;

      指令:var path=require("path");

      用法:path.resove()  方法,参数一:必填:dirname(当前目录) 参数二:必填:"./指定目录下"   在 webpack.config.js中操作

  10. 要自动打开浏览器的插件:open-browser-webpack-plugin

      下载指令:npm open-browser-webpack-plugin --save-dev

      文件内容的配置:官网搜 open-browser-webpack-plugin

  11. 配置服务器:通过 devServer 属性  在webpack.config.js 文件,接口 module.exports={} 中

      指定跟目录:contentBase:

      指定端口:port:

  12. 打包图片的插件

      指令下载:npm install url-loader --save-dev  主要是针对 css 打包的背景图,不好用

      插件用法:官网搜 url-loader

  13. 打包 css 的插件

      指令下载:npm install style-loader css-loader --save-dev

      插件用法:官网搜 css-loader

  14. 打包 json 的插件

      指令下载:npm install json-loader --save-dev

      插件用法:官网搜 json-loader

  15. 打包 es6 插件(将 es6 转为 es5 )

      指令下载:npm install -D babel-loader @babel/core @babel/preset-env

      插件用法:官网搜 babel-loader

  16. 将 css 与 js 分离的插件

      指令下载:npm install extract-text-webpack-plugin --save-dev

      插件用法:官网搜 extract-text-webpack-plugin

  17. less的配置:(es6写法的css文件)

      指令下载:npm install less less-loader --save-dev

      插件用法:官网搜 less-loader

  18. 查看 node 的版本

      指令:node -v

总结 webpack 的插件的更多相关文章

  1. webpack 相关插件及作用(表格)

    webpack 相关插件及作用: table th:first-of-type { width: 200px; } table th:nth-of-type(2) { width: 140px; } ...

  2. webpack 的插件 DllPlugin 和 DllReferencePlugin

    在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间.所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库 ...

  3. 如何编写一个WebPack的插件原理及实践

    _ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 ...

  4. webpack中插件 prerender-spa-plugin 来进行SEO优化(二十四)

    vue.react对于开发单页应用来说带来了很好的用户的体验,但是同样有缺点,比如首页加载慢,白屏或SEO等问题的产生.为什么会出现这种情况呢?我们之前开发单页应用是这样开发的,比如首页 index. ...

  5. 使用 webpack 各种插件提升你的开发效率

    前沿 项目地址 vue-admin 欢迎 star 近几个月,接手了一个老项目的重构规划,有多老呢?就是前端青铜时代的项目,一个前后端都在同一个锅里的项目.完全没有使用任何的打包工具. 后台 php ...

  6. webpack拷贝插件 copy-webpack-plugin

    copy-webpack-plugin 安装 npm install --save-dev copy-webpack-plugin 作用:在webpack中拷贝文件和文件夹 from 定义要拷贝的源文 ...

  7. webpack的插件 http-webpack-plugin。 webpack-dev-server

    自动的生成: bundle.js  和 index.html 在该项目的目录下:npm init -yes npm install vue -D npm install webpack@3.12.0 ...

  8. webpack常用插件

    extract-text-wepback-plugin 该插件用于把css代码从页面中抽离出来,以link的形式从外部加载 html-webpack-plugin 可以自动快速地生成html文件

  9. webpack常用插件配置记录

    github仓库:https://github.com/llcMite/webpack.git 1)html-webpack-plugin    (用于模板生成html,自动引入output文件) c ...

随机推荐

  1. jQuery jsonp跨域请求详解

    跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...

  2. Redis的频道发布与消息订阅

    Redis的频道发布与消息订阅 官网介绍 进程间的一种通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 订阅/发布消息图 下图展示了频道channel1,以及订阅这个频道的三个客户端-c ...

  3. ipcclean - 从退出的PostgreSQL服务器中删除共享内存和信号灯

    SYNOPSIS ipcclean DESCRIPTION 描述 ipcclean 删除当前用户拥有的所有共享内存段和信号灯集. 它的目地是在 PostgreSQL 服务器 (postmaster(1 ...

  4. laravel5.8 源码分析(1) Route

    https://learnku.com/docs/laravel/5.8 源码路径 vendor\laravel\framework\src\Illuminate\Routing\Router.php ...

  5. Python杂章

    IDLE常用的快捷键: Ctrl+]:缩进代码 Ctrl+[:取消缩进 Alt+3:注释代码 Alt+4:去掉注释 F5:运行代码 Ctrl+Z:撤销一步 print('你好,Python!')

  6. Ansible批量部署工具

    Ansible:自动化运维工具 你需要在一台机器上yum install 一个包,这时候有一个需求,比如现在有5台机同时需要装apache这个包,那么100台呢,ssh上去就太慢了,这时候就借助到了a ...

  7. opencv-python用原图和mask实现抠图

    1.先上图 原图:test1.png mask图:test-mask.png 结果图:mask.png 2.代码部分 import cv2 from PIL import Image import n ...

  8. Vasya And The Matrix CodeForces - 1016D (思维+构造)

    Now Vasya is taking an exam in mathematics. In order to get a good mark, Vasya needs to guess the ma ...

  9. java高并发核心要点|系列4|CPU内存指令重排序(Memory Reordering)

    今天,我们来学习另一个重要的概念. CPU内存指令重排序(Memory Reordering) 什么叫重排序? 重排序的背景 我们知道现代CPU的主频越来越高,与cache的交互次数也越来越多.当CP ...

  10. Java注解Annotation与自定义注解详解

    Java注解简介 开发中经常使用到注解,在项目中也偶尔会见到过自定义注解,今天就来探讨一下这个注解是什么鬼,以及注解的应用场景和如何自定义注解. 下面列举开发中常见的注解 @Override:用于标识 ...