webpack中常见loader配置

一、如果想要打包CSS文件，需要安装两个插件

style-loader 和css-loader

cnpm install style-loader css-loader -D

二、配置webpack.config.json文件
在该文件module.export下有一个配置节点对象，module，该节点有一个rules属性，该属性是一个数组，存放了所有第三方文件的匹配和处理规则。

rules数组中每一个对象都有两个属性

test属性用于指定需要匹配文件的正则，

use属性用于指定对应文件需要处理的插件名称

如：

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
    },
    mode: 'development',
    devServer: {
        open: true,
        port: 8080,
        hot: true,
        contentBase: 'src'
    },
    plugins: [
        new htmlWebpackPlugin({
        template: path.join(__dirname, './src/index.html'),
        filename: 'index.html' //指定生成页面的名称
        })
    ],
    module: {    //在这里
        rules: [       
            {test: /\.css$/, use:['style-loader', 'css-loader']}  //匹配CSS文件
        ]
    }
}

二、常见loader配置

1、less
需安装loader：style-loader css-loader less-loader 及less-loader的依赖less
配置项：{test:/.less$/, use:[‘style-loader’, ‘css-loader’, ‘less-loader’]}

2、sass
需安装loader: style-loader css-loader sass-loader 及less-loader的依赖node-sass

配置项：

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

3、图片路径
需安装loader：url-loader 及 url-loader的依赖项 file-loader

配置项：

{test:/\.(jpg|gif|jpeg|png)$/, use: ['url-loader?limit=size&name=[hash]-[name].[ext]']}

limit是给定的值是图片的大小，如果我们给定的值大于图片本身的大小，则不会转化为base64，如果小于给定的值，则会转化为base64值
name不写则表示用webpack给我指定的hash值替代图片名称

4、字体文件

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

5、JS文件（将ES6及以后高级语法转化为兼容性好的低级语法）

babel 7.x问题
1.babel

在 babel7中，统一使用 @babel/preset-*** ，在 webpack配置中 preset-env配合 babel-loader 就可以转换 ES2015+ 语法了。 按照相应格式安装相应包即可，如果你需要解释打包js的类，你还需要安装@babel/plugin-proposal-class-properties 。

cnpm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
cnpm i @babel/polyfill @babel/runtime -S
cnpm i @babel/plugin-proposal-class-properties

配置.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties",]
}

如果需要了解更多，比如使用 targets 设定目标浏览器决定需要兼容的功能等等 可以参考文章https://blog.youkuaiyun.com/hrgzhy/article/details/91503951

6、vue文件

安装第三方loader
cnpm i vue -S
cnpm i vue-loader vue-template-compiler -D

一个解析以.vue后缀的文件，后边是解析template模板的。

在webpack的配置文件webpack.config.js中配置loader配置项
{
test:/.vue$/,
use:‘vue-loader’ //处理 .vue 文件的 loader
}
这个时候运行，发现还是报错，例如：

ReferenceError: VueLoaderPlugin is not defined
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
解决方案
遇到上边的错，不用慌，还缺少两个配置。因为在vue-loader@15.x 版本，有些东西必须要配置。

打开webpack的配置文件 webpack.config.js：

//这两个随便引入一个就行

const VueLoaderPlugin = require('vue-loader/lib/plugin');
或者
const { VueLoaderPlugin } = require('vue-loader');

然后还在此文件中配置 plugins 节点

plugins:[
	new VueLoaderPlugin()
]

解决方案2
//安装指定版本的loader，就不用配置以上内容

cnpm i vue-loader@14.1.1 vue-template-compiler@2.5.17 -D