前者模块化学工业具-webpack

webpack是什么?

webpack是1个模块打包工具,首要目标是打包JavaScript文件在浏览器中应用,同时拥有转换、打包的力量,可能包装任李海华态财富。

webpack 的优势

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

  1. 帮助CommonJS、ES六 、速龙、UMD等,(甚至是以次充好格局)方便旧项目开始展览代码迁移。
  2. 可以打包成3个整机的包,也足以分成两个部分,在运行时异步加载(能够削减开始加载时间)。
  3. 依靠在编写翻译时即处理达成,能够减去运作时包的轻重。
  4. Loaders能够使文件在编写翻译时收获预处理,那足以帮大家做过多工作,比如说coffee转换来JavaScript,模板的预编译,图片的base64处理;
  5. 支付方便人民群众,能代替部分 grunt/gulp
    的干活,比如打包、压缩混淆、图片转base64等。
  6. 扩张性强,中度模块化插件系统可以适应形成的须要。

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

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

图片 1

webpack与任何工具相比较图

安装

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

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文件,别的3个参数能够是用来安排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);

Plugins

plugin 能够对总体 webpack 的流水生产线实行自然的主宰。

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],基于流的自动化创设筑工程具。

参照文档