webpack 打包样式(3)

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中 loader 有两个属性：

本节要实现的功能：

rules执行顺序由右往左，由下往上。所以会先执行 sass-loader -> css-loader -> style-loader

将 欢迎来到瓦力博客 加一点样式，让文字的颜色变红，水平居中

在 webpack.config.js 文件中处理css文件规则写好后，我们还需要安装 style-loader 、 css-loader loader。安装方式如下。如果想要了解 style-loader {:target="_blank"}、 css-loader {:target="_blank"}

看到命令框输出的信息中包含 ./src/index.js 和 ./src/assets/css/index.css 就说明css样式被打包到了main.js文件中。接下来手动打开 dist/index.html 文件

在 assets 目录下面新增 sass 目录，然后在 sass 目录下新建一个 index.scss

将字体颜色变成白色，背景色变为蓝色。

在这里解释一下 importLoaders:2，当a.scss文件中有 @improt b.scss文件时，需要重新加载css-loader前两个loader插件，在这里就是sass-loader，因为执行顺序是由下往上，由右往左

在 assets 目录下面新增 less 目录，然后在 less 目录下新建一个 index.less

将字体颜色变黑，然后添加一个红色的边框

不管是写 css , sass , less , postCss 样式，在css3新特性下，我们是要添加浏览器厂商前缀的。如果没有浏览器厂商前缀，同一套样式不同浏览器展现的样式是不同的。之前写css都是手动添加，那样子实在是太繁琐了。

从小菜的截图中可以看到 css 、 less 、 scss 文件。css3新属性的浏览器厂商前缀已经添加上了。

其实有两种方案：第一种是将 css 文件在 js entry 中添加依赖；第二种直接设置 css entry。

第一种方案

// index.jsimport 'normalize.css'

...

// webpack config{ entry: {index: './index.js'

},

...

}

// outputindex.jsindex.css

这种是 Webpack 官方推荐的方案，但是每次都要把 css 放到 js entry 中才可以 extract 出来。

第二种方案（直接设置 css entry）

默认 Webpack 设置 css entry 除了 extract 出 css 文件还会多产生一个 js 文件，其实可以写个 Webpack 插件将其删除就可以了。

不能。HTML可能经过文本压缩及字符转换。CSS可能做过自动追加前缀，压缩，或者根本就是用预编译器写出来的。Javascript可能经过压缩，优化。另外，如果打包配置中未设置pathinfo为true的话，将不会包含源文件路径。就算多增加一个空格也和原始的不同了吧？不过，当webpack打包时，可以配置生成.map文件，使用此文件可以还原原文件。你需要问原作者索要。

---