webpack简介与利用,即以后临

By admin in 4858美高梅 on 2019年3月31日

原稿出处:  Nuxt 2 is coming! Oh yeah! – Nuxt.js – Medium

Webpack 是2个前端财富加载/打包工具,我们单位的一条首要技术栈正是Webpack+React+ES6+node,即使事先本人做个人项目也接触好数次Webpack,然则自身并没有色金属切磋所读总括过Webpack的知识点,读了wepack-demos,那些demos尽管是基于webpack@1.x的,可是举例得蛮简洁明了,所以本次就简单翻译此文的有的首要。

迎接小伙伴们为 前端导航仓库 点star https://github.com/pfan123/fr…
前端导航平台访问

webpack4在三月初的时候公布,此次webpack4有了三个名字”Legato”,也便是”连奏”的意味,寓意webpack在相连前行,而且是无缝(no-gaps)的开拓进取。webpack的进化点是通过捐献赠送者和用户投票来决定的,在此以前在介绍webpack3的时候,曾付出过投票数在前几名的优化点,集中在用户体验、营造品质(速度和产出大小)、通用和适配性(es
module、typescript、web
assemble)等。webpack4发表了,上面将构成文档和实施,验证一下webpack是还是不是达成了当年的诺言。

 []

什么是Webpack?

Webpack是一个前端财富加载/打包工具,只须求相对简便易行的布局就足以提供前端工程化必要的各样功用,并且只要有需求它还足以被重组到任何诸如
Grunt / 居尔p 的工作流。

安装 Webpack:npm install -g webpack。

Webpack 使用三个名为 webpack.config.js 的陈设文件。

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

有个别你应当明了的指令:

  • webpack —— 进行2遍编写翻译
  • webpack -p —— 举办二次编写翻译(压缩成一行)
  • webpack –watch —— 持续编写翻译
  • webpack -d  —— 编写翻译完结后含有3个maps文件
  • wepack –colors —— 使压缩文件变可以(作者临时没看出来)

在开发应用程序时,能够在package.json文件中编辑scripts字段,如下所示:

// package.json
{
  // ...
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors",
    "deploy": "NODE_ENV=production webpack -p"
  },
  // ...
}

CommonJS 和 速龙 是用以 JavaScript
模块管理的两大正规,前者定义的是模块的三头加载,首要用来 NodeJS
;而后者则是异步加载,通过 RequireJS 等工具适用于前者。随着 npm
成为主流的 JavaScript 组件公布平台,越多的前端项目也借助于 npm
上的档次,只怕自身就会公布到 npm 平台。因而,让前者项目更有益于的施用 npm
上的财富变成一大须求。

webpack4中的新特征

webpack3webpack简介与利用,即以后临。官方发表的时候,提到了下个本子恐怕的改动点,翻译过来如下所示:

  • 高品质的创设缓存
  • 晋级开首化速度和增量塑造成效
  • 更好的支撑Type Script
  • 修订长时间缓存
  • 援助WASM 模块扶助
  • 升级用户体验

webpack4官方揭橥的文书档案之中首要提及了以下新特点:

 

入口文件

进口文件是三个Webpack将会读取它并将它编写翻译成bundle.js的文书

demo01:单个入口文件:

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

demo02:多少个入口文件:(它对多页面app是万分实惠的)

// index.html
<html>
  <body>
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
  </body>
</html>

// webpack.config.js
module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'
  }
};

web 开发中常用到的静态能源首要有 JavaScript、CSS、图片等公事,webpack
中校静态能源文件称之为模块。 webpack 是1个 module bundler
(模块打包工具),其得以合作各样 js
书写规范,且能够拍卖模块间的依靠关系,具有更强硬的 js
模块化的意义。Webpack 对它们举行统一的管住以及包装公布,上边那张图来说明Webpack 的成效:

支撑零配置(Zero Configuration)

该天性主要用来缓解webpack的三昧高难题,webpack是三个安顿注明式的操作方式,npm、gulp是指令式的,须要描述每一步是为啥的,而webpack的配备项凌乱且冬日,冬辰,让广大开发者胃疼。
webpack4提供了零配置方案,暗许入口属性为./src,默许输出路径为./dist,不再须求安排文件,完结了开箱即用的卷入能力,更通俗的讲,webpack会自动寻找项目中src目录下的index.js文件,然后选择的情势展开相应的卷入操作,最终新建dist目录并扭转2个main.js文件。此外针对开发环境和线上环境提供了二种包装形式:"production""development""production"形式内置了项目出现时的骨干配备项,"development"格局基本知足了快捷创设和支付体验。使用的法门是在运营webapck命令的时候,设置好mode参数的值即可,暗许是production属性。

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production" 
}

实际的案例可以前往github举办下载。

下边依据官方的文书档案介绍一下三种格局。

  • Production模式

提供了公布程序时的优化配置项,意在更小的产出文件、更快的运作速度、不暴光源码和途径。会暗许采取代码压缩(minification),功用域提高(scope
hoisting),tree-shaking,NoEmitOnErrorsPlugin,无副成效模块修剪(side-effect-free
module pruning)等。

  • Development模式

目的在于进步开发调节和测试过程中的体验,如更快的创设速度、调节和测试时的代码易读性、暴露运转时的错误信息等。会私下认可选取bundle的出口包蕴路径名和eval-source-map等,进步代码的可读性和创设速度。

