webpack 之loader

Posted cl94

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack 之loader相关的知识,希望对你有一定的参考价值。

 

 

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了

 

 

 

以上是关于webpack 之loader的主要内容,如果未能解决你的问题,请参考以下文章

webpack3.0之loader配置及编写

webpack配置之自定义loader

14webpack之loader

webpack进阶之loader篇

webpack4 配置之 postcss-loader

webpack进阶【11】: babel-loader 配置高版本的 js,使之兼容