webpack配置资源(css，less，img...)

一、webpack中使用css

1 、安装

style-loader 将模块的导出作为样式添加到 DOM 中

css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码

所以： 一般两者结合使用

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

2、配置

loader解析，从右向左，所以正确写法 ：use: [ ‘style-loader’, ‘css-loader’ ]

错误写法 use: [ ‘css-loader’ , ‘style-loader’]

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

二、webpack中使用 less

1 、安装

npm install --save-dev less-loader less

2 、配置

正确姿势： less-loader -> css-loader -> style-loader 链式调用，可以把所有样式立即应用于 DOM。

// webpack.config.js
module.exports = {
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

三、webpack中使用 img

1 、安装

npm install --save-dev url-loader

2 、配置

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回DataUrl

如下：当文件小于8Kb 时，使用url-loader加载

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name:'img/[name].[hash:8].[ext]'  //打包后命名规则，ext：扩展名
            }
          }
        ]
      }
    ]
  }
}

当文件大于自己配置时，使用file-loader

3 、安装

npm install --save-dev file-loader

4 、配置

此时的图片会打包到dist目录，如果代码中使用’…/img/xx.jpg’这种引用，可能会出现404

注意配置publicPath，如：publicPath:‘dist/’

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  }
}

---

总结

每天记录一点，从小小菜鸟变小菜鸟！！！