webpack打包工具'

发表于

npm包

1
2
3
4
5
webpack
$ npm install webpack webpack-dev-server html-webpack-plugin -D
babel
$ npm install babel-core babel-preset-es2015 babel-preset-stage-0 babel-loader babel-preset-react babel-plugin-transform-decorators-legacy -D
  1. 热替换/热加载,当修改代码时,大多情况下所改动的地方会实时反映到页面中,而这个过程并没有刷新页面。
    1
    webpack-dev-server --hot -inline

基本概念

  • 模块规范/CommonJS、AMD
  • 分支/chunks
  • 加载器/loader
  • 插件/plugins

分支

webpack擅长的是讲台资源的打包,如果希望异步加载,可以通过Code Splitting(裂开)的方式实现

1
2
3
4
require.ensure(['b'],function() {
    var b = require('b') 
})
//经过webpack打包后,或生成1.js,这里的名字可以配置的

加载器

1
2
3
4
5
module:{
    loaders:[
        {test:/.js$/,loaders:['babel-loader'],exclude:/node_modules/}
    ]
}

webpack

webpack是一个模块绑定器，其主要作用是将js文件捆绑在浏览器中,但也可以转换、捆绑、或者打包任何资源和有用的东西

安装

npm install --save-dev webpack

插件

  • common-chunks-webpack-plugin 生成entry文点共享的模块(e.g. vendor.bundle.js && app.bundle.js)
  • extract-text-webpack-plugin 从bundles提取css文本到一个独立的文件(e.g. app.bundle.css)
  • component-webpack-plugin 使用webpack组件
  • compression-webpack-plugin 准备生成压缩版本
  • i18n-webpack-plugin 为你的bundles加入i18n支持
  • html-webpack-plugin 为你的bundles加入i18n支持(index.html)

    file loaders

  • raw-loader 加载文件的原内容(utf-8)
  • val-loader 将代码当多模块执行并且视为js导出
  • url-loader 像file loader 但是当文件小于限制的大小的时候会返回一个数据地址
  • file-loader 将文件发送到输出文件夹并返回相对路径(url)

    JSON loaders 加载并转发JSON文件

    transpiling loaders（将一种源码转换为另一种源码,转译）

  • script-loader 在全局环境下执行一次js文件(如脚本标签),不需要解析
  • babel-loader 加载es2015以上版本并且使用Babel转译为ES5
  • traceur-loader 加载es2015以上版本并且使用Traceur转译为ES5
  • ts-loader 样js一样加载TypeScript
  • coffeScript 像js一样加载CoffeeScript

    templating loaders

  • html-loader 将HTML作为字符串导出,需要吧把静态资源当做参考
  • pug-loader 加载Pug模板并且返回一个函数
  • jade-loader 加载jade模板并且返回一个函数
  • markdown-loader 将Markdown转译为HTML
  • posthtml-loader 使用PostHTML加载并转换HTML文件
  • handlebars-loader 将Handlebars转译成HTML

    Styling loaders

  • style-loader 将导出的模板作为样式添加到DOM
  • css-loader 加载通过相对路径使用import导入的CSS文件并且返回CSS代码
  • less-loader 加载并编译LESS文件
  • sass-loader 加载并编译SASS文件
  • stylus-loader 加载并编译Stylus文件
  • postcss-loader 使用PostCSS加载并转换一个CSS/SSS文件

    Linting&&Testing loader

  • mocha-loader 用mocha测试(浏览器/node)
  • eslint-loader 使用ESLint为静态代码的解析(linting code)提供预加载
  • jsHint-loader 使用JSHint为静态代码的解析提供预加载
  • jscs-loader 使用JSCS为代码代码样式校验提供预加载

    framworks loaders

  • vue-loader
  • polymer-loader 处理HTML&&CSS使用预处理器和通过require()导入的Web组件像一级模块一样
  • angular2-template-loader 加载和转译Angular2组件
  • tag-loader Riot官方webpack处理器

    性能 Performance

    webpack使用异步的I/O接口,并具有多个缓存级别。这使webpack拥有快速和难以置信的增量编译速度

    Module Formats

    webpack支持es2015+,CommonJS和AMD模块开箱可用。它对你的代码中的AST执行聪明的静态分析。它甚至有一评估引擎来评估简单的表达。着可以让你即可使用大多数现有的库.

    Code Splitting

    webpack允你将你的代码库拆分成多个模块.模块在运行的时异步加载,这会减少你的初始加载时间

    Optimizations 优化

    webpack 可以许多优化,通过重复使用经常使用的模块进行重复数据的删除,最小化并让你完全控制最初加载的内容并且通过运行时进行代码拆分来减少js输出的大小.它也可以通过hashes让你的代码块缓存友好。

(https://www.npmjs.com/package/webpack)[官方文档]