zoukankan      html  css  js  c++  java
  • 总结 webpack 的插件

      模块化第一步  初始化 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

  • 相关阅读:
    【PHP】php重写session的存储机制
    【Javascript】原生js 全特效微博发布面板效果实现
    【Javascript】原生js百叶窗效果的实现及原理介绍
    【jQuery】jquery全屏滚动插件【fullPage.js】API 使用方法总结
    从百度音乐和酷狗音乐的分类想到的
    jQuer __Ajax DOM
    面向对象闭包 继承
    Git
    设计模式
    html5标签大全
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10985798.html
Copyright © 2011-2022 走看看