写篇文章让自己学会webpack——（2）关于webpack配置

直接说明：安装webpack后你是找不到（新手）配置文件，官方设置的默认配置文件webpack.config.js。所以你vue-cli创建项目更是看不到。

找不到配置文件没关系，我们先记住名字webpack.config.js就行。然后我们来自己写配置文件，然后让webpack给我是龙给我盘着，给我乖乖用我写的配置文件！

实现让webpack来用我们写的配置文件依靠一个指令代码：

webpack --config 你写好的配置文件名字（地址）
复制代码

先放着我们去写配置文件。

配置文件

    module.exports = {
        entry: './src/index.js',
        output: './dist/main.js',
        mode: 'production',
        module: {
            rules: [{
                test: /\.txt$/,
                use: 'raw-loader'
            }]
        },
        plugins: [
            new HtmlwebpackPlugin({
                template: './src/index.html'
            })
        ]
    }
复制代码

这里可以看出说是配置文件其实也是模块的写法，说白了node运行这个js模块达到了配置webpack的效果。
作为空配置：只需要entry、output两个属性指定入口文件和输出文件。

entry和output

其实很明显，entry告诉webpack入口文件的地址。入口文件就是所有项目js代码要执行时第一个执行的js文件，可以理解为所有js互相关联成一棵树，入口文件就是这个树根，执行入口文件就等于执行了所有你编写进项目的js代码。但是我们用webpack打包项目时肯定不需要跑我们的网站项目，所以这里的项目入口文件另有用处，node执行的是webpack（webpack的入口文件），而webpack打包就需要告诉它你的项目入口文件。
output也很明显，就是打包的结果，没有多神秘，就是把以入口文件为根的项目js树简化为单个js文件，不再是这个js引用那个js又引用这个js，就是把你写的所有分散js代码转换为了一个完整简单压缩率高且效果一样的单个js文件，然后你的网页html引用它。这个js结果文件由output属性指定位置和名字。

这里关于树的比喻是基于模块开发的思维，基于vue的单文件组件，即模块化，组件化开发（后期补上图片）。

入口和输出新规范（2021-9）

不要慌张，技术更新不会考虑新手懂不懂，他们只会想着自己怎么爽。。。咳咳
这里第一行我们通过node的模块引入语法require来引入这个path模块（下载模块webpack模块是内置的）
然后通过path模块提供的对象方法resolve将前面我们的地址进行处理，新版webpack对于配置文件的规范要求（如果你下载的指定webpack老版本的话，上面的写法应该可以）。
然后我们把后面两个属性删除，不影响程序执行，目前我们不需要具体的打包效果，能打包就行。

    const path = require('path')
    module.exports = {
        entry: path.resolve(__dirname, './src/index.js'),
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'main.js'
        },
        mode: 'production',
    }
复制代码

打包测试

剩下的配置先不写吧，博主目前也是学习ing，而且loader和plugins是知识大点，需要单独讲。
对了按照设置好的地址，进行一次打包吧，先使用前面的指定配置文件的指令，然后就会自动执行打包！

webpack --config .\webpack.config.js
//下面是输出：
asset main.js 106 bytes [compared for emit] [minimized] (name: main)
./src/index.js 105 bytes [built] [code generated]
webpack 5.52.1 compiled successfully in 246 ms
复制代码

对了你需要创建index.js这个文件，main.js文件不用，输出文件可以输出得到，如果有会被覆盖。
为了大家直观看到效果：我们直接 提供js代码（哈哈哈）：

index.js

console.log("打包这条代码吧，没有设置具体的打包配置，当然是原封不动输出！")
// 这是开发使用的备注信息
function fn() {
    console.log("这是一个带有缩进格式的函数。")
}
fn()//可以尝试着去除该条语句再试试。
复制代码

执行完webpack –config .\webpack.config.js（地址看自己的）指令后，去看看main.js是不是产生了，或则main.js文件的代码是不是和index一样。

通过打包，你会发现即使没有编写loader和plugins，webpack打包也会对js文件做基本处理，所以你会发现index文件中的备注在main中会消失，如果你试着去除fn()这条语句，fn函数就不会执行（main中直接消失）。

打包指令补充

使用这条指令时注意地址，其次这是默认的执行webpack模块的写法，不算是建议的写法，知道就好。

.\node_modules\.bin\webpack
复制代码

附录：如果有问题，看看我的结构吧，允许结构出问题了。（请无视node_modules，它产生于安装webpack模块时，暂时不需要知道）