两种形式便是多少个箱子,箱子里面就是各类插件工具,只是稍稍是开启的,有个别是关门的,具体有啥工具得以参考那篇作品。


Babel-loader

加载器是预处理器,它转换您的应用程序的财富文件(更多新闻)。例如,Babel-loader能够将JSX
/
ES6文本转换为JS文件。官方文书档案有2个一体化的加载器列表。

// webpack.config.js
module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
    ]
  }

或者
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}

4858美高梅 1

废弃CommonsChunkPlugin

webpack4废弃了CommonsChunkPlugin,引入了optimization.splitChunksoptimization.runtimeChunk,目的在于优化chunk的拆分。先介绍一下code
splitting下的CommonsChunkPlugin有哪些毛病,然后仔介绍一下chunk
split是怎么开始展览优化的。

  • CommonsChunkPlugin的问题

CommmonsChunkPlugin的思路是Create this chunk and move all modules matching minChunks into the new chunk,即将满意minChunks布局想所设置的规范的模块移到1个新的chunk文件中去,这些思路是依照父子关系的,也正是那个新出现的new
chunk是全数chunk的老爹,在加载孩子chunk的时候,父亲chunk是必须求超前加载的。举个例子:

example:
entryA:  vue  vuex  someComponents
entryB:  vue axios someComponents
entryC: vue vux axios someComponents
minchunks: 2 

现身后的chunk:

vendor-chunk:vue vuex axios
chunkA~chunkC: only the components

带动的标题是:对entryA和entryB来说,vendor-chunk都包罗了剩余的module。
康芒斯ChunkPlugin其它1个标题是:对异步的模块不和谐。下边也举例表明:

example:
entryA:  vue  vuex  someComponents
asyncB:vue axios someComponents
entryC: vue vux axios someComponents
minchunks: 2 

并发后的chunk:

vendor-chunk:vue vuex 
chunkA: only the components
chunkB: vue axios someComponents
chunkC: axios someComponents

拉动的题材是:若是asyncB在entryA中动态引入,则会引入多余的module。
看来CommonsChunkPlugin有以下多少个难题:

  1. 并发的chunk在引入的时候,会含有重复的代码;
  2. 无法优化异步chunk;
  3. 高优的chunk产出供给的minchunks配置相比复杂。
  • SplitChunksPlugin

与CommonsChunkPlugin的父子关系思路差别的是,SplitChunksPlugin引入了chunkGroup的定义,在入口chunk和异步chunk中发觉被重复使用的模块,将重叠的模块以vendor-chunk的款型分离出来,也正是vendor-chunk或者有七个,不再受限于是全数chunk中都一齐存在的模块,原理的表示如下图所示:
4858美高梅 2

中间,能够窥见SplitChunksPlugin产出的vendor-chunk有多个,对于入口A来说,引入的代码只有chunkA、vendor-chunkA-B、vendor-chunkA-C、vendor-chunkA-B-C;那时候chunkA、vendor-chunkA-B、vendor-chunkA-C、vendor-chunkA-B-C形成了二个chunkGroup。上面举个列子:

example:
entryA:  vue  vuex  someComponents
entryB:vue axios someComponents
entryC: vue vux axios someComponents

出现后的chunk:

vendor-chunkA-C:vuex 
vendor-chunkB-C:axios
vendor-chunkA-B-C:vue
chunkA: only the components
chunkB: only the components
chunkC: only the components

SplitChunksPlugin能够化解掉CommonsChunkPlugin中涉及的几个难点,SplitChunksPlugin在production方式下是私下认可开启的,可是它默许只效劳于异步chunk,如若要效益于入口chunk的话,需求配置optimization.splitChunks.chunks: "all",同时webpack自动split
chunks是有多少个限制标准的:

  1. 新面世的vendor-chunk是要被共享的,可能模块来自npm包;
  2. 新面世的vendor-chunk的轻重缓急得大于30kb;
  3. 互动请求vendor-chunk的多寡不能够超越七个;
  4. 对此entry-chunk而言,并行加载的vendor-chunk不可能超出三个。

那个限制能够在SplitChunks的暗中同意配置项中能够一一对应的看出。

splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    name: true,
    cacheGroups: {
        default: {
            minChunks: 2,
            priority: -20
            reuseExistingChunk: true,
        },
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        }
    }
}

实际简单通晓这一个限制,因为SplitChunksPlugin产生的结果正是本来chunk被拆分了,引入的文件数量会变多,因而须要在文书数量上海展览中心开限制。

  • runtimeChunkPlugin

在采纳CommonsChunkPlugin的时候,大家平时会把webpack
runtime的功底函数提取出来,单独作为2个chunk,终归code
splitting想把不变的代码单独抽离出来,方便浏览器缓存,进步加载速度。webpack4屏弃了CommonsChunkPlugin,接纳了runtimeChunkPlugin能够将各类entry
chunk中的runtime部分的函数分离出来,只须要二个简单易行的计划:optimization.runtimeChunk: true

1.4.0公布25天后,Nuxt2就即以往临。超越3叁十一遍提交,320回变动文件,8,200次添加和7,000次删除(不包罗其它nuxt
repositories)!好吧,就像是居多生成,但决不担心,大家会尽最大努力压缩breaking
changes的多寡,更加多的关爱于安乐,品质和更好的费用体验。我们对那个变化举行了总计:

