切图崽的自我修养－[BUILD] webpack体验记录

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,鬼才能在这种情况下调试.

所以为了解决这个问题，一般的构建工具会分环境来构建. 比如维护dev和prod的两套配置，在开发时候跑构建工具的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选项

sourcemap调试Js

sourcemap调试Sass

---

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'
        }
    }

---