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基础随手记的主要内容，如果未能解决你的问题，请参考以下文章