zoukankan      html  css  js  c++  java
  • webapck基础随手记

    1、webpack main.js main.bundle.js ; 将main.js打包成main.bundle.js;
         Hash:本次打包的哈希值
         Version:本次打包所使用的webpack的版本。
         Time:本次打包所花费的时间
         Asset:打包生成的文件;
         Chunks:打包的分块;
         Chunk Names:本次打包的块名称。
    2、除js文件的引用外,其他类型的文件类型在require时必须指定相应的loader;
         css-loader:使webpack能够处理.css的文件;
         style-loader:将css-loader处理的css文件插入到页面当中。
    3、webpack --config webpack.dev.config.js 指定打包的配置文件。
    4、自动替换html文件里的js引用路径:
         使用插件:html-webpack-plugin
         npm 安装插件——在plugins中调用。
         参数:template:指定html文件的模板;
                   filename:指定生成文件的名称;支持[hash]占位符。
                   inject:指定插入脚本文件的位置:在'head'还是'body'中。
                   minify:对文件进行压缩。
                           removeComments:true //删除注释
                        collapseWhitespace:true    //删除标签之间的空白空格
                   chunks:指定需要加载的chunk文件。
                   excluedChunks:指定不加载某些 chunk文件。
    5、使用bable处理js文件。
         直接在webapck-config.js配置文件中指定处理js文件的loader为bable-loader;
          最好指定:exclued:'绝对路径':不处理某些目录的js文件。
                          inclued:' 绝对路径 ':只处理某些目录的js文件。
         配置bable参数的三种方式:
              在webpack-config.js的loader里,指定bable的query参数。
              在项目根目录添加.babelrc配置文件。
              在项目的package.json里指定bable的配置参数。
    6、 绝对路径 :关于nodejs里的path:
         var path = require('path');
          path.resolve(__dirname,'src');          // resolve:解析  __dirname:当前运行环境的目录
    7、使用postcss处理css文件:
    8、处理模板文件:
    9、处理图片文件:
         CSS里的背景图片: 指定loader:file-loader,图片使用源文件的相对路径。
         模板文件中的img标签:不会被loader自动处理。需要用requier的方式。
                   例:<img src="${require('../images/bg.jpg')}">
         根index.html里的img标签: 指定loader:file-loader,图片使用源文件的相对路径。
         关于file-loader的用法:https://www.npmjs.com/package/file-loader
         关于url-loader:与file-loader用法一致,但可以指定limit参数。
              当大于设置的limit时会直接调用file-loader处理,
              当文件小于设置的limit时,会把图片或文件转为base64编码的形式。(不再是URL)
         关于image-webapck-loader:压缩图片。
    10、webpack-config.js配置文件:
         context:默认为执行脚本的文件目录。
     
    深入学习:
    http://blog.hugzh.com/2016/05/02/webpack%E5%AD%A6%E4%B9%A0%E5%AE%9E%E8%B7%B5%E7%B3%BB%E5%88%97-%E4%B8%80/
     http://www.css88.com/doc/webpack2/
  • 相关阅读:
    TCP三次握手与四次挥手
    centos7快捷键
    关于学习简单讲解的个人观点
    继承与派生
    python封装
    python之面向对象编程
    python之re模块
    python之hashlib、suprocess模块
    python之shelve、xml、configparser模块
    python之json、pickle模块
  • 原文地址:https://www.cnblogs.com/newh5/p/6939821.html
Copyright © 2011-2022 走看看