webpack4基本配置 热加载 CSS less 图片等

第一次尝试自己配置webpack，遂记录，注释也很详细，希望能够给像我一样的webpack小白提供帮助 。

同时在我的github里提供了可运行文件，感兴趣的可以下载运行 https://github.com/zjj1019/webpack.config.js

/*
 *@Description: webpack基本配置
 *@Author:[email protected]
 *@Date: 2020-04-10 15:03:00
*/
var webpack=require('webpack');
// var htmlwp = require('html-webpack-plugin');
module.exports={

    //入口文件的配置项
    //单入口文件简单写法 entry: string 多入口通过对象的entry: {name: 'path'} 
    entry:{
        index:'./js/entry.js'
    },

    //出口文件的配置项
    //path必须是绝对路径
    output:{
        path:  __dirname + '/dist',  //输出路径
        // filename: 'bundle.js'   //单出口
        filename: '[name].js',     //以用户给的name文件名字(index)进行出口文件命名
        publicPath: 'dist/'        //让测试服务器生成的文件，与最终打包生成的文件目录一致
    },

    //模块：例如加载css、less等
    module:{
        // 加载器列表，其中loader是use中loader的简写，
        // use属性的值需要是个由loader名称组成的数组。Loader的执行顺序是由后到前的
        rules:[{

            //CSS
            test:/\.css$/,
            loader:'style-loader!css-loader'
            },

            //less
            {
                test:/\.less$/,
                loader:'style-loader!css-loader!less-loader'
            },
            
            //图片
            {   
                //path 出口文件目录
                test:/\.(png|svg|jpg|gif)$/,
                loader:'url-loader?limit=8192&name=[path]/[name].[ext]'
            },



        ] 
    },
    //插件，用于生产模版和各项功能
    plugins:[
        //注释添加到生成文件的头部
        new webpack.BannerPlugin('webpack基本配置'),
        // Enable HMR
        new webpack.HotModuleReplacementPlugin()

    ],
    //配置webpack开发服务功能
    devServer:{
        port : 4009,
        open:true,
        hot: true,    //热替换
        inline:true   //热加载
    },
    mode: "development"

//webpack4默认是生产环境，自带js压缩功能
//如果要关闭，需要设置mode为development

}