一、Webpack 简介 1.1 webpack 是什么 webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。 他会根据入口文件,找到依赖关系,从而生成一个chunk(代码块),对这个代码块进行各项处理(如less->css),这个处理的过程就叫做打包,打包好了输出这些文件(叫bundle)。 1.2 webpack 五个核心概念 1.2.1 Entry 入口(Entry):指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。 1.2.2 Output 输出(Output):指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名。 1.2.3 Loader Loader:让 webpack 能够去处理那些非 JS 的文件,比如样式文件、图片文件(webpack 自身只理解 JS) 1.2.4 Plugins 插件(Plugins):可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩, 一直到重新定义环境中的变量等。 1.2.5 Mode 模式(Mode):指示 webpack 使用相应模式的配置。 二、Webpack 初体验 2.1 初始化配置 全局安装:cnpm i webpack webpack-cli -g 本地安装:cnpm i webpack webpack-cli -D 2.2 编译打包应用 创建 src 下的 js 等文件后,不需要配置 webpack.config.js 文件,在命令行就可以编译打包。 指令: webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js 整体打包环境,是开发环境 结论: