在上篇文章的结尾，说到webpack不能够打包css文件，这是webpack 只能理解 JavaScript 和 JSON 文件。那么对于其他类型的文件如css，我们需要借助loader来处理。

loader

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

配置loader

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.css$/,
                // loader的执行顺序是从右到左
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

loader的执行顺序是从右到左，所以最右侧的loader读的是源文件的内容，最左侧的loader一定会返回一个js或json模块

打包

1.安装插件

cnpm install style-loader css-loader -D

2.执行打包

执行npm run build发现可以正常打包，更新了dist目录，里面有main.js。

打包了之后，如果我们要使用这个main.js，还需要手动在dist文件夹中去创建html文件，引入main.js。如果想要自动生成.html文件并引入main.js，需要使用到plugin插件。

plugin

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量

配置plugin

1.在src中新建index.html

2.更新配置文件webpack.config.js

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
]

打包

1.安装插件来实现自动引入的功能

npm install html-webpack-plugin -D

2. 指定打包

执行npm run build，发现打包出的index.html文件自动引入了main.js。

其实这个index.html打包出来是压缩的，上面的图是为了显示效果格式化后的。

那么我们如果配置打包出的文件时压缩还是不压缩呢，需要用到mode，即模式配置，详情见下篇文章。

webpack | 2基础配置- loader和plugin