less-loader

处置惩罚代码中引入的less文件，经由过程对应的less模块，将less转变为css

css-loader

经由过程css-loader，使得在css中能够运用@import和url(...)的体式格局完成require()的功用

style-loader

style-loader将一切盘算后的款式到场页面中(将款式表嵌入webpack打包后的JS文件中即css和js会被打包到同一个文件中)

babel-loader

处置惩罚jsx文件，连系babel对jsx中的es6语法、jsx语法举行处置惩罚转换

file-loader

{
    test: /\.(eot|svg|ttf|woff2?)$/,
    use: ['file-loader?name=assets.fonts/[name].[ext']
}

• 在查询字符串参数中指定的途径下天生对应的文件(拷贝过去)

url-loader

关于比较小(url-loader的查询参数举行了限定)的图片，能够将其转换为base64情势，假如图片大小凌驾限定，那末webpack就会运用file-loader去处置惩罚文件，而且一切的查询参数都邑传递给file-loader，file-loader会在查询字符串参数中指定的途径天生对应的文件。

extract-loader

Extract text from bundle into a file.从打包后的js文件中提掏出特定的内容到一个新的文件中，须要合营file-loader运用，由file-loader指定提取文件的途径

html-loader

提取html文件，使其变成js代码。这个loader须要连系extract-loader和file-loader一同运用

{
    test: /\.html$/,
    use: [
        'file-loader?name=[name].html',
        'extract-loader',
        'html-loader'
    ]
}

上面的代码是webpack的一段设置代码，详细的作用是：起首经由html-loader：提取html代码，天生对应的js代码;然后经由extract-loader：抽掏出这部份html代码；末了经由file-loader，在file-loader的查询字符串参数指定的位置天生新的html文件。

• 为何一个html文件要经由上述loader的处置惩罚？

在开辟过程当中，我们将一切的代码、资本放在一个途径下，当打包后，会天生一个打包文件夹，个中包含了打包后的代码以及一切资本文件(image、fonts)。webpack在打包过程当中会将代码中资本的原始途径替换成资本的新途径(在打包文件夹下资本的途径)。html中假如存在<img>元素，而且运用的当地图片，在打包后我们愿望<img>元素的途径一样替换成对应资本的新途径，因而，须要经由上述loader的处置惩罚，当然在webpack.config.js文件的entry和output部份，一样得指定对应的html文件，以下所示

entry: {
    vendor: './src/vendor/index.js',
    // 将index.jsx和index.html文件打包到一同，在打包过程当中webpack会将index.html顺次经由html-loader、extract-loader、file-loader的处置惩罚
    xx: ['./src/xx/index.jsx', './src/xx/index.html']
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: '/'
    filename: 'assets/js/[name].js',
    chunkFilename: 'assets/js/chunk.[id].js',
  }

..... 省略

{
    test: /\.html$/,
    use: [
        'file-loader?name=[name].html',
        'extract-loader',
        'html-loader'
    ]
}

个人明白

webpack在打包项目的过程当中，会将一些代码、资本(css、image、fonts)经由过程extract-loader、file-loader、ExtractTextPlugin等一些loader和插件打包/复制到新的途径中去，webpack会将代码中的旧途径替换成新途径。