CSS-loader

Webpack允许你在JS文件中援引CSS,然后接纳CSS-loader预处理CSS文件。

// main.js
require('./app.css');

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
  }
};

只顾,你不能够不利用三个加载器来更换CSS文件。首先是CSS-loader读取CSS文件,另一个是Style-loader将Style标签插入HTML页面。不一致的装载器通过感叹号(!)链接。

起步服务器后,index.html将具备内部样式表。(demo04)

Webpack的为主原理

Webpack的多个最主题的法则分别是:

1.整个皆模块

正如js文件能够是二个“模块(module)”一样,别的的(如css、image或html)文件也可视作模
块。由此,你能够require(‘myJSfile.js’)亦能够require(‘myCSSfile.css’)。那表示大家能够将东西(业务)分割成更小的简单管理的一部分,从而达成重复利用等的指标。

2.按需加载

价值观的模块打包工具(module
bundlers)末了将有着的模块编写翻译生成3个庞大的bundle.js文件。然而在实事求是的app里边,“bundle.js”文件只怕有10M到15M之大大概会导致应用一直处在加载中状态。由此Webpack使用过多性子来划分代码然后生成多少个“bundle”文件,而且异步加载部分代码以促成按需加载。

sideEffects

在webapck2初始补助ESModule后,webpack提议了tree-shaking实行无用模块的清除,首要重视ES
Module的静态结构。在webapck4在此以前,主要通过在.babelrc文件中装置"modules": false来开启无用的模块检查和测试,该措施显著比较野蛮。webapck4灵活扩张了怎么对某模块举行无用代码检测,重要通过在package.json文件中安装sideEffects: false来告诉编写翻译器该类型或模块是pure的,能够开始展览无用模块删除。
官方的github上提供了1个sideEffects的demo示例供参考,若是对tree-shaking的概念不是太精晓,可去官方的文档中tree-shaking部分详细了然。下边是官方提供的三个减包效果示例,仅供观赏。
4858美高梅 3

🏎 Webpack 4 (Legato)

仅那个创新就值得一篇专门的小说。有哪些新本性呢?

  • 🏎 Webpack 4, is FAST!

  • 😍 Mode, #0CJS, and sensible defaults

  • ✂ Goodbye CommonsChunkPlugin

  • 🔬WebAssembly Support

  • 🐐 Module Type’s Introduced + .mjs support

想打听越来越多消息请看 Sean T. 拉金的 那篇文章 以及Webpack Release Notes.

别的革新:

  • Default dev tool for client bundle is the webpack
    default eval which is the fastest option.

  • Module Concatenation (Scope Hoisting) optimization is enabled by
    default.

  • 删除了尝试属性 build.dll。它不稳定,而webpack 4速度已经足足快。

💡 搬迁提醒: 好新闻是,你不要求改变项目中的任何代码。只要升级到Nuxt
2,全部东西都会即时迁移。

Image loader

// main.js
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);

var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);

// index.html
<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }
};

url-loader转换图像文件。假使图像大小小于8192字节,则将其更换为数量U帕杰罗L;不然,它将被转移为常规的U帕杰罗L。如你所见,问号(?)用于将参数字传送递到加载器。

运维服务器后,small.png和big.png将有以下UMuranoL。

<img src="data:image/png;base64,iVBOR...uQmCC">
<img src="4853ca667a2b8b8844eb2693ac1b2578.png">

webpack 官网文书档案

官网地址:

华语官网:

协理压缩ES6+代码

在webapck4在此以前,webpack.prod.conf.js中关于UglifyJsPlugin的诠释会有诸如此类一段话:

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify

情趣就是UglifyJs不能对ES6+的代码实行削减,需利用babel-minify获取更好的treeshaking效果。webapck4近日早就帮助压缩ES6+的代码。

// 源代码
import {sayHello} from './libs/js/util.js'
let output = sayHello('hwm');
console.log(output);

// 产出
...let r=(e=>`Hello ${e}!`)("hwm");console.log(r)}...

👋 弃掉了venders

我们原先一向选取 vendors
chunk,这一次揭橥后,大家不再选用CommonsChunkPlugin,所以不必明显钦点
vendors。Nuxt自动添加了着力的packages(包涵vue,vue-router,babel-runtime…)到Cache
Group
中。那使得webpack能够用最合情合理的不二法门拆分你的代码。

💡 搬迁提醒: 借使您在档次的 nuxt.config.js中安插了
vendors,直接去掉即可。 纵然您是二个module author,你能够继续行使
this.addVendor(),但我们也许会有弃用提示。

UglifyJS Plugin(裁减输出)

Webpack有二个插件系统来扩大其意义。例如,UglifyJs
Plugin将减弱输出(bundle.js)JS代码。(demo07)

// webpack.config.js
var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

减去的成效如下:

// 压缩前
var longVariableName = 'Hello';
longVariableName += ' World';
document.write('<h1>' + longVariableName + '</h1>');

// 压缩后
var o="Hello";o+=" World",document.write("<h1>"+o+"</h1>")

webpack 的优势

