webpack最佳入门实践系列(05)

5.loader

5.1.什么是loader？

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块。

在更高层面，在 webpack 的配置中 loader 有两个目标。

1. 识别出应该被对应的 loader 进行转换的那些文件。(使用 test 属性)
2. 转换这些文件，从而使其能够被添加到依赖图中（并且最终添加到 bundle 中）(use 属性)

总结：有了loader，webpack就会把非js文件也看成是模块，并且可以引用它

5.2.支持css文件打包

安装css-loader

npm install css-loader --save-dev

　　

修改webpack.config.js文件，添加css-loader配置项

 module:{
        rules: [
           { 
               test: /\.css$/,
               use: ['css-loader']
           }
        ]
    }

　　

完整webpack.config.js文件：

const path = require("path")


const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html'
        })
    ],
    devServer:{
        open: true,
        contentBase: './dist'
    },
    module:{
        rules: [
           { 
               test: /\.css$/,
               use: ['css-loader']
           }
        ]
    }

}

　　

配置完成后，测试是否生效，首先新建index.css，添加内容：

body{
    background: #009f95
}

　　

在index.js文件中引入 index.css文件

import module_1 from './module_1'
import module_2 from './module_2'
import module_3 from './module_3'

document.write("hello world")
import "./index.css"

module_1()
module_2()
module_3()

　　

运行命令，查看效果：

npm start

　　

此时，发现并没有任何效果，原因是css-loader只负责把css文件打包到js中，并没有加入到index.html结构中， 还需要引入style-loader来处理，让style样式加入到index.html结构中

npm install style-loader --save-dev

　　

接下来，需要把style-loader配置到webpack.config.js文件中

module:{
        rules: [
           { 
               test: /\.css$/,
               use: ['style-loader','css-loader']
           }
        ]
    }

　　

再次运行，查看结果

npm start