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文件。
参考:http://babeljs.io/docs/setup/#installation
配置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文件:
https://www.npmjs.com/package/postcss-loader
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:压缩图片。
使用方法:https://www.npmjs.com/package/image-webpack-loader
10、webpack-config.js配置文件:
context:默认为执行脚本的文件目录。