资源管理
如果你从一开始就跟着教程做， 你现在已经有一个叫做"Hello webpack"的小项目了， 现在让我们尝试处理其他的资源，像是 images，看看他们是如何被处理的。
在webpack之前， 前端开发者会使用grunt 、gulp之类的工具去处理这些资源文件， 并且把他们从/src 目录移动到 /dist 甚至是 /build 目录。 当然这个想法也同样用于处理Javascript模块， 但是像是webpack这类工具会动态构建所有依赖项目（创建之前说过的 依赖图像），这简直棒极了，因为所有模块现在显式地声明它地依赖项，这样我们就可以避免把不必要地依赖项构建到当前项目中去。
webpack最棒的一个特性是， 只要有loader，你可以包含任何类型的文件到当前模块，而不仅仅Javascript 。 这就意味着对于任何用于JavaScript的好东西（像是显式声明依赖项）可以同样接受所有东西，去构建你的网站或者app， 让我们先从css开始吧， 你可以已经对此步骤非常熟悉了。
构建
首先对我们之前使用的项目做一些微小的更改：
- Getting Started
+ Asset Management
-
+
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
- filename: 'main.js',
+ filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
加载 CSS
为了将一个css 引入到JavaScript模块中， 你需要将 style-loader 以及 css-loader 安装并且添加到你的 module configuration 中：
npm install --save-dev style-loader css-loader
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
webpack 使用常规的表达式去检测那个文件应该被查找，并且将它推送给指定的loader去处理。这样的话任何以.css 结尾的文件都会被分配给 style-loader 和 css-loader 。
这可以让你成功引入 style.css( import './style.css') 文件到需要该样式的模块中。现在一旦模块运行，一个包含字符化css的