webpack自学文档 -- 1 基础API

铭文真义

　　一种前端资源构建工具，一个静态模块打包器。它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

 

五大神将

　　1、entry:打包入口

　　　　入口指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

　　2、output:打包出口

　　　　输出（output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名

　　3、loader:

　　　　loader让webpack能够去处理那些非JS文件（webpack自身只能解析js/json）

　　4、plugins:插件

　　　　插件plugins可以用于执行范围更广的任务，插件的范围包括：从打包优化到压缩，一直到重新定义环境中的变量等

　　5、mode：模式

　　　　模式（mode）指示webpack使用相应模式环境配置

　　　　development : 本地调试运行的环境

　　　　production ： 能让代码优化上线运行的环境

箴言：

　　1、webpack能处理js/json资源，不能处理css/img等资源

　　2、生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化～

　　3、生产环境比开发环境多了一个压缩代码的过程（生产打包出的文件体积更小）

解禁（打包指示命令-终端）：

　　　webpack 入口文件路径 -o 出口文件路径 --mode=(development:本地调试环境；production：生产环境；两者二选一)

 

实战：

　　webpack.config.js

　　　　webpack配置文件

　　　　作用：运行【webpack】命令时，会加载里面的配置

　　　　所有构建工具都是基于node.js平台运行的

　　　　模块化采用commonJS

 

入门配置(webpack.config.js)：

 

这个打包没有html文件需在终端执行：

　　webpack   ./src/index.js -o ./build/built.js --mode=development

才可以打包,这样会打包在build文件中打包出一个built.js文件，可以执行node ./build/built.js执行这个js文件，会有输出

 

附魔：loader配置中，不同文件必须配置不同的loader处理

　　　例如：处理css文件就要下载 css-loader 、 style-loader依赖

　　　　　　less文件要下载4个依赖：less、less-loader、css-loader、style-loader