Webpack基础

1、介绍

1.1 诞生

• 作者：Tobias Koppers(github:@sokra)

1.2 为什么前端需要构建

• 开发分工变化 【开发的复杂化和模块化】

• 框架变化 【框架的去中心化】

• 语言变化 【语言的编译化】

• 环境变化

• 社区变化

• 工具变化

1.3 为什么会选择webpack

• 代码分割

• 天生的模块化

2、概念储备

2.1 模块化

2.1.1 Js模块化

• 命名空间(库名.类别名.方法名)

    var NameSpace = {};
    NameSpace.type = NameSpace.type || {};
    NameSpace.type.method = function () {}

• CommonJS

  • 一个文件为一个模块

  • 通过module.exports暴露模块接口

  • 通过require引入模块

  • 同步执行

• AMD/CMD/UMD

• AMD

  • 异步的模块定义,使用define定义模块,使用require加载模块

  • requireJs - 依赖前置,提前执行

• CMD

  • 通用的模块定义,使用define定义模块,使用require加载模块

  • seaJs - 尽可能的懒执行

• UMD

  • 通用解决方案,判断是否支持AMD、commonJs,如果都不支持直接定义为全局变量

• ES6

  • 一个文件一个模块

  • 通过import引入模块

  • 通过export暴露模块接口

2.1.2 Css模块化 || 设计模式

• OOCSS

  • 面向对象的css,设计和结构的分离,内容和容器的分离

• SMACSS

  • 可扩展和模块化结构,简化代码量和代码的维护 [btn dialog]

• Atomic CSS

  • 原子化的css

  • <div class="w100 h100"></div>

• MCSS

  • 多层级的css

• AMCSS

  • 属性css设计

  • <div am-size="large"></div>

• BEM

  • Block

    • header,menu,container,checkbox,input

  • Element

    • 块中的部分

  • Modifier

    • 一种状态

    • <div class="button button-state-warning"></div>

2.2 环境准备

2.2.1 工具安装

• node + npm

• vsCode / WebStorm / Sublime

2.2.2 webpack的安装

• cnpm i webpack -g

2.3 引入模块的3种形式

• ES6

  • 引入 import sum from './sum'

  • 暴露 export default

• CommonJS

  • 引入 var minus = require('./minus.js')

  • 暴露 module.exports

• AMD

    require(['./muti'],function(muti){
            console.log(muti(2,3));
    });

   define(function (require, factory) {
        return function () {
        }
    });

2.4 wenpack介绍

2.3.1 简介

• webpack概述

  • 官网：https://webpack.js.org/

  • 中文官网：https://doc.webpack-china.org/

  • github：https://github.com/webpack/webpack

2.3.2 核心概念

• entry 【代码/打包的入口、单个或多个】

• output 【打包生成的文件输出、一个或多个、自定义规则、配合CDN】

• loaders 【处理资源文件、转换为模块】

  • 编译相关 babel-loader/ts-loader

  • 样式相关 style-loader/css-loader/less-loader/postcss-loader

  • 文件相关 url-loader/file-loader

• plugins 【插件】

  • 参与整个打包的过程

  • 打包优化和压缩

  • 配置编译时的变量

  • 优化相关

    • CommonsChunkPlugin 【提取相同的代码块】

    • UglifyjsWebpackPlugin 【混淆和压缩代码的】

  • 功能相关

    • ExtractTextWebpackPlugin 【提取css成单独的文件】

    • HtmlWebpackPlugin 【帮助生成HTML模板的】

    • HotModuleReplacementPlugin 【模块热更新】

    • CopyWebpackPlugin 【帮助拷贝文件】

3、webpack进阶

3.1 使用webpack

• webpack命令

  • webpack -h 【查看参数和选项】

  • webpack -v 【查看其版本】

  • webpack 【打包】

  • webpack-cli 【工具】

    • cnpm i webpack-cli -g 【可以交互式的初始化一个项目,可以直接进行迁移】

• 第三方脚手架

  • vue-cli

  • angular-cli

  • create-react-app

3.2 打包JS

    module.exports = {
        entry:{
            app:'./app.js'
        },
        output:{
            filename:'[name].[hash:5].js'
        }
    };

3.3 编译es6

• Babel

  • babel-loader

  • cnpm i babel-loader babel-core --save-dev

• Babel-presets

  • 指定规范的版本,针对语法

  • cnpm i babel-preset-env --save-dev

  • target.browsers:"last 2 versions" ">1%" 【指定浏览器环境】