对 CommonJS 、 英特尔 、ES6 的语法做了卓绝
对 js、css、图片等财富文件都帮忙打包
串联式模块加载器以及插件机制,让其具备更好的八面见光和扩大性,例如提供对
CoffeeScript、ES6的扶助
有单独的配备文件 webpack.config.js
能够将代码切割成区别的 chunk,实现按需加载,下降了早先化时间
匡助 SourceUrls 和 SourceMaps,易于调试
具备强大的 Plugin 接口,大多是内部插件,使用起来相比灵活
webpack 使用异步 IO 并装有一体系缓存。那使得 webpack
相当慢且在增量编写翻译上更增加速度

扶助越多的模块类型

webpack4支持以importexport情势加载和导出本地的WebAssembly模块,这一块小编实际项目尚未选用到,暂不做牵线;其余,webpack4匡助json模块和tree-shaking,在此以前json文件的加载必要json-loader的支撑,webpack4已经能够帮助json模块(JSON
Module),不须求格外的配置;别的,当json文件用ESModule的语法import引入的时候,webpack4仍可以帮助对json模块实行tree-shaking处理,把用不到的字段过滤掉,起到减包的功用。下边是个示范:

// 引用数据的三种方法
let jsonData = require('./data/test.json');

import jsonData from './data/test.json'

// 打包时只会提取test.json文件中onePart部分。
import { onePart } from './data/test.json' 

✂️ chunk splitting的通通控制

从前,Nuxt被挑接纳于代码分割。就算Nuxt试图提供最得力的划分,但方今得以行使
build.splitChunks慎选完全控制它,并且能够选择禁止使用每个路由的异步块。

⚠️ BREAKING CHANGE: nuxt默许不再拆分layout chunks,它们将像nuxt
core, plugins, middleware和store一样被加载进主入口。你也能够经过
build.splitChunks.layouts:true使得layout拆分。其它为了更好的主宰*
webpack *块分割,你能够利用 build.optimization.splitChunks选项。

⚠️ BREAKING CHANGE: 对于生产环境,大家不再接纳文件名作为 chunk names
的一局部( /_nuxt/pages/foo/bar.[hash].js变成
[hash.js])那样不难让外人意外发现工程内部的纰漏。你也能够利用
build.optimization.splitChunks.name:true强制开启。
(假如未钦赐,names依然在 dev--analyze 情势下启用)

⚠️ BREAKING CHANGE:
webpack私下认可不会拆分runtime(manifest)chunk以调整和收缩异步请求而是将其移入main
chunk。你可以利用 build.optimization.runtimeChunk:true启用。

⚠️ 注意:
Nuxt的暗许设置基于最好实践,并在与实际项目接纳之后进展了优化。建议阅读
托比亚斯 Koppers写的帕杰罗IP CommonsChunkPlugin并在历次变更之后选择
nuxt build--analyze.

💡 搬迁提示:
保持默许值。依照你的须要对您的莫过于项目进展标准测试并依据须要定制选项。

电动打开浏览器&&自动创设index.html

此演示向你演示如何加载第③方插件。
html-webpack-plugin能够为您创设index.html,并且当Webpack加载时,open-browser-webpack-plugin能够打开四个新的浏览器选项卡。

// main.js
document.write('<h1>Hello World</h1>');

// webpack.config.js
var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Webpack-demos',
      filename: 'index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ]
};

webpack 安装和配备

如何迁移升级到webpack4

🔥 Vue Loader 15 and mini-css-extract-plugin

即便你没有听过vue-loader, 其实他就是把 .vue 文件分析为可运转的JS/CSS
and HTMl。Vue-Loader
15进展了截然的重写,它应用了一种截然不相同的新架设,可以将webpack配置中定义的别样规则应用于
*.vue文件内。

对于CSS抽取,大家使用三个新的插件
mini-css-extract-plugin,它辅助CSS和SourceMaps(CSS
splitting)的按需加载,并塑造在新的webpack v四个性(module types)上。

二者都以新的,所以在我们最终的2.0.0版本发表在此以前,测度会有部分不均等。

环境标志

您能够仅在装有环境标志的支出环境中启用一些代码(demo09)

// main.js
document.write('<h1>Hello World</h1>');

if (__DEV__) {
  document.write(new Date());
}

// index.html
<html>
<body>
  <script src="bundle.js"></script>
</body>
</html>

// webpack.config.js
var webpack = require('webpack');

var devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [devFlagPlugin]
};

接下来未来将环境变量传递到webpack。

# Linux & Mac
$ env DEBUG=true webpack-dev-server

# Windows
$ set DEBUG=true
$ webpack-dev-server
安装
npm install -g webpack  //全局安装
npm install --save-dev webpack   //局部安装

0配置的局限性

webpack4声称能够0配置,不过0配置有诸多局限性,比如不得不是单入口的档次,入口和出现的文本名是定点的,entry是src目录下的index.js,产出是dist目录下的main.js,很肯定不能够满意实际项目应用。于是,开发者照旧得自个儿布署webpack.config.js文件。

Nuxt 💖 ES modules

明日你能够在 nuxt.config.js中使用 import and export ,
服务器middleware和modules要感谢std/esm. A fast, production ready,
zero-dependency package to enable ES modules in Node 6+ by John-David
Dalton.

Common chunk(抽出公用脚本)

