webpack从入门到摔门而出

• webpack 是什么
  webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。在webpack看来, 前端所有的资源文件(js、json、css、html、less、 ....)都会作为模块处理, 它将根据模块的依赖关系进行静态分析,打包成对应的静态资源

• webpack五个核心概念

入口(entry)

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

出口(output)

output属性告诉 webpack 打包后的资源 bundles，输出到哪里以及如何命名这些文件，默认值为 ./dist。

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

模式

通过选择 development 或production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化。

• development 能让代码本地调试运行的环境

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

  module.exports = {
     mode: 'production'
  };