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

ZHAO_ 发布于2019-08-20 12:11 / 788人阅读

摘要：体验记录大法好退保平安打包工具前端工程化一直是前端的一块重点之前构建工具的选择上，公司也是很早之前就从收拢为的确是个好工具，作为工具核心的依赖表是非常好的构建思路，也是很多大公司一直在用的构建工具但是个人用的非常不习惯生态不是很好它太大太重

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

GPU云服务器云服务器切图崽图像识别数学修养自我评价自我介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80840.html

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

摘要：体验记录大法好退保平安打包工具前端工程化一直是前端的一块重点之前构建工具的选择上，公司也是很早之前就从收拢为的确是个好工具，作为工具核心的依赖表是非常好的构建思路，也是很多大公司一直在用的构建工具但是个人用的非常不习惯生态不是很好它太大太重 Webpack体验记录 webpack大法好退fis保平安打包工具前端工程化一直是前端的一块重点.之前构建工具的选择上，公司也是很早之前就从g...

ralap 2019-08-01 15:56 评论0 收藏0
切图崽的自我修养－－[BUILD]构建工具思路梳理

摘要：前言之前也是从过来的，到现在的中间有些问题没怎么细想，比如明明是构建工具为什么调试总是要开启一个服务之类的，现在就来简单梳理下思路最原始的构建工具无非是这样改动了某个资源文件，要手动运行构建命令才能重新构建，重新构建的时候构建工具将所有资源前言之前也是从grunt/gulp/fis/过来的，到现在的webpack,中间有些问题没怎么细想，比如明明是构建工具为什么调试总是要开启一个h...

wfc_666 2019-08-20 12:14 评论0 收藏0
切图崽的自我修养－－[BUILD]构建工具思路梳理

摘要：前言之前也是从过来的，到现在的中间有些问题没怎么细想，比如明明是构建工具为什么调试总是要开启一个服务之类的，现在就来简单梳理下思路最原始的构建工具无非是这样改动了某个资源文件，要手动运行构建命令才能重新构建，重新构建的时候构建工具将所有资源前言之前也是从grunt/gulp/fis/过来的，到现在的webpack,中间有些问题没怎么细想，比如明明是构建工具为什么调试总是要开启一个h...

elina 2019-08-01 15:55 评论0 收藏0
切图崽的自我修养－[HTTP] 部署WEB服务流程梳理

摘要：前言关键字域名，备案服务器解析记录配置流程你想在云端部署两个服务，一个新闻站点，一个游戏门户站点域名也已经想好了，是和用户通过访问能访问到新闻站点，通过访问能访问游戏门户站点首先，你需要上阿里云上买一个一级域名按照中国的相关法律规定，域名如前言: 关键字: 域名，备案, ip, 服务器, dns解析记录配置流程: 你想在云端部署两个web服务，一个新闻站点，一个游戏门户站点. 域名...

Barry_Ng 2019-08-29 11:23 评论0 收藏0