webpack loader

接着上一篇文章，我们继续充实webpack

本篇文章将说明如何使用webpack打包css文件

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader

第一步：下载依赖的库

cnpm install css-loader style-loader

不添加 -g ,则下载依赖包至当前文件夹内

如果添加 -g 则安装至全局 (用户目录下某个文件夹内创建node_modules)

系统的npm学习可移步至官网

第二步：创建css文件

body{
    background: red;
}

第三步：修改webpack.config.js文件

module.exports = {
    mode:"development",
    entry:"./index1.js",
    output:{
        path:__dirname,
        filename:"bundle.js"
    },
    module:{
        rules:[
            { test: /\.css$/, loader: "style-loader!css-loader"  },
        ]
    }
};

可以看到，添加了module相关
老样子，至官网查看相关字段含义说明

第四步：在js中引用css文件

我们要在index1.js中添加css的引用，因为webpack打包入口我们就指定的index1.js

index1.js文件添加如下一行内容

第五步：webpack打包

PS E:\webpack> webpack
Hash: dcaebb96073ac081d194
Version: webpack 4.29.6
Time: 408ms
Built at: 2019-04-04 12:23:39
    Asset      Size  Chunks             Chunk Names
bundle.js  24.1 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./index1.js] 113 bytes {main} [built]
[./index2.js] 56 bytes {main} [built]
[./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js!./style.css] 191 bytes {main} [built]
[./style.css] 1.13 KiB {main} [built]
    + 3 hidden modules
PS E:\webpack>

输出可见，编译了四个文件

最后，我们看一下效果