search

zhouzhongyuan / qa

Questions recods
MIT License
5 stars 1 forks source link

webpack是什么？ #47

Open zhouzhongyuan opened 7 years ago

zhouzhongyuan commented 7 years ago

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

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 commented 7 years ago

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

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

zhouzhongyuan commented 7 years ago

假语村言

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

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

zhouzhongyuan commented 7 years ago

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 commented 7 years ago

Webpack 大法之 Code Splitting

zhouzhongyuan commented 7 years ago

一次优化路程

原来情况

production warning

zhouzhongyuan commented 6 years ago

Webpack的原理

zhouzhongyuan commented 6 years ago

Yigo 1.6打包压缩流程

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

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

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

Intro

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)

总结

复习

zhouzhongyuan commented 6 years ago

webpack-dev-server

publicPath: 路由，类似express中的static