webpack进阶之路（一）

webpack是一个js的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归地构建一个依赖关系图。其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

默认配置文件命名：webpack.config.js

mode开发模式：production、development

 

常见几个概念：

1、entry：入口文件

2、output：在哪里输出它所创建的bundles，以及如何命名这些文件。

3、loader：让webpack能够去处理那些非js文件（webpack自身只理解js）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用打包能力，对它们进行处理。

4、plugin：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

mkdir webpack_test && cd webpack_test //创建webpack_test目录并进入

npm init -y //初始化package.json

//无需全局下载webpack
npm i webpack -D
npm i webpack-cli -D //4.X以上版本需下载webpack-cli

 项目文件夹当前目录：

//webpack.config.js
const path = require("path");

module.exports = {
    mode: "development",//开发环境调试写development,生产环境打包写production
    entry: "./src/js/index.js",//可配置一个入口，也可配置多个入口文件
    output: {
        path: path.resolve(__dirname,"dist"), //表明打包后的文件夹名为dist
        filename: "main.js" 
    }
}

执行npx webpack进行构建

---

构建后的项目目录：