在入门使用中，我们使用Webpack构建了一个模块化项目：

目录结构如下：

|-- index.html

|-- main.js

|-- show.js

|-- webpack.config.js

那么，如今我们需要引入index.css文件，目录结构如下：

|-- index.html

|-- index.css

|-- main.js

|-- show.js

|-- webpack.config.js

由于Webpack不原生支持解析css文件，如果要支持非JS类型的文件，则需要使用Webpack的Loader机制。示例如下：

index.css

#id {
    color: red;
}

webpack.config.js修改如下：

const path =  require('path');

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
    },
    module: {
        rules: [
            {
                // 使用正则匹配要用该Loader转换的css文件
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            }
        ],
    },
};

《webpack学习》- 入门使用Loader_数组

《webpack学习》- 入门使用Loader_数组_02

在执行webapck前先执行​​npm i -D style-loader css-loader​​。

Loader可以看作具有文件转换功能的翻译员，配置里的module.rules数组配置了一组规则，告诉Webpack在遇到哪些文件时使用哪些Loader去加载和转换。注意事项：


  • use属性的值需要是一个由Loader名称组成的数组，Loader的执行顺序是由后到前的

这里会把css文件也打包进bundle.js里面，这样子如果把所有文件都打包进js文件，js文件会越变越大，如果想让webpack单独输出css文件，需要使用plugin，下一章节介绍。