webpack中loaders

webpack的loaders是一大特色，也是很重要的一部分。这遍博客我将分类讲解一些常用的loader

一、loaders之 预处理

css-loader 处理css中路径引用等问题

style-loader 动态把样式写入css

sass-loader scss编译器

less-loader less编译器

postcss-loader scss再处理

npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader

栗子:

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/,

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

      }

    ]

  }

}

module.exports = {

  module: {

    rules: [

      {

        test: /\.less$/,

        use: [

          'style-loader',

          { loader: 'css-loader', options: { importLoaders: 1 } },

          'less-loader'

        ]

      }

    ]

  }

}

 

二、loaders之js处理

babel-loader

npm install --save-dev babel-core babel-preset-env babel-loader

栗子

新建一个名字为.babelrc的文件

{

  "presets": ["env"]

}

新建一个名字为webpack.config.js文件

 module: {

      rules:[

          {

              test:/\.js$/,

              use:{

                  loader:'babel-loader',

                  options:{

                      presets:['env']

                  }

              },

              //exclude: /node_modules/,

              exclude:path.resolve(__dirname,'node_module'),

             // include:__dirname+'/src/',

              include:path.resolve(__dirname,'src'),

          }

      ]

    }

 

三、loaders之json处理

json-loader

npm install --save-dev json-loader

module.exports = {

  module: {

    rules: [

      {

        test: /\.json$/,

        use: 'json-loader'

      }

    ]

  }

}

 

四、loaders之html处理

html-loader

npm i -D html-loader

test:/\.html$/,
use:'html-loader'