webpack中的加载器

最新推荐文章于 2025-09-16 07:00:00 发布

原创最新推荐文章于 2025-09-16 07:00:00 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文介绍了如何使用 Webpack 处理不同类型的前端资源文件，包括 CSS、Less、Sass 和图片字体等静态资源，同时涵盖了 JavaScript 高级语法转换及 HTML 文件的自动化生成。

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/}
        ]
    }
}