配置webpack小记

首先，先在心里骂一句 mmp；然后在变回佛系的自己。（切记一定要在凉快的环境里安装，不然火气大会伤身）。主要分为安装插件和写配置文档webpack.config.js

1.先看官方文档https://webpack.docschina.org/concepts/

了解到webpack的概念，及四个关键词

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

2.配合这位同学的安装步骤https://zhuanlan.zhihu.com/p/30701816作为参考，为什么是参考呢，因为他装的webpack不知道是哪个版本，所以你照着他的步子很可能会报错然后你还不知道错在哪里。

安装：直接搜webpack github

插件：搜webpack babel github

搜webpack scss gitHub （注意要配合npm install style-loader c ss-loader --save-dev另外两个插件使用）

配置：直接搜webpack babel example/webpack scss example；

运行：在命令行中输入：node_modules/.bin/webpack（局部使用）

总结：要配好config，真的要好好看文档的四个关键词，理解清楚后就看得懂了。

个人配置成功的案例

其它相关：

SASS

语法

1.可以嵌套

body{background: pink;

h1{color: red}

}

一些命令行 node-sass test.scss test.css 将scss文件翻译成css文件

node-sass test.scss test.css -w test.scss scss翻译成成css的自动化

更多命令行https://github.com/sass/node-sass

sass和scss的关系：

Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”（就是，没有大括号），与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。

sass 维基百科https://zh.wikipedia.org/wiki/Sass

babel

安装https://babeljs.io/docs/setup#installation

webpack

命令行：

npx webpack                当前目录下的webpack