webpack介绍

(1). 构建工具的作用:

• 转换ES6语法.
• 转换JSX.
• CSS前缀补全、预处理器.

服务器托管网

• 压缩混淆.
• 图片压缩.

1. 静态模块打包器:

• 将入口文件引入的各种资源 => chunk(块) => less转换为css、es6转换为es5 => bundle(输出内容)
• 将所有资源文件(js/css/html/less/json…)当做模块处理.
• 根据模块的依赖关系进行静态分析.
• 打包生成对应的静态资源(bundle).

2. 5个核心:

(1). Entry:

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

(2). Output:

• 输出(Output):
  a. 指示webpack打包后的资源bundles输出到位置.
  b. 命名规则.

(3). Loader:

• Loader让webpack能够去处理那些非JavaScript文件:
  a. 相当于”翻译”,将css、图片等”翻译”成we服务器托管网bpack能识别的资源.
• webpack自身只理解JavaScript.

(4). Plugins:

• 插件(Plugins)用于执行范围更广的任务:
  a. loader只能做”翻译”.
• 插件的范围包括:
  a. 从打包优化和压缩,一直到重新定义环境中的变量等.

(5). Mode:

• 指示webpack使用相应模式的配置.
• 选项 – development:
  a. 会将DefinePlugin中process.env.NODE_ENV的值设置为development.
  b. 启用NamedChunksPlugin和NamedModulesPlugin.
  c. 能让代码本地调试运行的环境.
• 选项 – production:
  a. 会将DefinePlugin中process.env.NODE_ENV的值设置为production.
  b. 启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin.
  c. 能让代码优化上线运行的环境.
  d. 比开发环境多了压缩功能,开发模式下打包的文件还可能看的到.

3. webpack install:

// webpack4将webpack与webpack cli分离了
yarn add webpack webpack-cli -D

(1). npm run指令:

• 原理:
  a. 模块局部安装会在node_modules/.bin目录创建软链接

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: python3在mac下配置

目的 https://github.com/VonSdite/Plane_Wars 可以本地跑起来。 下载并安装python3 https://www.python.org/downloads/mac-osx/ 下载安装好后命令行是要用 python3，而不是…