Webpack体验记录

webpack大法好 退fis保平安

打包工具前端工程化一直是前端的一块重点.之前构建工具的选择上,公司也是很早之前就从grunt/gulp收拢为fis. fis的确是个好工具,作为工具核心的依赖表是非常好的构建思路,也是很多大公司一直在用的构建工具.

但是个人fis用的非常不习惯

  • 生态不是很好

  • 它太大太重了,比起单纯的打包工具,它更像前端构建的一种解决方案

  • 从个人角度上,跑demo,做单页,在构建工具上投入太多精力和时间去研究不太值得

我想找的是能够快速进行业务开发,傻瓜式并且生态很好的纯粹的打包工具.加之最近才开始慢吞吞的鼓捣vue,于是就看上了webpack.这里就来简要的记一下最近webpack的学习心得.


Webpack.config.js配置选项

entry

    entry: "./entry.js",
  entry: {
    entry1: './entry1.js',
    entey2: './entry2.js'
  }

配置入口

  • 可以单入口(把所有文件打包成一个文件)

  • 可以多入口(将文件分开打包成多个文件,减少单个文件的体积大小)


externals

  externals: {
        '$': 'window.Jquery'
    }

声明不加入打包流程的文件(多用于第三方库)

  • 表示这个依赖项是外部lib,如jquery,它不会和业务js一起打包.这样有一个好处,改动业务代码重新打包,不会将那些体积巨大的第三方库打包了,利好啊有木有


devtool

devtool:'source-map'

开启生成source-map,便于在chrome里调试

很多情况下,我们开发的代码,和真正在浏览器里跑的代码(构建后的代码)是不一样的,这样会造成调试的不方便.实现一下,如果我们要在浏览器里断点调试业务js,但这个业务js是n多个js合并压缩混淆之后生成的一个aio.js,鬼才能在这种情况下调试.

所以为了解决这个问题,一般的构建工具会分环境来构建. 比如维护devprod的两套配置,在开发时候跑构建工具的dev配置,不对资源文件进行合并和压缩,从而减少构建后的代码和开发代码的差异性,方便在浏览器里进行调试.

真正上线的时候,跑构建工具的prod配置,对资源文件进行合并压缩.

还有一种调试方案,就是sourcemap, 我们可以在浏览器环境跑aio.js,它的确是被合并压缩混淆后的产物. 但是如果我们有sourcemap,就可以根据这个sourcemap逆向推出aio.js合并压缩混淆之前的各个文件的状态.
简单的说,开启生成sourcemap的选项后

  • a.js+b.js+c.js 合并压缩混淆后 生成 aio.js+sourcemap

  • aio.js+sourcemap 可以逆推生成 a.js/b.js/c.js合并压缩混淆前的状态

P.s source map的调试依赖于chrome浏览器

  • cmd+opt+i 进入开发者模式

  • setting里Sources的选项可以开启js和css的source map调试选项

  • 开启webpack.config.js里的devtool:'source-map'

  • webpack-dev-server打包项目

  • 进入chrome调试项目,你可以在sources->webpack://里看到bundle.js经过source-map映射后的解压缩文件

  • (如果要对sass进行sourcemap调试,需要在sass-loader里再显示开启source-map)

chrome里开启sourcemap选项

clipboard.png

sourcemap调试Js

clipboard.png

sourcemap调试Sass

clipboard.png


output

  output: {
    filename: "bundle.js"
    path: 'dist/js/',
    publicPath:'/assets/'
  }
  • filename - 构建出的文件名称

  • path - 开发环境下的访问路径

  • publicPath - 生产环境下的访问路径(cdn)


module/loaders

 module: {
    //加载器配置
    loaders: [{
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }, {
      test: /\.scss$/,
      loader: 'style!css!sass?sourceMap'  //开启了source-map
    }, {
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=8192'
    }]
  }

最重要的就是loader,用来加载资源模块

  • test - 匹配的文件正则

  • exclude - 排除某些文件

  • include - 包含某些文件

  • loader - 对匹配的文件要使用的loader,通过!可以完成多loader处理,方向从右向左,通过?参数的方法对loader开启一些配置


plugins

配置对应的插件来拓展及优化打包流程(比如抽出公共js/css/等等)


resolve

用来偷懒的属性, 用了它, require文件的时候不需要带后缀名了,引用路径也变短了,老大再也不用担心我写错了

 resolve: {
        //查找module的话从这里开始查找
        root: '/pomy/github/flux-example/src', //绝对路径
        
        //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        
        //模块别名定义,方便后续直接引用别名,无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }

载入中...