webpack是什么？

[zhouzhongyuan]

loader与plugin的区别

Loaders do the pre-processing transformation of virtually any file format when you use sth like require("my-loader!./my-awesome-module") in your code. Compared to plugins, they are quite simple as they

• (a) expose only one single function to webpack
• (b) are not able to influence the actual build process.

Plugins on the other hand can deeply integrate into webpack because they can register hooks within webpacks build system and access (and modify) the compiler, and how it works, as well as the compilation. Therefore, they are more powerful, but also harder to maintain.

[zhouzhongyuan]

为什么“__dirname”返回“/”？

__dirname returns '/' when js file is built with webpack

[zhouzhongyuan]

假语村言

一开始Javascript本来就是按文件分开加载的。后来觉得文件大了，于是用minify压缩单个文件。再后来觉得发多个HTTP取数个文件太浪费，就用webpack打包成一个文件。现在又觉得打包在一起单个文件太大了，又要把包拆分下载。。。你说前段TMD怎么那么多事呢？！
alienbat

前端构建工具webpack有什么缺陷

[zhouzhongyuan]

webpack-bundle-analyzer

使用（CLI）

1. webpack --profile --json > stats.json
2. ./node_modules/webpack-bundle-analyzer/lib/bin/analyzer.js stats.json dist -m static

[zhouzhongyuan]

Webpack 大法之 Code Splitting

[zhouzhongyuan]

一次优化路程

原来情况

• index.js 5.5M

production warning

[zhouzhongyuan]

Webpack的原理

• webpack源码学习系列之一：如何实现一个简单的webpack · Issue #99 · youngwind/blog

[zhouzhongyuan]

Yigo 1.6打包压缩流程

并没有选用webpack作为Yigo1.6的打包工具，因为：

1. 1.6的代码使用了require.js, require.js有自己的打包工具r.js；
2. 打包要求，不更改现有的代码，最起码不更改zijiang这类项目中的代码（一行都不能改）。

如果使用webpack就不得不更改zijiang中的部分代码，只得选用r.js。

Intro

• 规范书写[,'css!lib/yigo/controls/YIGO.ui.LabelText.css']->['css!lib/yigo/controls/YIGO.ui.LabelText.css']
• define依赖的时候不能使用变量，必须是Array(string)字面量。

r.js使用

• multiline与uglify冲突问题。应该是修改multiline。throw会终止程序，除非使用try catch包裹。

./node_modules/.bin/r.js  -o build.js

build.js(r.js的配置文件)，示例：example.build.js

Yigo 1.6的`build.js`

({
    baseUrl: "./js",
    findNestedDependencies: true,
    generateSourceMaps: false,
    name: "../init",
    out: "bundle.js",
    separateCSS: true,
    optimizeCss: "standard",
    optimize: "uglify",
    pragmasOnSave: {
        excludeRequireCss: true
    },
    paths: {
        'backbone':'lib/backbone/backbone',
        'backbone.localstorage':'lib/backbone/backbone.localStorage',
        'jquery':'lib/jquery/jquery-2.1.1',
        'backbone.scrollview':'lib/scrollview/backbone.scrollview',
        'yigoview':'lib/scrollview/backbone.yigoview',
        'yigo-mobile':'lib/yigo/YIGO-all-debug',
        'yigo-mobilecontrol':'lib/yigo/YIGO.ui.ControlMobileFC',
        'yigo-vm':'lib/yigo/YIGO.ui.ControlVM',
        'yigo-mobile-patch':'lib/yigo/YIGO.ui.mobile',
        'fastclick':'lib/fastclick',
        'hammerjs':'lib/hammer/hammer',
        'hammertime':'lib/hammer/hammer-time.min',
        'handlebars':'lib/handlebars',
        'iscroll':'lib/iscroll/iscroll-lite-5.1.2',
        'underscore':'lib/underscore',
        'bootstrap':'lib/bootstrap/js/bootstrap.min',
        'moment':'lib/moment/moment.min',
        'async':'async',
        'owl-carousel':'lib/owl-carousel/owl.carousel.min',
        'load-image':'lib/image-cropper-touch/load-image/load-image',
        'load-image-exif':'lib/image-cropper-touch/load-image/load-image-exif',
        'load-image-exif-map':'lib/image-cropper-touch/load-image/load-image-exif-map',
        'load-image-meta':'lib/image-cropper-touch/load-image/load-image-meta',
        'load-image-orientation':'lib/image-cropper-touch/load-image/load-image-orientation',
        'css-builder': '../node_modules/require-css/css-builder',
        'css/normalize': '../node_modules/require-css/normalize',
        'css': '../node_modules/require-css/css',

    },
    shim:{
        'underscore' : {
            exports:'_'
        },
        'bootstrap':{
            deps:[
                'jquery',
            ]
        },
        'backbone' : {
            deps:['underscore','jquery'],
            exports:'Backbone'
        },
        'jquery.mobiscroll':{
            deps:['jquery']
        },
        'yigo-mobilecontrol':{
            deps:['yigo-mobile']
        },
        'yigo-vm':{
            deps:['yigo-mobile']
        },
        'owl-carousel':{
            deps:['jquery']
        }
    },

})

css处理

1.6的代码中，使用了require-css。恰好，require-css中的css-builder.js提供了对打包的支持。
cssAPI.load: 加载每个css文件
layerBuffer: 一个数组，包含所有的css内容
cssAPI.onLayerEnd: 保存成bundle.css。
此处，我对这个文件进行了稍微的修改。

1. 加载css顺序reverse

把

      var css = layerBuffer.reverse().join('');

改为

      var css = layerBuffer().join('');

因为通过r.js加载的css顺序是相反的，例如，r.js会首先加载页面css，然后控件css，然后base css。

2. 处理ios下独有的css

把

      cssBuffer[name] = normalize(loadFile(fileUrl), fileSiteUrl, siteRoot);

改为：

    const platform = 'android';
    if(name === 'lib/yigo/css/ios' && platform === 'android' ){
      cssBuffer[name] = '/*ios Don\'t import.*/';
    }else{
      cssBuffer[name] = normalize(loadFile(fileUrl), fileSiteUrl, siteRoot);
    }

webpack打包

From Require.js to Webpack - Part 2 (the how)

总结

• r.js应该就是一个文件分析器，分析所有用到require的地方

复习

• 20170816,08:30-08:50,复习一遍

[zhouzhongyuan]

webpack-dev-server

publicPath: 路由，类似express中的static