基础知识

模块化

  1. js模块化
    1. 命名空间
      1. 一个对象 语法:
      库名.类别名.方法名
      
      1
      var NameSpace = {}
      NameSpace.type = NameSpace.type || {}
      NameSpace.type.method = function(){}
      
      1
      2
      3
    2. common.js (只能在服务器端使用)
      1. 一个文件为一个模块
      2. 只能通过module.exports暴露接口
      3. 通过require引入模块
      4. 同步执行
    3. Amd/Cmd/Umd (规范化模块化开发)
      • Amd
        1. 异步的模块定义
        2. 使用define定义模块
        3. 使用require加载模块
        4. 特点是依赖前置,提前执行
      • Cmd
        1. 一个文件为一个模块
        2. 使用define定义模块
        3. 使用require加载模块
        4. 特点是尽可能懒执行
      • Umd (通用解决方案)
        1. 首选判断是否支持Amd再判断是否支持common.js,如果都不支持,则将其定义为全局变量
    4. Es6 module (es6模块化规范)
      1. 一个文件为一个模块
      2. 使用import引入模块
      3. 使用export暴露接口
  2. css模块化
    1. OOCSS (设计结构分离)
    2. SMACSS (减少代码量,代码维护)
    3. Atomic CSS(原则化css)
    4. MCSS (多层级css)
    5. AMCSS (针对属性进行css设计)
    6. BEM (BlockElementModifier其实是块(block)、元素(element)、修饰符(modifier)

核心概念

  1. Entry(打包入口)
    1. 告诉webpack,这里的所有依赖模块,
    2. 也是打包的入口
    3. 可以是单个或多个
      1. 可以是一个文件

        module.exports = {
           entry : 'index.js'
        }
        
        1
        2
        3
      2. 可以是一个数组

        module.exports = {
           entry : ['index.js','vendor.js']
        }
        
        1
        2
        3
      3. 可以是一个key value形式的对象

        module.exports = {
           entry : {
               index : 'index.js'
           }
        }
        
        1
        2
        3
        4
        5
        1. 当entry是一个对象的时候,好处是
          1. 知道每一个entry对应的是什么
          2. 如果想要继续添加一个新的入口,可以继续指定key,可扩展性强
            module.exports = {
               entry : {
                   index: 'index.js',
                   home:  'home.js',
                   vendor: ['vendor.js','app.js']
               }
            }
            
            1
            2
            3
            4
            5
            6
            7
  2. Output(打包输出)
    1. 可以是一个或多个

      1. 一个
        module.exports = {
           entry : 'index.js',
           output: {
               filename: 'index.min.js'
           }
        }
        
        1
        2
        3
        4
        5
        6
      2. 多个
        module.exports = {
           entry : {
               index: 'index.js',
               home:  'home.js',
           }
           output: {
               filename: '[name].min.[hash:5].js'
           }
        }
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        name 表示的是entry的name,hash是在webpack打包的唯一的hash码
    2. 自定义规则

  3. Loaders (处理其他类型的资源文件)
    1. 处理文件
    2. 转换为模块
      1. code
      module.exports = {
         module:{
             rules: [
                 {
                     test: /\.css$/,
                     use: 'css-loader'
                 }
             ]
         }
      }
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      满足以.css结尾的使用,用css-loader转换
      • 常用loader
        1. 编译相关
          • babel-loader,ts-loader
        2. 样式相关
          • style-loader, css-loader, less-loader, postcss-loader
        3. 文件相关
          • file-loaderurl-loader
  4. Plugins (压缩代码,混淆代码)
    1. 可以参与到整个打包的过程
    2. 打包优化和压缩
    3. 配置编译时的变量
      • code
      const webpack = require('webpack')
      module.export = {
          plugins:[
             new webpack.optimize.UglifyJsPlugin()
          ]
      }
      
      1
      2
      3
      4
      5
      6
      • 常用Plugins
        1. 优化相关
          • CommonsChunkPlugin, UglifyjsWebpackPlugin
        2. 功能相关
          • ExtractTextWebpackPluginHtmlWebpackPlugin, hotmodulereplacementCopyWebpackPlugin
      • 相关名词
        1. Chunk (代码块)
        2. Bubdle (打包过的)
        3. Module (模块)

开发环境

webpack 命令

  1. webpack -h (可以看到命令行中所有的配置选项)
  2. webpack -v (查看版本号)
  3. webpack <entry> [<entry>] <output> (打包)

webpack 配置

  1. 安装webpack-cli cnpm i webpack-cli -g
    1. 可以交互式初始化一个项目 webpack-cli
    2. 可以进行项目迁移
  2. 打包js
    1. 如果想想直接使用webpack,则名称为webpack.config.js,否则执行命令为 webpack --config webpack.xxx.js
         //js文件没有发生变化,打包后的哈希值不会变化
         module.exports = {
             entry: {
                 app: './app.js'
             },
             output: {
                 filename: '[name].[hash:5].js'
             }
         }
      
      1
      2
      3
      4
      5
      6
      7
      8
      9

框架配合

  1. Vue-cli
  2. Angular-cli
  3. React-starter

文件处理

编译Es 6/7

  1. Babel
    1. Babel-loader
      1. webpack中使用Babel
        1. cnpm install babel-loader@8.0.0-beta.0 @babel/core
        2. npm init 一直回车生成package.json文件
        3. 新建文件app.js,index.html,webpack.config.js
          1. app.js
          1. index.html
          1. webpack.config.js
           module.exports = {
               entry: {
                   app: './app.js'
               },
               output: {
                   filename: '[name].[hash:5].js'
               },
               module:{
                   rules:[
                       {
                           test: /\.js$/,
                           use:{
                               loader: 'baber-loader',
                               options:{
                                   presets:['@babel/presets']
                               }
                           },
                           exclude:'/node_module/'
                       }
                   ]
               }
           }
          
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          执行 cnpm install bebel-loader --save-dev, cnpm install babel-core --save-dev, cnpm install @babel/preset-env --save-dev

打包优化

TOC