样式文件的打包方式

webpack入门（4）

样式文件的打包方式

直接上案例

样式文件的打包需要用到css-loader和style-loader

css-loader会帮我们分析出多个css文件之间的关系，并将她们打包成一个css文件，而style-loader会把生成的css文件插入到页面的header部分

在很多时候，我们并不会直接用css，而是使用更加方便的sass,less等css扩展语言，这也要用到loader来打包，如下：

注意：loader的执行顺序是从下到上，从右到左

有时候我们需要写一下transform这样的样式，为了兼容不同的浏览器，需要在样式前加一些前缀，可以通过postcss-loader来实现, postcss-loader可以搭配一个postcss.config.js配置文件来使用

postcss.config.js的plugin可以是对象也可以是数组，安装一个autoprefixer插件来帮助我们自动添加前缀