webpack安装

安装前提，webpack是基于node环境的，所以要安装node！！！
需要安装package.json文件npm init -y

3. 全局安装webpack指令npm i webpack webpack-cli -g
4. 局部安装webpack指令npm i webpack webpack-cli -D

一般项目中都是局部安装webpack，因为如果使用全局webpack版本进行打包，那么就会造成各个项目因为webpack版本造成的兼容性问题
5. 执行打包命令

当我们在命令行中使用webpack指令时，就会使用全局的webpack版本进行打包。
但是这明显不符合我们的设计思想（造成版本冲突）
所以我们要在局部安装的webpack进行打包，哪里才是局部打包的入口指令呢？ 两种方式
第一种:使用.\node_modules\.bin\webpack

第二种：使用npx webpack

npx webpack的原理其实就是执行了第一种方式，npx是npm提供的工具，专门去局部查找指令的工具。
6. 使用脚本指令
上面的两种方式其实在开发中都不是最常用的方式，不如在Vue-cli中，我们打包执行的是npm run build,开启本地服务器是npm run serve。
想做到这样的方式，其实是可以在package.json文件的"scripts"中是可以进行配置的。

7. 修改打包的出口入口
在webpack打包中，默认是找到./src/index.js文件进行入口打包，但是webpack是支持修改出口入口的。

第一种方式：使用指令npx webpack build --entry ./src/main.js --output-path ./build

这种方式解决了需求，但是这种打包指令方式过于复杂，应当进行一层优化。
第二种方式：在package.json中的scripts设置指令
package.json中设置 webpack --entry ./src/[name] --output-path ./[name] 这种方式也解决了上面的不足，但是这种明显是硬编程。 第三种方式：创建webpack.config.js文件，对webpack配置进行修改。

值得注意的是，entry是相对路径，但是output必须是绝对路径,可以在命令行输入pwd查看当前运行环境的绝对路径。

当然我们还能修改导出的文件名称，默认打包后的名称叫做main.js

    module.exports = {
        entry: "./src/main.js",
        output: {
        path: path.resolve(__dirname, "./build"),
        filename: "bundle.js"
        }
    }

结果就不再演示。

结束语

该文章是学习webpack的笔记

webpack入门笔记

webpack安装

结束语