webpack初学，第一篇笔记

菜菜的笔记

今天上班时把工作做完了，抽空学了一下webpack，才学了最基本最基本的安装和配置，所以笔记也非常的基础。别问我为啥现在才学，emmmm，刚出来的菜菜，没学的还有很多很多，连冰山一角都还没学到，哭了

webpack的安装

首先创建一个新项目 初始化npm，在本地安装webpack，并安装 webpack-cli 如下所示：

// 创建新目录
mkdir webpack_demo
// 切换到新目录路径下
cd webpack_demo 
// 初始化npm
npm init -y  
// 安装 webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev 

webpack的配置文件

// 打开配置文件 webpack.config.js


// 引入 node核心模块 path
// 调用它的 .resolve() 方法
const path = require('path')

moudule.exports = {
    // webpack 默认模式是 production，打包后代码被压缩
    // development 模式下，打包后的代码没有被压缩
    mode: 'development',
    // 项目打包的入口文件，从哪个文件打包
    entry: './index.js',
    // 打包后放在哪个文件夹下
    output: {
        // 打包后的文件名字
        filename: 'bundle.js',
        // 打包出的文件放在哪里(绝对路径)
        path:path.resolve(_dirname, 'bundle')
    }
}

执行打包的命令：npx webpack

简单来说，当我们运行npx webpack命令的时候，程序会自动去找默认配置文件==webpack.config.js==,然后根据里面的配置执行打包任务。

如果我们将默认的配置文件改名为其他名字，如webpack.con.js，程序找不到默认配置文件，该如何做？

很简单，使用 npx webpack --config xxx 命令行来执行项目打包

npx webpack --config webpack.con.js 

// config后面跟自定义文件名