关于webpack.config.js的基础配置

关于webpack文件的基础设置问题

生成命名文件bundle.js文件

本人新人，仅做参考
加强版

//这个path代表node的核心模块
const path = require('path')
    //这个插件所产生的构造函数会帮助我们自动删除dist，左侧的方括号是结构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//导入html-webpackplugin这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
    //new 构造函数，创建插件实例对象
const htmlPlugin = new HtmlPlugin({
    //指定要复制那个页面
    template: './src/index.html',
    // 指定复制出来的文件名和存放路径
    filename: './index.html'
})

//使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    //在开发阶段，建议大家都把devtool设置为eval-source-map
    //devtool: 'eval-source-map',
    //在实际开发过程中，建议大家吧devtool的值设置为nosources-source-map或者直接关闭SourceMap
    devtool: 'nosources-source-map',
    //代表webpack运行的模式，可选值有两个 development和production
    mode: 'development',
    //对文件进行压缩，开发上线时使用
    // mode: 'production'
    //entry:制定要处理那个文件 __dirname表示当前根目录
    entry: path.join(__dirname, './src/index.js'),
    //指定生成的文件要存放到哪里
    output: {
        //存放的目录 这个path代表存放目录
        path: path.join(__dirname, 'dist'),
        //生成的文件名称,默认的是main.js
        filename: 'js/bundle.js'
    },
    //插件的数组，将来webpack在运行时会加载并调用插件
    plugins: [htmlPlugin, new CleanWebpackPlugin()],
    devServer: {
        //打包加载完成后自动打开网页
        open: true,
        //更改端口号，在http协议中如果端口号是80，则被省略
        port: 80,
        //指定运行的主机地址
        host: '127.0.0.1'
    },
    //模块主要作用域webpack默认只能打包处理.js结尾的文件，处理不了其他后缀的文件
    //由于代码中包含了index.css文件，因此webpack处理不了
    //当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader加载器
    //webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader）
    //当css-loader处理完毕之后，会把处理结果转交给下一个loader（转交给style-loader）
    //当style-loader处理完毕之后，发现没有下一个loader了，于是把处理的结果，转交给了webpack
    //webpack把style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件
    module: { //所以的第三方模块的匹配规则
        rules: [ //文件后缀名的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            //test表示匹配的文件类型 use表示要调用的loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //如果需要调用的loader只要一个，则只传递一个字符串即可
            //limit可以控制图片是否转换为base64格式的转换
            //在配置url-loader的时候，多个参数之间使用&进行分隔
            { test: /\.jpg|.png|.gif$/, use: 'url-loader?limit=2222&outputPath=images' },
            //exclude表示排除当前目录代码
            //在配置babel-loader的时候，程序员只需要把自己的代码进行转换即可；一定要排除node——modules目录
            //因为第三方包中的JS兼容性 不需要程序员关系
            { test: /\.js$/, use: 'babel-loader', exclude: '/node_modules' }
        ]

    },
    resolve: {
        alias: {
            '@': path.join(__dirname, './src/')
        }
    }

}

代码此时存放到了虚拟内存中，能够进行实时刷新