Webpack入门1----简介

webpack是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

webpack五个核心概念

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)
• 模式

入口(entry)

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

输出(output)

 输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

loader

Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)

插件(plugins)

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

模式

模式(Mode)指示 webpack 使用相应模式的配置。

选项	描述
development	会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production	会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

 注意：只设置 NODE_ENV，则不会自动设置 mode。

webpack安装打包

初始化配置

初始化 package.json

        输入指令：

                npm init

下载并安装webpack

        输入指令:

                npm install webpack webpack-cli -g

                npm install webpack webpack-cli -D

        第一个是全局安装，下面是项目内安装

 编译打包

1. 创建文件

2. 运行指令

         index.js: webpack入口起点文件

        开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development

         功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成 浏览器能识别的语法。

         webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

         整体打包环境，是开发环境

        生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production

        功能：在开发配置功能上多一个功能，压缩代码。

        整体打包环境，是生产环境

3. 结论

        webpack 能够编译打包 js 和 json 文件，但不能处理css/img等其他资源。

        能将 es6 的模块化语法转换成浏览器能识别的语法。

        能压缩代码（生产环境比开发环境多一个压缩js代码）

4. 问题

        不能编译打包 css、img 等文件。

        不能将 js 的es6基本语法转换为es5以下的语法。