当多脚本具有公共块时,能够应用CommonsChunkPlugin将公共部分提取到独门的文本中。

// main1.jsx
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById('a')
);

// main2.jsx
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h2>Hello Webpack</h2>,
  document.getElementById('b')
);

// index.html
<html>
  <body>
    <div id="a"></div>
    <div id="b"></div>
    <script src="init.js"></script>
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
  </body>
</html>

// webpack.config.js
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: {
    bundle1: './main1.jsx',
    bundle2: './main2.jsx'
  },
  output: {
    filename: '[name].js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
    ]
  },
  plugins: [
    new CommonsChunkPlugin('init.js')
  ]
}
执行
webpack —config webpack.config.js

webpack4配置文件的变化点

哪些布署webpack4下的安顿文件,必要大致了然webapck4的陈设项的改动点。
mode:开发方式 development

  • 敞开dev-tool,方便浏览器调节和测试
  • 提供详实的谬误提示
  • 选取缓存机制,完成急迅创设
  • 开启output.pathinfo,在出现的bundle中显得模块路径消息
  • 开启NamedModulesPlugin
  • 开启NoEmitOnErrorsPlugin

mode:生产格局 production

  • 运转各样优化插件(ModuleConcatenationPlugin、optimization.minimize、ModuleConcatenationPlugin、Tree-shaking),压缩、合并、拆分,产出更小容量的chunk
  • 关闭内部存款和储蓄器缓存
  • 开启NoEmitOnErrorsPlugin

plugin

  • 松开optimization.minimize来压缩代码,不用再展现引入UglifyJsPlugin;
  • 废弃CommonsChunkPlugin插件,使用optimization.splitChunks和optimization.runtimeChunk来代替;
  • 使用optimization.noEmitOnErrors来替换NoEmitOnErrorsPlugin插件
  • 使用optimization.namedModules来替换NamedModulesPlugin插件

loader

  • 舍弃json-loader,友好援助json模块,以ESMoudle的语法引入,还足以对json模块进行tree-shaking处理;

别的的改动消息提议查看webpack的汉语升级日志。

🖥️ CLI 改善

我们卓殊感激开发人士,并相信她们须要优雅的费用经历才能成立美好的东西,所以我们重写了过多有关CLI的事物。

在使用 nuxt dev时,
固然CLI展现Nuxt准备稳妥,您也说不定感觉到到创设延迟。那是因为webpack运营五次。3回用于客户端,三遍用于SS大切诺基捆绑。第三个是东躲江西的!因而,大家创立了
WebpackBar ,使得开发方式越发顺风。

当今,全数debug消息都暗中同意隐藏(能够使用 DEBUG=nuxt:*
环境变量启用),相反,大家会为builder和generator体现更好的消息。

Nuxt平时供给的增加效率支撑Test and CI(持续集成)环境。 Nuxt
2自动物检疫查和测试配置项和测试环境,并将切换成1个称作minimalCLI的非正规形式,其中包括更少的详实新闻。

Vendor chunk

您还足以行使CommonsChunkPlugin从剧本上校供应商库提取到独门的公文中。(优化代码层面)

// main.js
var $ = require('jquery');
$('h1').text('Hello World');

// index.html
<html>
  <body>
    <h1></h1>
    <script src="vendor.js"></script>
    <script src="bundle.js"></script>
  </body>
</html>

// webpack.config.js
var webpack = require('webpack');

module.exports = {
  entry: {
    app: './main.js',
    vendor: ['jquery'],
  },
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.js')
  ]
};

借使你想要一个模块作为变量在各类模块,如使$和jQuery可用在各类模块没有写require(“jquery”)。你应该利用ProvidePlugin(官方文书档案)。

// main.js
$('h1').text('Hello World');


// webpack.config.js
var webpack = require('webpack');

module.exports = {
  entry: {
    app: './main.js'
  },
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
};
配置

各类项目下都必须配备有多个webpack.config.js平日位于项目标根目录中,它本身也是多少个标准的Commonjs规范的模块。在导出的安排对象中有多少个根本的参数:

vue-cli项目怎么着改造

介绍完了webpack4中着力配置项的变更,接下去结合vue-cli示例项目介绍一下,怎么着布署webpack.conf.js文件。
1.升级npm包版本

提议升级webpack4,同时晋级涉及到的loaders和plugins。webpack4 中 cli
工具分别成了 webpack 宗旨库 与 webpack-cli 命令行工具八个模块,要求利用
CLI ,必安装 webpack-cli 至项目中。

npm i webpack webpack-cli webpack-dev-server -D

事关到的插件有:

"vue-loader": "^15.0.10",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"copy-webpack-plugin": "^4.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.1.0",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-dev-middleware": "^3.1.2",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "^4.1.0"

2.修改webpack.base.conf.js

webpack4推荐应用了新型版本的vue-loader(”vue-loader”:
“^15.0.10″),不过最新的vue-loader须要在webapck
config文件中安装VueLoaderPlugin插件,不然会报以下错误:

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

webpack.base.conf.js文件中的改动首若是添加VueLoaderPlugin插件。

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    ...
    plugins: [
        // 添加VueLoaderPlugin,以响应vue-loader
        new VueLoaderPlugin()
  ],
    ...
}

3.修改webpack.dev.conf.js

