前端模块化工具-webpack

作者:工程材料    来源:未知    发布时间:2019-12-18 20:00    浏览量:

前言

webpack是什么?

webpack是三个模块打包工具,主要目的是打包JavaScript文件在浏览器中利用,同时兼有转变、打包的力量,可能包装任黄旭峰态财富。

在未接触browserify,固然本身通晓它是贰个前端营造筑工程具,但依旧有多少个问号:

webpack 的优势

其优势首要能够分类为如下多少个:

  1. 支撑CommonJS、ES6、英特尔、UMD等,(以至是混合情势卡塔尔(英语:State of Qatar)方便旧项目举办代码迁移。
  2. 能够打包成多少个整机的包,也足以分为三个部分,在运维时异步加载(能够减掉发轫加载时间)。
  3. 依据在编写翻译时即管理完成,能够减少运作时包的深浅。
  4. Loaders能够使文件在编写翻译时拿到预管理,那足以帮大家做过多事务,举个例子说coffee转变到JavaScript,模板的预编写翻译,图片的base64处理;
  5. 开荒方便人民群众,能取代部分 grunt/gulp 的行事,举个例子打包、压缩混淆、图片转base64等。
  6. 扩张性强,高度模块化插件系统能够适应产生的须要。
  1. browserify现身的日子?

  2. 能创设哪些文件?

  3. 叠合的browserify代码体量是多大?

  4. 能生成五个出口文件呢?

  5. 如何兼备开辟调节和测验?

与require.js、browserify,jspm等工具的可比

https://webpack.github.io/docs/comparison.html

图片 1

webpack与其它工具相比较图

6. browserify vs webpack?

安装

global:
$ npm install webpack -g
project:
$ npm install webpack --save-dev

browserify 

webpack详解

var webpack = require('webpack');
module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        { test: /.js?$/, loaders: ['react-hot', 'babel'], exclude:/node_modules/ },
        { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        { test: /.css$/, loader: "style!css" },
        { test: /.less/,loader: 'style-loader!css-loader!less-loader'}
        ]
    },
    resolve:{
        extensions:['','.js','.json']
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ]
};

module.exports={
    entry:{
        bundle:"./entry.js",
        feed:"./feed.js"
    },
    output:{
        path:'build',
        filename:"[name].js"
    },
    module:{
        loaders:[
        {test:/.css$/, loader:"style!CSS"}
        ]
    }
}

webpack.config.js文件经常坐落于项目标根目录中,它自身也是三个标准的Commonjs规范的模块。在导出的安顿对象中有多少个基本点的参数:

1.entry

entry能够是个字符串或数组也许是目的。

当entry是个字符串的时候,用来定义入口文件:

1 entry: './js/main.js'
当entry是个数组的时候,里面雷同含有入口js文件,此外一个参数能够是用来陈设webpack提供的一个静态能源服务器,webpack-dev-server。webpack-dev-server会监察和控制项目中每二个文书的扭转,实时的张开创设,而且自动刷新页面:

entry: [
    'webpack/hot/only-dev-server',
    './js/app.js'
]

当entry是个指标的时候,大家得以将差别的文件创设产生差异的文件,按需利用,比方在自己的hello页面中假使<script src='build/Profile.js'></script>引进hello.js就可以:

entry: {
    hello: './js/hello.js',
    form: './js/form.js'
}

2.output

output参数是个对象,用于定义创设后的文本的出口。此中满含path和filename:

output: {
    path: './build',
    filename: 'bundle.js'
}

当我们在entry中定义营造七个文件时,filename可以对应的修改为[name].js用于定义分歧文件创设后的名字。

3.module

至于模块的加载相关,我们就定义在module.loaders中。这里通过正则表达式去相称不一致后缀的文件名,然后给它们定义不一致的加载器。举例说给less文件定义串联的多少个加载器(!用来定义级联关系):

