4.安装webpack的各种loader

A.安装style-loader,css-loader来处理样式文件

        npm install style-loader css-loader -D

B.安装less,less-loader处理less文件

        npm install less-loader less -D

C.安装sass-loader,node-sass处理less文件

        npm install sass-loader node-sass -D

D.安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）

    npm install postcss-loader autoprefixer -D

E.打包样式表中的图片以及字体文件

在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理

使用url-loader和file-loader来处理打包图片文件以及字体文件

    npm install url-loader file-loader -D

F.打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法

有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码

我们需要安装babel系列的包

A.安装babel转换器

    npm install babel-loader @babel/core @babel/runtime -D

B.安装babel语法插件包

    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

C.在项目根目录创建并配置babel.config.js文件

        module.exports = {

        presets:["@babel/preset-env"],

        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]

    }

配置规则：更改webpack.config.js的module中的rules数组

module: {

        rules: [{

                //test设置需要匹配的文件类型，支持正则

                test: /\.css$/,

                //use表示该文件类型需要调用的loader

                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$/,

                //limit用来设置字节数，只有小于limit值的图片，才会转换

                //为base64图片

                use: "url-loader?limit=16940"

            }, {

                test: /\.js$/,

                use: "babel-loader",

                //exclude为排除项，意思是不要处理node_modules中的js文件

                exclude: /node_modules/

            },

        ]

    }