Automannn的学习园地

# 概念

  • 本质上，webpack是一个现代javaScript应用程序的静态模块打包器
  • webpack4.0.0开始，可以不用显式引入配置文件

# 入口(entry)

  • 内部依赖图的起点，通过entry属性进行配置，默认值为./src
  • 可指定一个入口点，也可以指定多个入口点

# 出口(output)

  • 制品的目标地址，通过output配置，制品默认名称为bundles,默认地址为./dist
  • output.path配置地址，output.filename配置名称

# 加载器(loader)

  • 用于处理非javaScript模块，webpack本身只理解JavaScript.
  • 将所对应类型的文件转换为webpack能够处理的有效模块，以方便对其打包
  • 其核心能力在于转换,配置项为module.rules=[{test:'xxx.txt',use'xxxLoader'}]

# 插件(plugins)

  • 用于执行广义任务，比如打包优化、压缩、重新定义环境变量等，目的在于解决loader无法实现的其他事
  • 官方提供了许多开箱即用的插件，如HtmlWebpackPlugin
  • 配置项为plugins:[plugin1,plugin2...]

# 模式(mode)

  • 提供环境选项，可选development和production参数
  • 配置项为mode:'development'

# 入口(entry)

# 单入口语法

  • entry:'./xxxpath/xxx.js'
  • 等价于entry:{main:'xxxpath/xxx.js'}

# 多入口语法

  • entry:{pageOne:'./src/one.js',pageTwo:'./src/two.js,pageThree:'./src/three.js'}
  • 本质上，建立了多个独立分离的依赖图

# 输出(output)

# 多入口项目

  • 需要使用占位符，确保文件的唯一性

写入到硬盘: ./dist/app.js, ./dist/search.js

{
  "entry": {
    "app": "./src/app.js",
    "search": "./src/search.js"
  },
  "output": {
    "filename": "[name].js",
    "path": "/dist"  
  }
}

# loader

  • 本质上是一个方法
  • 入参为一个参数，即包含资源文件内容的字符串
  • 出参为两个参数，第一个参数为javaScript代码的字符串，第二个参数为 SourceMap，也是一个javaScript对象

# 插件(plugin)

  • 插件是webpack的支柱功能
  • 本质上，其是一个具有apply属性的javaScript对象
class MyCustomPlugin{
    apply(compiler){
        compiler.hooks.run.tap("MyCustomPlugin",compilation=>{
            //实际插件需要做的事情
            console.log('xxxxxx')
        })
    }
}

# 模块

  • 模块化编程中，开发者将程序分解成离散功能块(chunk)，称之为模块
  • Node.js一开始就支持模块化编程，但web的模块化支持并不完备

# webpack模块

  • webpack支持多个模块规范，如
    • ES5的 import语句
    • CommonJS的require()语句
    • AMD的 define和require语句
    • css/sass/lees的 @import语句
    • 样式或链接 url(...),<img src=...>
  • webpack模块编程，主要通过loader特性实现

# 模块解析规则

  • 绝对路径，如import '/home/myfile'
  • 相对路径,如import './myfile'
  • 模块路径,如 import 'mymodule'

# 构建目标(target)

  • webpack提供了构建目标，作用类似于 war包或者jar包;

# 多个target

var path = require('path');
var serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

var clientConfig = {
  target: 'web', // <=== 默认是 'web'，可省略
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];
//将在 dist文件创建 lib.js 和 lib.node.js

# webpack实践

# 常见的loader及其作用

领域 名称 作用
文件 raw-loader 加载文件原始内容(utf-8)
文件 file-loader 将文件发送到输出文件夹，并返回(相对)URL
json json-loader 加载json文件（默认包含）
转换编译 script-loader 在全局上下文中执行一次 javaScript文件
转换编译 babel-loader 加载es5+代码，然后使用babel转译为es5
转换编译 ts-loader 像javaScript一样加载TypeScript2.0+
模板 html-loader 到处html为字符串，需要引用静态资源
模板 markdown-loader 将markdown转译为html
样式 style-loader 将模块的到处作为央视添加到dom中
样式 css-loader 加载css文件后，使用import加载，并且返回css代码
样式 less-loader 加载和转译less文件
样式 sass-loader 加载和转译 sass/scss文件
清理和测试 eslint-loader preloader,使用eslint清理代码
框架 vue-loader 加载和转译vue组件
框架 angular2-template-loader 加载和转译angular组件

# 常见的plugin及其作用

名称 描述
BannerPlugin 在每个生成的chunk顶部添加banner
CommonsChunkPlugin 提取chunks之间共享的通用模块
CopyWebpackPlugin 将单个文件或目录复制到构建目录
DefinePlugin 允许在编译时配置的全局变量
DllPlugin 为了极大减少构建时间，进行分离打包
HtmlWebpackPlugin 简单拆改那就HTML文件，用于服务器访问
I18nWebpackPlugin 为bundle增加国际化支持
IgnorePlugin 从bundle中排除默写模块
NpmInstallWebpackPlugin 在开发时自动按照缺少的依赖

# 常见的webpack工具

名称 作用
webpack dev middleware 对活动包进行参数化的中间件
webpack dev server 提供网页包应用程序，根据更改，实时更新浏览器的内容
npm install webpack 通过webpack自动安装和保存依赖

← npm手记 →