webpack4.41.0配置二（加载器_url-loader/babel-loader/sass-loader）

loader是webpack用来预处理源文件的，比如typesrcipt形式的文件最终都得转成浏览器可以执行的js文件

（注：以下的配置代码不一定与下方一摸一样，具体与官网上https://webpack.docschina.org/loaders/的为准，如无一般说明配置文件都指的是webpack.config.js）

url-loader

1.先在配置文件中配置Loader(具体的配置代码去https://webpack.docschina.org/loaders/file-loader/复制即可)

module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        option: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }

插入上面代码同时建立入口文件input.js和建立一个存放图片得文件夹，并在input.js中导入

 2.因为上面我们使用了Loader,所以需要下载相应得Loader

首先需要生成一下配置文件package.json，输入命令：npm init -y

然后执行npm install url-loader -S下载url-loader(-S代表安装完之后要记录到package.json配置文件中)和npm install file-loader -S

之后package.json配置文件会出现以下内容：

3.最后执行webpack,打包成功

---

babel-loader

1.安装命令：npm install -D babel-loader @babel/core @babel/preset-env webpack（preset-env负责剑将es6语法转成es5语法）

2.在input.js中书写下面例子代码

 3.在配置文件中添加规则（如果不配置以下代码直接打包，那个打包过后的代码还会拥有es6语法的代码，低版本的浏览器运行不起来es6语法）

const path = require('path');

module.exports = {

    entry: './input.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'output.bundle.js'

    },

    module: {

        rules: [

            {

                test: /\.(png|jpg|gif)$/i,

                use: [

                    {

                        loader: 'url-loader',

                        options: {

                            //小于限制的变成base64,大于的变成普通的物理文件

                            limit: 8192

                        }

                    }

                ]

            },

             {

                test: /\.m?js$/,

                //排除一些文件

                exclude: /(node_modules|bower_components)/,

                use: {

                    loader: 'babel-loader',

                    options: {

                        presets: ['@babel/preset-env']

                    }

                }

            }

        ]

    }

}

 

4.执行打包命令：webpack，成功打包

---

sass-loader

1.安装命令：npm install sass-loader node-sass -D

　　　　　　npm install style-loader css-loader -D

2.书写规则在webpack.config.js中添加

{
            test: /\.scss$/,
            use: [
                "style-loader", // 将 JS 字符串生成为 style 节点
                "css-loader", // 将 CSS 转化成 CommonJS 模块
                "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
            ]
        }

 3.在input.js中向上方一样书写一些简单例子最后进行打包