webpack——核心概念

webpack核心概念：

1、entry (入口)

入口起点 (entry point) 指示 webpack 应该是用于那一模块，来作为构建其内部依赖的开始 

    module.exports = {
        entry:"path/tu/my/entry/file.js"
    }

2、output (出口)

output 属性告诉 webpack 在那里输出他所创建的bundle，以及如何命名这些文件

    const path = require('path')

    module.exports = {
        entry:"path/tu/my/entry/file.js",
        output:{
            // 打包生成此文件夹 (默认名：dist,内部具有带min的js文件)
            path:path.resolve(__dirname,'dist'),
            // 打包生成的文件(在 dist 内)
            filename:'my-first-webpack.bundle.js'
        }
    }

3、loader (处理不同的文件类型)

loader 让 webpack 能够去处理其他类型的文件，并将他们转化为有效的模块

    const path = require('path')

        module.exports = {
            output:{
                // 打包生成的文件(在 dist 内)
                filename:'my-first-webpack.bundle.js'
            },
            module:{
                rules:[{
                    // 正则 找出符合此正则的文件
                    test:/\.txt$/,
                    // 不论什么格式的文件 都以row-loader的格式去处理
                    use:'raw-loader'
                }]
            }
        }

4、plugin (插件)

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。

    const HtmlWebpackPlugin = require("html-webpack-plugin") // 通过 npm 安装
    const webpack = require("webpack"); // 用于访问内置插件
    
    module.exports = {
        module:{
            rules:[{
                test:/\.txt/,
                use:"raw-loader"
            }]
        },
        plugin:[
            new.HtmlWebpackPlugin({
                template:'./src/index.html'
                })
        ]
    }

5、mode (模式)

    <!--  开发环境     生产环境           -->
通过选择development ， production 或 none 来告知webpack使用相应的模式的内置优化。

    module .exports ={
        //      生产环境
        mode:"production"
        //      开发环境
        // mode:"development"
    }