webpack简单入门(二)--loader的使用

靓仔芳
714 阅读2分钟

上一篇文章我们讲了webpack的安装以及基本配置。今天我们来讲一下loader, webpack不使用loader的话, 默认只支持js文件和JSON格式文件。对css, html等格式的文件是无能为力的。我们可以制定对应的loader来加载不同格式的文件并将他们转换成有效的模块。这里的话来说一下如何加载css文件。

安装

加载css文件要用到css-loader, 我们先安装css-loader

npm/cnpm install css-loader -D

cnpm安装方式可以看我上一篇文章 webpack简单入门（一）

配置

为了方便管理, 我们可以把webpack的配置统一写在webpack.config.js中, module.rules中允许我们配置多个loader, 以后维护起来也比较方便。

const path = require('path') // node里面的一些模块


// 导出配置信息 使用CommonJS规范
module.exports = {
  entry: './src/main.js',   // 入口文件, 默认为index
  output: {
    filename: "bundle.js",    // 打包后的文件名
    path: path.resolve(__dirname, './dist')  // 打包所在的目录, __dirname当前模块的目录名
  },
  module: {
      rules: [
        {
          test: /\.css$/,   //  对文件进行匹配, 通常设置正则表达式
          use: [   // 对应一个数组
            // 配置不同loader
            /* 
            对象属性：
                loader: loader名, 必填, 值是一个字符串, 
                options: 配置信息, 可选, 值是一个字符串或者对象, 值会被传入loader中,
                query: 目前已经被options替代
            */
            { loader: 'css-loader'}  
            // 'css-loader', 也可以这样写
          ]
        }
      ]
  }
}

到此可以正常加载css文件, 但是我们在一个html引入打包后的js文件发现main.js引入的css文件的样式是不生效的。

image.png

image.png

这是因为css-loader只是负责加载解析css文件,并不会将解析后的css插入页面, 如果想要完成style插入, 还需要用到style-loader。

style-loader

安装 : npm/cnpm install style-loader -D

配置 :

    use: [   
        { loader: 'style-loader' },
        { loader: 'css-loader' }  
    ]

image.png

样式可以正常显示

注意 : loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将style- loader写到css-loader的前面(先加载css文件, 再把样式插入页面)

less/scss/Stylus-loader

在开发中我们一般使用scss, less, stylus这些预处理器来编写css样式, 这里以less文件为例, 如果要把less文件编译成css, 要安装less和less-loader(不同css预处理器对应不同loader)

安装 : npm/cnpm install less less-loader -D

配置 ：

      {
         test: /\.(less|css)$/,
         use: [
           "style-loader",
           "css-loader",
           "less-loader"
         ]
       }
    ]

scss文件 --> 编译成 css文件 --> 加载解析css文件 --> 加入页面

postcss

postcss是一个通过javascript来转换样式的工具, 这个工具可以帮我们进行一些css的转换和适配 ; 比如给CSS规则添加特定厂商的前缀, 兼容css新特性等 ; 实现这些功能需要借助不同的postcss插件。

安装 ： npm/cnpm install postcss-loader -D

如果我们要添加前缀, 要安装autoprefixer插件 npm/cnpm install autoprefixer -D

配置：


{
    test: /\.(less|css)$/,
    use: [
        "style-loader",
        "css-loader",
        "less-loader",
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        require('autoprefixer')
                        // "autoprefixer"   // 这样写也行
                    ]
                }
            }
            
        }
    ]
}

image.png

我们也可以将这些配置信息放到一个文件中, 新建一个postcss.config.js文件

{
    test: /\.(less|css)$/,
    use: [
        "style-loader",
        "css-loader",
        "less-loader",
        "postcss-loader"
    ]
}

image.png

postcss-preset-env

  • 自动帮助我们添加autoprefixer（相当于已经内置了autoprefixer）
  • 能够将一些新的css特性转成大多数浏览器认识的css ； 并且会根据目标浏览器或者运行时环境 添加所需的polyfill(指的是一个代码块。这个代码块向开发者提供了一种技术， 这种技术可以让浏览器提供原生支持，抹平不同浏览器对API兼容性的差异)

安装： npm/cnpm install postcss-preset-env -D 配置：

    plugins: [
        require("postcss-preset-env"),
        // 或者 "postcss-preset-env"
    ]

参考资料:

avatar
文章
阅读
粉丝