添加mode属性,并设置为development方式;然后注释掉
webpack4开发格局已经停放的插件,如webpack.NamedModulesPluginwebpack.NoEmitOnErrorsPlugin
插件。
4858美高梅 4

4.修改webpack.prod.conf.js

添加mode属性,并设置为production方式;然后注释掉
webpack4生育方式已经松手的插件,如CommonsChunkPluginuglifyjs-webpack-plugin
ModuleConcatenationPlugin插件;最终根据webpack4提供的文书档案配置optimization,使用splitChunksruntimeChunk成就chunk的领取和优化。
4858美高梅 5

const webpackConfig = merge(baseWebpackConfig, {
...
    optimization: {
    // 采用splitChunks提取出entry chunk的chunk Group
    splitChunks: {
      cacheGroups: {
        // 处理入口chunk
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          name: 'vendors',
        },
        // 处理异步chunk
        'async-vendors': {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          name: 'async-vendors'
        }
      }
    },
    // 为每个入口提取出webpack runtime模块
    runtimeChunk: { name: 'manifest' }
  }
...
})

经过上述操作,我们早已主导形成了vue-cli项目标改造。运转品种的时候,注意看控制台的报错,是哪位插件报的错就去升高卓殊插件,假如存在找不到模块之类的荒谬就去提高对应的loader。vue-cli项目webapck4下布署demo已经上传到github,欢迎下载。

路 Nuxt 1.0中除去的成效

  • Removed context.isServer and context.isClient (Use process.client and process.server)

  • Removed options.dev in build.extend() (Use options.isDev)

  • Removed tappable hooks ( nuxt.plugin()) in modules (Use new hooks
    system)

  • Removed callback for modules (Use async or return a Promise)

热更新

热模块替换(HM奔驰M级)沟通,添加或删除模块,而应用程序正在运转,而从未页面重新加载。

你有三种方法通过webpack-dev-server启用热模块更换。

(1)在指令行中钦定–hot和–inline

$ webpack-dev-server --hot --inline

分选的意义:

  • –hot: 添加HotModuleReplacementPlugin并将服务器切换来热方式。
  • –inline: 将webpack-dev-server运行时放置到bundle中。
  • –hot –inline: 还添加了webpack/hot/dev-server条目。

(2)修改webpack.config.js文件(demo15)

  • 添加新webpack.HotModuleReplacementPlugin() 的插件
  • 添加webpack/hot/dev-server 和
    webpack-dev-server/client? 到输入字段

    // webpack.config.js
    var webpack = require(‘webpack’);
    var path = require(‘path’);

    module.exports = {
    entry: [

    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    './index.js'
    

    ],
    output: {

    filename: 'bundle.js',
    publicPath: '/static/'
    

    },
    plugins: [

    new webpack.HotModuleReplacementPlugin()
    

    ],
    module: {

    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      },
      include: path.join(__dirname, '.')
    }]
    

    }
    };

    // App.js
    import React, { Component } from ‘react’;

    export default class App extends Component {
    render() {

    return (
      <h1>Hello World</h1>
    );
    

    }
    }

    // index.js
    import React from ‘react’;
    import ReactDOM from ‘react-dom’;
    import App from ‘./App’;

    ReactDOM.render(, document.getElementById(‘root’));

    // index.html




entry

entry
参数定义了打包后的输入文件,可以是个字符串或数组只怕是目的;假诺是数组,数组中的全部文件会打包生成1个filename文件;要是是目的,可以将不一样的文件创设成差异的文书:

  entry: {
      index: "./page1/index.js",  
      //支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出
      login: ["./entry1/login.js", "./entry2/register.js"]
  }

实例说话—webpack4的属性怎么样

webapck4意在开发情势下升高创设速度、进步用户体验,在生养形式下减小产出包的大小,升高加载和运维速度,上边是webapck3和webapck4下vue-cli的webapck模板项指标实效截图:
开发者形式下:
4858美高梅 6

4858美高梅 7
由上图可以知道:webapck4下的创设速度是3703ms,显明是因为webapck3下的5617ms;

生产方式下:
4858美高梅 8

4858美高梅 9
由上海教室能够精通:webapck4下的app-chunk的轻重是933byte,鲜明低于webapck3下的11.6K;webapck4下vendor-chunk的高低是109K,小于webapck3下的112K。
二种形式下,webapck4性能上确实是精进不少,固然有各类坑,依然提议把坑填了,升级到webpack4。

🎌 Experimental Multi-Thread Compiler

即便那将是webpack 5的合法功用,但您能够动用实验性的
options.build.cache:true来启用cache-loader和babel cache以及
options.build.parallel:true启用thread-loader。

得力的链接

  • Webpack docs
  • webpack-howto
  • Diving into
    Webpack
  • Webpack and React is
    awesome
  • Browserify vs
    Webpack
  • React Webpack
    cookbook

 下回会学习计算webpack2的布置相关总括,有科学的小说欢迎分享。

output

output参数是个指标,定义了出口文件的岗位及名字:

