//全局安装webpack （不推荐）

npm i webpack -g

npm i webpack-cli -g

//局部安装（推荐）

npm i webpack -D

npm i webpack-cli -D

npx webpack -v 查看webpack的版本号

注：也可以使用cnpm安装。

//webpack的配置文件，文件名不能改！！！
//万一想改的话，就是 npx wenpack --config webpack.con.js  后面的是更改后的名称

const path=require('path')  //引入此模块的目的就是，配置出口文件和入口文件的根路径；

module.exports={

    //'development' or 'production' 开发环境配置，第一个是开发环境，production是生产环境！！

    mode:"development",  

    //配置默认的出口文件/入口文件

    //首先找到入口文件；

    entry:{   //entry入口文件，一个入口文件的话直接写，别写main对象；

        main:path.join(__dirname,'./index.js')

    },

    //出口文件；

    output:{

        filename:'bundle.js',  //出口文件的名，随意；

        path:path.join(__dirname,'./dist')

    },

    //module--模块解析，webpack因为只认识js

    module:{

        rules:[{

            //正则表达式匹配

            test:/\.css$/,

            use:[

                "style-loader",  //语法解析；

                "css-loader"    //解析文件依赖；因为可能会有多个css文件

            ]

        },

        {

            test:/\.styl$/ ,    //styl文件的配置；cnpm i stylus-loader stylus -D

            use:[

                "style-loader",

                "css-loader",

                "stylus-loader" ,  //解析成正常css；

                //注意顺序规律，从下而上；不能乱；

            ]

        },

        //图片解析；

        {

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

            use:[

                {

                    loader:"url-loader",   //解析图片和解析文件；

                    //cnpm i url-loader file-loader -D

                    //url-loader基于file-loader -D

                    options:{    //图片的配置项

                        limit:10240

//用来控制当前的文件大小，如果当前文件大小超过所设置的文件大小，会把文件生成一个新的文件插入到dist下，如果比当前所设置的小，会放到打包出来的文件下，以bate64位的形式；

                    }

                }

            ]

        },

    ]

    }

}

注意：css-loader style-loader 这些都是需要安装的

const path = require('path');

//引入HTML插件；

const HtmlWebPackplugin = require('html-webpack-plugin')

//下载：npm install --save-dev html-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//下载：cnpm i clean-webpack-plugin -D  会随着webpack版本的改变，配置方法也会改变。

module.exports = {

    mode: 'development',

    devtool:'cheap-eval-source-map',  //映射错误

    entry: {

        main: path.join(__dirname, 'index.js'),

    },

    output: {

        filename: 'es6.js',

        path: path.join(__dirname, './dist'),

    },

    //模块解析；

    module: {

        rules: [

            {

                test: /\.css$/,

                use: [

                    "style-loader",

                    "css-loader"

                ]

            },
　　//es6转es5
   //安装：npm install --save-dev babel-loader @babel/core 

            {

                test: /\.js$/,

                exclude: /node_modules/,

                loader: "babel-loader"

            }

        ]

    },

    //插件，是一个数组。

    plugins: [

        new HtmlWebPackplugin({

            template: "./index.html"  //依那个HTML文件为模板，就在此写那个文件

        }),

        new CleanWebpackPlugin()

        //注意插件的先后顺序！！！不能变；

    ]

}

{

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

        "useBuiltIns": "usage"   //在哪用就在那里转；

    }]]

  }
直接复制到该文件里面即可！