webpack 之loader

Posted 2021-03-09 cl94

 

webpack的作用：
    是 用来处理我们写的js代码。并且会自动处理js之间相关的依赖。

        但是，开发中我们不仅仅有基本的js代码处理，还需要加载css，图片，也包括一些高级的
    将ES6转成ES5代码，将Typescript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成
    js文件等等。这时候就需要给webpack拓展对应的loader

loader使用过程：
    步骤一：通过npm安装需要使用的loader  
        npm install --save-dev css-loader
        npm install --save-dev style-loader

        npm install --save-dev url-loader
        npm install --save-dev file-loader
        // es6 => es5
        npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
    步骤二：在webpack.config.js中的module关键字下进行配置

        const path = require(\'path\'); // 导入path模块 ，由于依赖node，所以必须要有package.json，即创建项目

        module.exports = {
            entry : \'./src/index.js\', // 入口
            output : {
                path : path.resolve(__dirname,\'dist\'), // 这里必须用绝对路径
                filename : \'bundle.js\', // 出口,
                publicPath: \'dist/\', //  配置url文件路径
            },
            module:{
                rules:[
                    {
                        test:/\\.css$/,
                        // css-loader只负责将css文件进行加载
                        // style-loader负责将样式添加到DOM中  
                        // 使用多个loader时。是从右向左
                        use:[\'style-loader\',\'css-loader\',]
                    },
                    {
                        test:/\\.(png|jpg|gif|jpeg)$/,
                        use:[
                            {
                                loader:\'url-loader\',
                                options:{
                                    // 当加载的图片，小于limit时，会将图片编译成base64字符串形式
                                    // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
                                    limit: 8196,
                                    name: \'img/[name].[hash:8].[ext]\'  // 名称规则
                                },
                                
                            }
                        ]
                    },
                    // babel配置(es6 => es5)
                    {
                        test:/\\.js/,
                        // exclude:排除
                        exclude:/(node_modules|bower_components)/,
                        use:{
                            loader:\'babel-loader\',
                            options:{
                                presets:[\'es2015\']
                            }
                        }
                    }
                ]
            }
        }
    步骤三：在入口js文件中引用css文件
        // js文件依赖css文件
        require(\'./css/normal.css\')

        // css文件依赖资源文件
        body {
            background: url(../img/zdj.jpg)
        }
    这样一来，运行npm run bulid就能直接打包css、资源文件,es6 => es5了