在网页中会引用哪些常见的静态资源？

  • JS
    • .js .jsx .coffee .ts（TypeScript 类 C# 语言）
  • CSS
    • .css .less .sass .scss
  • Images
    • .jpg .png .gif .bmp .svg
  • 字体文件（Fonts）
    • .svg .ttf .eot .woff .woff2
  • 模板文件
    • .ejs .jade .vue

      webpack打包过程

      根据模块的依赖关系进行依赖分析，打包生成对应的静态资源。
      将每一个依赖记录好，形成一个依赖关系树状结构图，将代码引进来形成chunk（代码块），将chunk进行打包（比如将less编译成css文件）打包好输出的资源叫bundle。

      webpack的五个核心概念

      Entry

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

      Output

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

      Loader

      Loader让Webpack能够去处理那些非Javascript文件(Webpack自身只理解Javascript)。

      Plugins

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

      Mode

      模式(Mode)指示Webpack使用相应模式的配置。
选项 描述 特点
development 会将 process.env.NODE_ENV的值设为development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 能让代码本地调试
运行的环境
production 会将 process.env.NODE_ENV的值设为production。
启用 FlagDependencyUsagePlugin，
FlaglncludedChunksPlugin,
ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,
OccurrenceOrderPlugin,SideEffectsFlagPlugin 和
UglifyJsPlugin.		 能让代码优化上线
运行的环境

生产环境和开发环境

  1. 运行指令：

    1. 开发环境：webpack ./src/index.js -o ./build/built.js --mode=development webpack会以./src/index.js为入口开始打包，打包后输出到./build/built.js整体打包环境，是开发环境
    2. 生产环境：webpack ./src/index.js -o ./build/built.js --mode=production webpack会以./src/index.js为入口开始打包，打包后输出到./build/built.js整体打包环境，是生产环境
  2. 结论：
    1. webpack能处理js/json资源，不能处理css/img等其他资源
    2. 生产环境和开发环境将ES6模块化编译成浏览器让其能识别的模块化~
    3. 生产环境比开发环境多一个压缩js代码

      webpack.config.js

      ```javascript // webpack.config.js webpack的配置文件 // 作用：指示webpack干哪些活（当你运行 webpack的时候，会加载里面的配置） // 所有构建工具都是基于Node.js平台运行的~模块化默认采用common.js

//resolve用来拼接绝对路径的方法 const {resolve} = require(‘path’);

module.exports = { //webpack配置 //入口起点 entry: ‘./src/index.js’, output:{ filename: ‘built.js’, //dirname nodejs的变量，代表当前文件的目录绝对路径 path:resolve(dirname,’build’) }, //loader的配置 module:{ rules:[ //详细loader配置 ] }, //plugins的配置 plugins:[ //详细plugins的配置 ], //模式 mode:’development’, // mode:’production’ } ```