切图崽的自我修养－[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'
        }
    }