module: {
    loaders: [
        { test: /.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
        { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        { test: /.css$/, loader: "style!css" },
        { test: /.less/, loader: 'style-loader!css-loader!less-loader'}
    ]
}

其余,还是可以够增多用来定义png、jpg那样的图纸能源在低于10k时自动管理为base64图片的加载器:

{ test: /.(png|jpg)$/,loader: 'url-loader?limit=10000'}

给css和less还也许有图片增多了loader之后,大家不仅可以够像在node中那么require js文件了,大家还是能require css、less以至图片文件:

require('./bootstrap.css');
require('./myapp.less');
var img = document.createElement('img');
img.src = require('./glyph.png');

可是须要明白的是,那样require来的公文少禽内联到 js bundle中。假若大家需求把保留require的写法又想把css文件单独拿出去,能够行使下边提到的[extract-text-webpack-plugin]插件。

在上边示例代码中配置的率先个loaders大家得以看见一个称为react-hot的加载器。小编的品类是用来读书react写相关代码的,所以安排了叁个react-hot加载器,通过它,能够完结对react组件的热替换。大家早已在entry参数中计划了webpack/hot/only-dev-server,所以大家如若在起步webpack开辟服务器时开启--hot参数,就足以行使react-hot-loader了。在package.json文件中如此定义:

"scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
}

4.resolve

webpack在构建包的时候会按目录的开展文件的探究,resolve属性中的extensions数组中用来配置程序能够自行补全哪些文件后缀:

resolve:{
    extensions:['','.js','.json']
}

下一场大家想要加载二个js文件时,只要require('common'卡塔尔国就可以加载common.js文件了。

5.plugin

webpack提供了[丰硕的零器件]用来满足分化的需求,当然大家也能够自动完毕三个组件来满意本身的必要。在本人的项目里面未有异样的急需,于是便只是安顿了NoErrorsPlugin插件,用来跳过编写翻译时出错的代码并记录,使编写翻译后运营时的包不会产生错误:

plugins: [
    new webpack.NoErrorsPlugin()
]

6.externals

当大家想在档期的顺序中require一些任何的类库可能API,而又不想让那一个类库的源码被构建到运转时文件中,那在实际费用中很有供给。那个时候我们就能够透过配置externals参数来解除这么些主题材料:

externals: {
    "jquery": "jQuery"
}

这么大家就能够放心的在类型中运用这么些API了:var jQuery = require("jquery"卡塔尔国;

7.context

当我们在require叁个模块的时候,假设在require中带有变量,像这么:

require("./mods/" + name + ".js");

那么在编写翻译的时候大家是不能领略具体的模块的。但这时候,webpack也会为大家做些剖析职业:

1.深入分析目录:'./mods';
2.领到正则表达式:'/^.*.js$/';

于是那个时候为了越来越好地包容wenpack进行编写翻译,大家可以给它指明路径,像在cake-webpack-config中所做的那么(我们在这里地先忽视abcoption的效果):

var currentBase = process.cwd();
var context = abcOptions.options.context ? abcOptions.options.context : 
path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

browserify能够令你利用肖似于 node 的 require()的议程来公司浏览器端的Javascript代码,通过预编写翻译让前端Javascript能够直接使用 Node NPM 安装的有个别库。

Plugins

plugin 能够对任何 webpack 的流程张开一定的垄断(monopoly卡塔尔。

https://webpack.github.io/docs/plugins.html

安装

Loaders 是什么?

loaders是选拔于app能源文件的调换器,取财富文件的源文件作为参数,并赶回新的财富的(运行在nodejs情况)功效函数。
举个例子,你可以动用loaders告诉webpack去加载CoffeeScript 也许JSX.
loader 机制帮助载入有滋有味的静态财富,不只是 js 脚本、连 html, css, images 等种种能源都有对应的 loader 来做信任管理和打包;

-- basic
    * json: Loads file as JSON
    * raw: Loads raw content of a file (as utf-8)
    * val: Executes code as module and consider exports as JavaScript code
    * script: Executes a JavaScript file once in global context (like in script tag), requires are not parsed.
-- packaging

    * file: Emits the file into the output folder and returns the (relative) url.
    * url: The url loader works like the file loader, but can return a Data Url if the file is smaller than a limit.
    * image: Compresses your images. Ideal to use together with file or url.
    * svgo-loader: Compresses SVG images using svgo library
    * baggage: Automatically require any resources related to the required one
    * polymer-loader: Process HTML & CSS with preprocessor of choice and require() Web Components like first-class modules.

-- dialects

    * coffee: Loads coffee-script like JavaScript
    * babel: Turn ES6 code into vanilla ES5 using Babel.
    * livescript: Loads LiveScript like JavaScript
    * sweetjs: Use sweetjs macros.
    * traceur: Use future JavaScript features with Traceur.
    * typescript: Loads TypeScript like JavaScript.

-- templating

    * html: Exports HTML as string, require references to static resources.
    * jade: Loads jade template and returns a function
    * handlebars: Loads handlebars template and returns a function
    * ractive: Pre-compiles Ractive templates for interactive DOM manipulation
    * markdown: Compiles Markdown to HTML
    * ng-cache: Puts HTML partials in the Angular's $templateCache

-- styling

    * style: Add exports of a module as style to DOM
    * css: Loads css file with resolved imports and returns css code
    * cssnext: Loads and compiles a css file using cssnext
    * less: Loads and compiles a less file
    * sass: Loads and compiles a scss file
    * stylus: Loads and compiles a stylus file

-- misc

    * po: Loads a PO gettext file and returns JSON
    * mocha: Do tests with mocha in browser or node.js
    * eslint: PreLoader for linting code using ESLint.
    * jshint: PreLoader for linting code.
    * jscs: PreLoader for style checking.
    * injectable: Allow to inject dependencies into modules
    * transform: Use browserify transforms as loader.

Loaders 列表:
https://webpack.github.io/docs/loaders.html

运行 webpack
webpack 的进行也超轻松,直接实施

$ webpack --display-error-details

就可以,后边的参数“--display-error-details”是援用加上的,方便出错开上下班时间能查看更详实的新闻(比如webpack 搜索模块的长河),进而更好定点到难点。

其他重大的参数有:

$ webpack --config XXX.js //使用另朝气蓬勃份配置文件(比方webpack.config2.js)来打包
$ webpack --watch //监听变动并自动打包
$ webpack -p //压缩混淆脚本,那个丰硕可怜关键!
$ webpack -d //生成map映射文件,告知哪些模块被最后包装到哪儿了
里面包车型地铁 -p 是很主要的参数,曾经一个未压缩的 700kb 的文件,压缩后一向减低到180kb (重倘诺体制那块一句就把持生龙活虎行脚本,导致未压缩脚本变得相当的大) 。

有关工具的一定

webpack的一直是module bundler,作为模块化学工业具,它的角逐对手看起来更疑似[browserify],而不是[Gulp],基于流的自动化创设筑工程具。

npm install -g browserify

参照他事他说加以侦查文档

  • webpack
  • webpack-howto
  • webpack compared
  • 参照他事他说加以考查手册
  • webpack-bootstrap
  • vue-gulp-webpack
  • webpack-bootstrap

示例

module.js:

module.exports = 'It works from module.js.'

module2.js:

module.exports = 'It works from module2.js.'

那是 entry.js 的剧情,像日常的 nodejs 程序那样接受 require(卡塔尔国加载库和文书:

entry.js:

var m = require('./module.js');
var m2 = require('./module2.js');
console.log(m, m2);

使用browserify编译:

$ browserify entry.js > bundle.js

编写翻译后的文书:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var m = require('./module');
var m2 = require('./module2');

console.log(m, m2);
},{"./module":2,"./module2":3}],2:[function(require,module,exports){
module.exports = 'It works from module.js.'
},{}],3:[function(require,module,exports){
module.exports = 'It works from module2.js.'
},{}]},{},[1]);

近日entry.js 必要的享有其余文件都会被编写翻译进 bundle.js 中,蕴含广大层 require(卡塔尔国 的动静也会联合被递归式的编写翻译过来。

编写翻译好的 js能够直接拿到浏览器选用

<script src="bundle.js"></script>

结合gulp

组成Gulp使用时,须求在工程里面增加package.json和设置一些node注重。

示例:

图片 2

gulpfile.js:

var gulp = require("gulp");
var browserify = require("browserify");
var sourcemaps = require("gulp-sourcemaps");
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task("browserify", function () {
var b = browserify({
  entries: "./entry.js",
  debug: true /*告知browserify在运行同时生成内联sourcemap用于调试*/
});

return b.bundle()
  .pipe(source("bundle.js"))
  .pipe(buffer())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sourcemaps.write("."))
  .pipe(gulp.dest("./dist"));
});

这就须求设置:

npm install gulp --save-dev
npm install gulp-sourcemaps --save-dev
npm install browserify --save-dev
npm install vinyl-source-stream --save-dev
npm install vinyl-buffer --save-dev

vinyl-source-stream:用于将browserify的bundle(卡塔尔的输出调换为gulp可用的vinyl(黄金时代种设想文件格式)流。

vinyl-buffer:用于将vinyl流转变为buffered vinyl文件(gulp-sourcemaps及大多Gulp插件都亟需这种格式)

编译运转:

gulp browserify

图片 3

自问自答

1. browserify现身的日子?

在互连网未有找到browserify最早产出的日子的印证,只是有Github上找到最早的版本是在二零一二/6/6。anywhere,那难题并不紧要,也就不追查。

2. 能构建哪些文件?

如下边介绍,只好创设JavaScript文件。

3. 附加的browserify代码体积是多大?

文件归中国人民解放军总后勤部(编译后),browserify附加的代码的体积(不是事情代码)是不到1KB的。

4. 能生成四个出口文件呢?

严苛上讲,单从命令使用,只好是三个出口文件。 

5. 怎么样两全开荒调节和测验?

页面上运转时的js是编写翻译后,所以要专职开辟调节和测验,那仍然要用source map。

PS:可是必需布置到服务器本领看出source map文件。

browserify vs webpack

鉴于自个儿用得不深,上边一些酌见:

  1. 都从前边一个模块化的方案,都亟需预编写翻译。

2. browserify只干JavaScript,webpack啥都干(CSS、JavaScript、图片等)

3. browserify是轻量级的,webpack 全部杀绝、大而全的。 

PS:webpack官方网站有对双边的使用格局举办自己检查自纠:webpack for browserify users

 

总结

有关模块化的,无论是异步模块加载(英特尔),依然browserify的预编写翻译。关键不在于运营时是统百分之十六个文书,依然异步加载。关键是介于处理模块的依据,使开垦时候无需关切模块之间的加载顺序、信任关系,使用办法,只需关怀本人日前模块的付出(不用管使用的模块在何地,那模块又依赖了什么样模块)。

就雷同于maven,提供了二个放置jar包,处理依赖关系,使得第三方库易于使用,最终也可做打包青天布。

于是,无论是用RequireJS、SeaJS,照旧grunt、gulp,恐怕browserify、webpack,最后皆感觉着模块开拓,压缩归并只是一小部分。

 

附录:

身体力行代码:

 

参谋文献

1. browserify【百度宏观】

2.  【知乎】

 

本文为原创文章,转发请保留原出处,方便溯源,如有错误地点,谢谢指正。

本文地址 :

相关新闻推荐

友情链接: 网站地图
Copyright © 2015-2019 http://www.kai-wang.com. AG亚游国际有限公司 版权所有