使用webpack加载器打包文件

首先在项目文件根目录下新建webpack.config.js文件，进行基本配置

const path = require("path");
    module.exports = {
        mode:"development",
        //设置入口文件路径
        entry: path.join(__dirname,"./src/xx.js"),
        //设置出口文件
        output:{
            //设置路径
            path:path.join(__dirname,"./dist"),
            //设置文件名
            filename:"res.js"
        }
    }

配置html-webpack-plugin
使用html-webpack-plugin 可以生成一个预览页面。
实现默认预览页面功能的步骤如下：
A.安装默认预览功能的包:html-webpack-plugin
npm install html-webpack-plugin -D
B.修改webpack.config.js文件，如下：
//导入包
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
//设置生成预览页面的模板文件
template:"./src/index.html",
//设置生成的预览页面名称
filename:“index.html”
})
C.继续修改webpack.config.js文件，添加plugins信息：
module.exports = {
…
plugins:[ htmlPlugin ]
}

webpack打包文件

webpack加载器的配置
A.安装style-loader,css-loader来处理样式文件
1).安装包
npm install style-loader css-loader -D
2).配置规则：更改webpack.config.js的module中的rules数组

   module.exports = {
            ......
          plugins:[ htmlPlugin ],
            module : {
                rules:[
                {//test设置需要匹配的文件类型，支持正则
                        test:/\.css$/,
                   //use表示该文件类型需要调用的loader
                        use:['style-loader','css-loader']
                    }
                ]
            }
        }

B.安装less,less-loader处理less文件
1).安装包
npm install less-loader less -D
2).配置规则：更改webpack.config.js的module中的rules数组

  module.exports = {
            ......
            plugins:[ htmlPlugin ],
            module : {
                rules:[
                    {
                  //test设置需要匹配的文件类型，支持正则
                        test:/\.css$/,
                  //use表示该文件类型需要调用的loader
                        use:['style-loader','css-loader']
                    },
                    {
                        test:/\.less$/,
                        use:['style-loader','css-loader','less-loader']
                    }
                ]
            }
        }

C.安装sass-loader,node-sass处理less文件
1).安装包
npm install sass-loader node-sass -D
2).配置规则：更改webpack.config.js的module中的rules数组

  module.exports = {
            ......
            plugins:[ htmlPlugin ],
            module : {
                rules:[
                    {
                  //test设置需要匹配的文件类型，支持正则
                        test:/\.css$/,
                //use表示该文件类型需要调用的loader
                        use:['style-loader','css-loader']
                    },
                    {
                        test:/\.less$/,
                        use:['style-loader','css-loader','less-loader']
                    },
                    {
                        test:/\.scss$/,
                        use:['style-loader','css-loader','sass-loader']
                    }
                ]
            }
        }  

补充：安装sass-loader失败时，大部分情况是因为网络原因

D.安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
1).安装包
npm install postcss-loader autoprefixer -D
2).在项目根目录创建并配置postcss.config.js文件

 const autoprefixer = require("autoprefixer");
    module.exports = {
        plugins:[ autoprefixer ]
    }

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

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        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']
                }
            ]
        }
    }

E.打包样式表中的图片以及字体文件
在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件
1).安装包
npm install url-loader file-loader -D
2).配置规则：更改webpack.config.js的module中的rules数组

  module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                 //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                //use表示该文件类型需要调用的loader
                    use:['style-loader','css-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"
                }
            ]
        }
    }

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

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

 module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-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/
                }
            ]
        }
    }