脚本宝典收集整理的这篇文章主要介绍了webpack初使用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前端工程化
在网页比较简单的时代,以文件可以包含 HTML、CSS、JS;到后来结构、样式、行为的分离,文件开始多起来,慢慢的出现了amD,CMD ,CommonJS,ES6 Module等,技术变化日新月异,把这些技术统一整合起来,就是工程化。
引用网上一作者的话:
将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的。
node-sass
首先安装node-sass
npm install node-sass
运行命令行,就能将scss
文件变成css
文件
npx node-sass src/css/style.scss dist/css/style.css
当我scss
文件变动,自动更新为css
文件
npx node-sass src/css/style.scss -w dist/css/style.css
生成map
文件
npx node-sass src/css/style.scss -w dist/css/style.css --source-map true
在这里遇到最大的问题是没有弄清楚全局安装和局部安装,陷入了好久
npm install -g node-sass
是全局安装,可以直接使用node-sass
npm install node-sass
是局部安装,使用时需要加上相对路径./node_modules/.bin/node-sass
;或者使用npx node-sass
,npx
可以快速找到相对路径。
提示no such file or directory, open '/Users/mac/package.json'
,是因为缺少package.json
这个文件。