output: {
        path: path.resolve(__dirname, "build"), //打包输出路径,建议绝对路径

        // 配置文件在html中引用的根路径,改变静态资源引入的相对路径
        publicPath: "/assets/",
        //publicPath: "http://cdn.com/assets/",//可加上完整的url,效果与上面一致

        filename: "js/bundle.js",  // 单页应用只有一个入口文件时使用,引用入口模块
        filename: "js/[name].js",  // 传统多页应用有多个入口文件时使用,[name] 代入entry配置中的任意一项模块的名称,如:index
        filename: "js/[hash]/[chunkhash].js",  // 为生产环境实现前端静态资源增量更新时使用,[hash]是根据每次编译后项目总体文件的hash值, [chunkhash]是根据每个模块内容计算出的hash值

    }

webpack的未来

想通晓webpack的前途,建议先过一下webpack的野史。
webpack1支撑CMD和AMD,同时兼有足够的plugin和loader,webpack逐步获得广泛应用。
webpack2相对于webpack最大的改良正是永葆ES Module,能够直接分析ES
Module之间的借助关系,而webpack1亟须将ES
Module转换到CommonJS模块然后,才能使用webpack实行下一步处理。除了那么些之外webpack2帮助tree
sharking,与ES Module的筹划思路中度吻合。
webpack3相对于webpack2,过渡相对平静,不过新的性状大都围绕ES
Module提议,如Scope Hoisting和Magic Comment。
webpack4集中发力在用户体验、营造品质(速度和产出大小)、通用和适配性(es
module、typescript、web assemble)。
展望以往,webpack的前途必定不止升级用户体验、下降利用门槛,进一步升高创设速度和出现代码的质量,同时webpack的公司曾经承诺会依照社区的投票来决定新特征开发优先权。以下是布告中付出的前景的重中之重关心点:

  • 此起彼伏修订长时间缓存
  • webapck任务八线程化,进步开始化速度和增量创设效能
  • 升高CSS到一等国民,引入CSS Module
    Type ,吐弃ExtractTextWebpackPlugin
  • 晋升HTML到一等老百姓,引入HTML Module Type 
  • 后续扩充0CJS(0配置文件),参与越来越多扩充
  • 优化援助WASM 模块,从实验阶段过渡到祥和阶段
  • 四处进步用户体验

⭕ SPA改善

Nuxt.js是Vue.js开发人士的通用框架,那意味着它可以用于SS福睿斯或仅用于客户端(单页面应用)情势。大家重新修改了SPA的有的要害内容。

SPA主要的零部件之一是页面加载提示器。它被重新规划,假设发生任何难题就会进来错误状态,并会在约2秒后自适应地从头在DOM中显示。假若SPA应用加载速度够快,那将推动不供给的闪屏。大家还添加了aria标签,以救助显示屏阅读器和摸索引擎正确检查和测试运营画面。

SPA情势选取尤其的meta渲染器将
nuxt.config.js中定义的拥有meta标签添加到页面标题中,以贯彻SEO和HTTP2扶助!大家也为SPA形式扩充了
options.render.bundleRenderer.shouldPrefetch
options.render.bundleRenderer.shouldPreload

⚠️ BREAKING CHANGE:
shouldPrefetch默许是禁止使用的。许多用户反映不须求的页面块prefetch,特别是在中等项目上。其它,全数不须要的财富提醒在非生产格局下都会被禁止使用,以便于调节和测试。

module

在webpack中JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等静态文件都以模块,不一样模块的加载是透过模块加载器(webpack-loader)来统管的:

module: {
 rules: [
   {
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
     loader: 'file-loader',
     query: {
       limit: 8192,
       name: '.[name].[ext]?[hash]'
     },

   },     
   // 使用多个插件,使用use,sass文件使用style-loader, css-loader, less-loader来处理
   {
       test: /\.(sass|scss)$/,
       use: [
           'style-loader',
           'css-loader',
           'sass-loader',
           extractTextPlugin.extract(['style','css', 'less'])     
       ],
   }
 ]
}

注意: webpack 2.x 之后 module.loaders改成了module.rules

参考文献

webapck4官方medium
pr稿
webpack4国语升级日志
webpack4升级指南以及从webpack3.x搬迁
Webpack4 新脾气 及
Vue-cli项目升级
Webpack4合法指点教程
webpack4.0打包优化策略整理
webapck3新特性

 急不可待发表了吗? 使用nuxt-edge!

你能够透过删除 [nuxt][12]并安装 [nuxt-edge][13]NPM
package来帮衬大家试验新型作用。随意留下您的评头品足标上 [edge]

对于yarn,你能够使用那些命令安装: yarn add nuxt@npm:nuxt-edge (Thanks
to the Benoît Emile’s suggestion)

resolve

webpack在创设包的时候会按目录的拓展文件的摸索,resolve属性中的extensions数组中用来配置程序能够自行补全哪些文件后缀:

resolve: {
       modules: [path.resolve(__dirname, "node_modules")]
       extensions: ['', '.js', '.json', '.scss'],

       //模块别名定义,方便后续直接引用别名,无须多写长长的地址
       alias: {
           AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
           ActionType : 'js/actions/ActionType.js',
           AppAction : 'js/actions/AppAction.js'
       }
   }

 期待你的反馈 🙂

Nuxt 2
即今后临。大家正在做最终的检讨,优化和测试以便发表进一步平静的本子。同时大家盼望您的反馈

plugin

webpack提供了[拉长的零部件]用来满足分裂的供给,当然我们也得以活动完毕五个组件来满意本身的须要:

plugins: [
     //your plugins list
 ]

