webpack （三）插件

 CSS-loader 插件

安装

css-loader 依赖于style-loader 所以两个需要一起安装

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

webpack.config.js 配置文件

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

**********************

less插件 

安装

npm install --save-dev less-loader less

 配置

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

*********************

scss插件

安装 sass-loader ：

npm i sass-loader -D

需要安装 node-sass 依赖：(可能用npm安装不了，需要使用cnpm)

npm i node-sass -D

配置

      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', "sass-loader"]
      }

*********************

处理URL(图片)

安装

npm i url-loader file-loader -D

配置

      {
        test: /\.(png|jpg|gif)$/,
        use: "url-loader?limit=3450&name=[hash:8][name].[ext]"
                          //图片大小 //随机生成8位数，避免文件名重复
      }

*********************

处理bootstrap.css

安装

npm i bootstrap@3.3.7 -S

配置

{
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        use: "url-loader"
      }

main.js引入bootsrap

import "bootstrap/dist/css/bootstrap.css"

*********************

处理bootstrap.js

import "bootstrap/dist/js/bootstrap.js"

但是导入后bootstrap识别不到jquery，就需要插件（webpack自带的，不需要安装）

在webpack.config.js中先导入webpack模块,然后如下配置，在全局范围内导入jquery

new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })