webpack中的加载器

1.通过loader打包非js模块

2.加载器的基本使用

（1）打包处理css文件

• use数组中指定的loader的顺序是固定的
• 多个loader的调用顺序是从后往前调用

（2）打包处理less文件

（3）打包处理sass文件

（4）配置postCSS自动添加CSS的兼容前缀

可以兼容其他浏览器

postcss.config.js:

const autoprefixer = require('autoprefixer')

module.exports = {
    plugins:[autoprefixer]
}

（5）打包样式表中的图片和字体文件

（6）打包处理js文件中的高级语法

babel.config.js:

module.exports = {
    presets:['@bable/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

 

webpack.config.js:

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
    template:'./src/index.html',
    filename:'index.html'
})

module.exports = {
    mode: 'development',
    // 上线时要将development改为production
    entry: path.join(__dirname,'./src/index.js'),//输入文件存放路径
    output: {
        path: path.join(__dirname,'./dist/'),//输出文件存放路径
        filename: 'bundle.js'//输出文件的名称
    },
    plugins:[htmlPlugin],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16941'},
            {test:/\.js$/,use:'babel-loader', exclude:/node_modules/}
        ]
    }
}