webpack原理及使用解析

webpack是JavaScript前端静态资源打包器（module bundler）。

一、实例应用
①首先安装webpack（可以全局安装，也可以局部安装）

全局：cnpm install -g webpack
局部：cnpm install --save-dev webpack

②安装webpack-cli（webpack4+需要，用于在命令行运行webpack）

npm install --save-dev webpack-cli

③创建package.json文件（NPM的标准说明文件，包含项目的基本信息、模块依赖、运行的脚本信息）

cnpm init（执行时，需要数据项目的相关信息，可跳过）
cnpm init -y（全都默认）

④创建webpack.config.js文件（webpack的配置文件，需手动创建，可在任何位置，一般在整个文件夹的首层子目录）

一个简单的webpack.config.js配置：

module.exports = {
  entry:  __dirname + "/src/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

⑤入口文件main.js（作为入口文件，里面写入需要依赖的模块。。。链式依赖）

一个简单的main.js文件：

const greeter = require('./Greeter.js');//main.js依赖的模块，Greeter.js依次链式依赖下去
document.querySelector("#root").appendChild(greeter());

⑥执行打包
运行webpack命令，即可执行webpack.config.js
简洁的执行打包命令，需要在pakeage.json中的script属性中配置：
一个简单的package.json配置文件

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

npm的start命令是个特殊的命令，可直接执行npm start，一般情况下执行脚本命令的格式是 npm run {script name}例如npm run bulid。

二、webpack打包原理和组成。

webpack由四个核心概念：入口(entry)、出口(output)、loader、插件(plugins)。

entry：表示webpack打包开始的入口文件。
output：标识webpack打包结束的导出文件（路径和文件名）。
loader：转换非JavaScript文件（webpack只能识别js文件），如Typescript、css、scss等，可配置对某一文件类型做具体的loader转化。
plugins：可以执行范围更广的任务（后续更新……）
module：可以选择development和production模式，webpack内部会进行相应的优化。