复习webpack4之静态资源打包（上）

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.静态资源打包

1.1 引入css样式文件

当我们的项目中引入css文件的时候，需要对webpack进行配置，用来打包css文件。css的loader是css-loader和style-loader。

css-loader的作用是：帮我们分析出几个css之间的关系，最终把几个css文件合并成一个css。

style-loader的作用是：得到css-loader生成的css内容后，style-loader会把内容挂载到head上。

所以style-loader和css-loader要配合使用。

1.2 引入scss样式文件

注意：使用scss要安装sass-loader和node-sass。

1.3 自动补充厂商前缀

css3属性一般都会加常上前缀，而 postcss-loader可以自动帮我们添加厂商前缀。

使用方法：在webpack.config.js同级目录新建一个postcss.config.js

2.loader的执行顺序

loader执行顺序是：从下到上，从右到左。

以上面scss作为例子，sass-loader先执行，对scss文件进行翻译，翻译为css代码后给到css-loader，都处理好了之后，由style-loader挂载到页面上。

转载于:https://juejin.im/post/5cb47ce3f265da0394449ead