webpack 的概念和基础使用

01 webpack 的概念和基础使用

webpack 是一个 JS代码模块化对的打包工具，它强大的扩展能力，随着社区的发展，逐渐成为一个功能完善的构建工具。

安装和使用

1 npm install webpack webpack-cli -g    // npm
2 yarn global add webpack webpack-cli   // yarn 
3 webpack --help  // help

webpack-cli 是使用 webpack 的命令行工具，在4.x版本之后不再作为 webpack 的依赖了，我们需要使用单独安装这个工具。

在项目中，我们更多地会把 webpack 作为项目的开发依赖来安装使用，这样可以指定项目中使用的 webpack 版本，更多方便多人协同开发：

确保你的项目中有 package.json 文件，如果没有使用 npm init 来创建

1 npm install webpack -D // npm
2 yarn add webpack -D // yarn

这样 webpack 会出现在 package.json 中，我们再添加一个 npm scripts：

{
    "scripts": {
        "build": "webpack --mode production"
      },
    "devDependencies": {
        "webpack": "^4.1.1",
        "webpack-cli": "^2.0.12",
    }
}

webpack 的基本概念

webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们多个模块的代码打包。 借用 webpack 官网的图片：