常用插件:

  • HotModuleReplacementPlugin –开启全局的模块热替换(HMENVISION)

  • NamedModulesPlugin
    –当模块热替换(HM奥迪Q7)时在浏览器控制台出口对用户更融洽的模块名字新闻

  • CommonsChunkPlugin –提取chunk公共部分

  • ExtractTextPlugin –独立生成css文件,以外链的花样加载

  • UglifyJsPlugin –压缩js

  • HtmlWebpackPlugin –使用模版生成html

externals

提防将一些 import 的包(package)打包到 bundle
中,而是在运作时(runtime)再去从表面获得这几个扩大正视(external
dependencies)。

譬如说,从 CDN 引入 jQuery,而不是把它包裹:

<script src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"></script>

externals: {
 "jquery": "jQuery"
}

如此那般就淡出了那3个不须求改变的依赖模块,换句话,上面显示的代码还足以健康运作:

import $ from 'jquery';

$('.my-element').animate(...);

webpack-dev-server

webpack-dev-server是八个小型的node.js
Express服务器,它利用webpack-dev-middleware中间件来为通过webpack打包生成的财富文件提供Web服务。它还有1个经过Socket.IO连接着webpack-dev-server服务器的小型运营时先后。webpack-dev-server发送关于编写翻译状态的音讯到客户端,客户端依照音信作出响应。

webpack-dev-server有二种形式补助活动刷新:

  • iframe模式

  • inline模式

iframe模式

页面是嵌套在三个iframe下的,在代码产生变动的时候,那些iframe会重新加载。

应用iframe形式无需额外的安插,只需在浏览器输入 http://localhost:8080/webpack-dev-server/index.html ,显著webpack-dev-server私下认可的格局就是iframe

inline模式

的webpack-dev-server客户端会作为入口文件打包,会在后端代码改变的时候刷新页面。配置格局有二种:CLI配置和经过Node.js
Api手动配置

CLI 方式

4858美高梅 ,此方法相比较简单,只需在webpack.dev.server运转的指令中参加–inline即可

  • 修改package.json中scripts配置,添加–inline:

"scripts":{
"start":"webpack-dev-server --inline --config webpack.config.dev.js"
}
  • 再次运营npm start,浏览器访问 http://localhost:8080 即可,修改代码后保存,浏览器自动刷新

Node.js Api方式

  • 率先种方案:将webpack/hot/dev-server配置到全数webpack入口文件中

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);
  • 第两种方案:将webpack-dev-server客户端脚本插入到html中即可:

<script src="http://localhost:8080/webpack-dev-server.js"></script>

Hot Module Replacement

使用webpack-dev-server的自动刷新功能时,浏览器会整页刷新。而热替换的区别就在于,前端代码变动时,无需刷新整个页面,只把变化的部分替换掉。配置的关键在于将webpack/hot/dev-server`
文件参预到webpack全数入口文件中。

ps: 使用前要注入 HMCRUISER插件

// 开启全局的模块热替换(HMR)
new webpack.HotModuleReplacementPlugin(),

// 当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
new webpack.NamedModulesPlugin()

采纳HM智跑同样一致有三种方法:CLI和Node.js Api

CLI方式

命令行配置相比简单,只需在机关刷新的功底上,加上 --hot 配置即可。
此布局会活动将 webpack/hot/dev-server 添加到webpack全部入口点中。

"scripts":{
"start":"webpack-dev-server --inline --hot --config webpack.config.dev.js"
}

Node.js Api方式

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
  hot: true
  ...
});
server.listen(8080);

ps:要使HM大切诺基功效生效,便是要在行使热替换的模块只怕根模块里面出席允许热替换的代码。否则,热替换不会卓有功用,还是会重刷整个页面。上面是摘自webpack在github上docs的原话:

ps: 注意 webpack-dev-server 输出日志

//webpack-dev-server.js输出信息,可以发现
//contentBase存在,都会打印日志 Content not from webpack is served from
//webpack output is served from信息取自 output.publicPath 路径

function reportReadiness(uri, options) {
  const useColor = argv.color;
  let startSentence = `Project is running at ${colorInfo(useColor, uri)}`
  if(options.socket) {
    startSentence = `Listening to socket at ${colorInfo(useColor, options.socket)}`;
  }
  console.log((argv["progress"] ? "\n" : "") + startSentence);

  console.log(`webpack output is served from ${colorInfo(useColor, options.publicPath)}`);
  const contentBase = Array.isArray(options.contentBase) ? options.contentBase.join(", ") : options.contentBase;
  if(contentBase)
    console.log(`Content not from webpack is served from ${colorInfo(useColor, contentBase)}`);
  if(options.historyApiFallback)
    console.log(`404s will fallback to ${colorInfo(useColor, options.historyApiFallback.index || "/index.html")}`);
  if(options.open) {
    open(uri).catch(function() {
      console.log("Unable to open browser. If you are running in a headless environment, please do not use the open flag.");
    });
  }
}

WEBPACK DEV
SERVER

Hot Module
Replacement

Hot Module Replacement 介绍

Hot Module Replacement

怎么样写好.babelrc?Babel的presets和plugins配置分析

webpack2异步加载套路

依照webpack搭建前端工程化解方案探索

【翻译】Webpack——让人嫌疑的地点

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有