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

  • 相关阅读:
    linux 短信收发
    sama5d3 环境检测 adc测试
    【Codeforces 723C】Polycarp at the Radio 贪心
    【Codeforces 723B】Text Document Analysis 模拟
    【USACO 2.2】Preface Numbering (找规律)
    【Codeforces 722C】Destroying Array (数据结构、set)
    【USACO 2.1】Hamming Codes
    【USACO 2.1】Healthy Holsteins
    【USACO 2.1】Sorting A Three-Valued Sequence
    【USACO 2.1】Ordered Fractions
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10985798.html
Copyright © 2011-2022 走看看