webapck基础随手记

Posted 不由分说

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:默认为执行脚本的文件目录。
 

以上是关于webapck基础随手记的主要内容,如果未能解决你的问题,请参考以下文章

Mock随手记

基础知识1121下午随手记

安卓随手记如何筛选报表

随手记下载|随手记app下载

随手记下载|随手记app下载

随手记一 2018/04/23 Ajax基础了解