美文网首页webpack 4
Webpack 4 学习05(打包css)

Webpack 4 学习05(打包css)

作者: 邢走在云端 | 来源:发表于2019-02-21 13:34 被阅读0次

    webpack 自身只理解 JavaScript, 想让 webpack 能够去处理那些非 JavaScript 文件,我们将使用到loader

    loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

    • 安装loader

      npm install style-loader css-loader --save-dev

    • 配置loader

      • webpack.config.js文件里配置module中的rules,如下:

        • test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
        • use 属性,表示进行转换时,应该使用哪个 loader。
        module.exports = {
            /*入口和出口文件可以不用配置,默认*/
        
            module:{
              rules:[
                {
                  test:/\.css$/,
                  use:['style-loader','css-loader']//引入的顺序至关重要,不可改变
                }
              ]
            }
        }
        
        
    • 测试是否打包成功

      • src下创建index.css文件

        image
      • index.js中引入index.css文件

        require('!style-loader!css-loader!./index.css');

        image

    相关文章

      网友评论

        本文标题:Webpack 4 学习05(打包css)

        本文链接:https://www.haomeiwen.com/subject/kryryqtx.html