本篇文章主要介绍了webpack与spa实践之管理css等资源的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
上一篇介绍了如何使用webpack搭建一个稳定的支持本地服务、自动刷新、模块热替换、使用ES6编写JavaScript的开发环境，本篇主要介绍webpack如何处理HTML应用三大元素的另一元素 – CSS及其他诸如图片、字体文件或者数据配置文件等资源。
前言
在学习使用webpack时，我们需要明白无论它怎么设计，它的工作原理、流程是什么，最根本的它处理的还是HTML文档中的HTML标签、JavaScript、CSS、图片等资源，而且最终的处理结果依然必须是一个HTML文档，包括DOM、JavaScript、CSS，而CSS在文档中的存在方式，有三种：行内样式，内联样式，外链样式，行内样式使用方式早已不推荐，所以webpack处理CSS方式也就两种：
-
内联样式： 以
立即学习“前端免费学习笔记（深入）”；
外链样式： 打包生成CSS文件，通过标签引入样式；
webpack与CSS
我们知道，webpack本质是只能处理JavaScript的，而对于其他资源，需要使用加载器和插件将其处理成JavaScript模块，然后进行模块依赖管理。webpack提供style-loader和css-loader两个加载器支持我们模块化CSS，因此可以在其他模块内直接引入。
安装
npm install --save-dev style-loader css-loader
配置
在webpack配置文件的模块加载器选项中添加如下配置：
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}当然为了方便使用引用路径，还可以配置路径片段别名：
alias: {
styles: path.resolve(__dirname, 'src/styles/')
}此时，import 'styles/index.css';等同于使用相对路径，如import '../src/styles/indx.css';
使用
配置好以后，假如我们在styles目录下创建了一个index.css文件，现在可以在JavaScript文件中直接引入该CSS: import 'styles/index.css'; 或 require('styles/index.css');
css内容如下：
html, body {
width: 100%;
height: 100%;
}
.container {
color: red;
}页面展示如图：
内联样式
前面提到了webpack处理CSS的方式有两种，第一种是以内联方式在页面
标签内动态插入
