webpack官网文档重点总结

One Getting Started

对于import和export,webpack2.0已经支持,会自动自持转换,所以对这两个命令,不需要额外的es6 babel编译器的支持,但是对于其它的命令,则需要另外安装依赖包。

webpack有自己的cli可执行命令:
最原始的命令是:./node_modules/.bin/webpack src/index.js dist/bundle.js

增加了webpack.config.js的命令是 :./node_modules/.bin/webpack --config webpack.config.js

修改了package.json后的命令是:npm run build

【扩展】
npm --save-dev的区别
https://www.cnblogs.com/hollen/p/5956012.html
npm init -y 跳过询问,直接生成package.json

遇到的问题:
entry路径写错
console面板报错信息:Can't resolve 'src/index.js' in 'D:\webpack\webpack-demo'


webpack官网文档重点总结_第1张图片
entry路径错误

webpack官网文档重点总结_第2张图片
entry路径正确

Two asset management

webpack的加载器有css,文件(图片,字体),数据。再使用前,必须先npm install一下相应的包,再在webpack.config,js中的module中引入相应的包。
遇到的问题:
css样式引用错误

webpack官网文档重点总结_第3张图片
错误引用

webpack官网文档重点总结_第4张图片
正确引用

【扩展】
搜索css3中@font-face,可以得到font-face相关的内容
https://www.w3cplus.com/content/css3-font-face

本文参考链接:https://webpack.js.org/guides/asset-management/#loading-images
未完待续

你可能感兴趣的:(webpack官网文档重点总结)