webpack配置React开发环境,webpack简介与使用

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

Webpack 是多个前端能源加载/打包工具,大家部门的一条重点技术栈就是Webpack+React+ES6+node,尽管事先自身做个人项目也触及好多次Webpack,然而自身并从未研读总括过Webpack的知识点,读了wepack-demos,那个demos即使是依照webpack@1.x的,可是举例得蛮简洁明了,所以此次就回顾翻译此文的一些根本。

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

webpack4在六月首的时候发表,本次webpack4有了2个名字”Legato”,也等于”连奏”的意思,寓意webpack在不断前进,而且是无缝(no-gaps)的升华。webpack的进化点是经过捐献赠送者和用户投票来控制的,在此之前在介绍webpack3的时候,曾提交过投票数在前几名的优化点,集中在用户体验、创设质量(速度和出现大小)、通用和适配性(es
module、typescript、web
assemble)等。webpack4公布了,上面将组成文书档案和实施,验证一下webpack是还是不是贯彻了当时的诺言。

 []

什么是Webpack?

Webpack是1个前端能源加载/打包工具,只须求绝对简便易行的布局就能够提供前端工程化要求的各个效用,并且只要有亟待它还足以被重组到其余诸如
Grunt / 居尔p 的工作流。

安装 Webpack:npm install -g webpack。

Webpack 使用3个名为 webpack.config.js 的安插文件。

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

部分你应当知道的命令:

  • webpack —— 进行一遍编译
  • 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中的新特征

webpack3官方公布的时候,提到了下个本子恐怕的改动点,翻译过来如下所示:

  • 高品质的创设缓存
  • 升迁开始化速度和增量构建成效
  • 更好的帮忙Type Script
  • 修订长时间缓存
  • webpack配置React开发环境,webpack简介与使用。支撑WASM 模块协助
  • 晋级用户体验

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

 

输入文件

入口文件是1个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 是四个 module bundler
(模块打包工具),其可以包容种种 js
书写规范,且可以处理模块间的依赖关系,具有更有力的 js
模块化的作用。Webpack 对它们进行联合的管住以及包装发布,上边那张图来表达Webpack 的效益:

支撑零配备(Zero Configuration)

该个性首要用来化解webpack的良方高难点,webpack是三个配置表明式的操作形式,npm、gulp是指令式的,要求描述每一步是为啥的,而webpack的布署项凌乱且严节,让广大开发者胃疼。
webpack4提供了零配置方案,暗中认可入口属性为./src,暗中同意输出路径为./dist,不再需求配置文件,实现了开箱即用的包裹能力,更通俗的讲,webpack会自动搜索项目中src目录下的index.js文件,然后选拔的形式举办相应的包裹操作,最后新建dist目录并转移1个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文件。官方文书档案有贰个全体的加载器列表。

// 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']
      }
    }
  ]
}

澳门葡京 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配备想所设置的规格的模块移到四个新的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。
CommonsChunkPlugin此外二个问题是:对异步的模块不友好。下边也举例表明:

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中都联合实行存在的模块,原理的示意如下图所示:
澳门葡京 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形成了1个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的根基函数提取出来,单独作为四个chunk,毕竟code
splitting想把不变的代码单独抽离出来,方便浏览器缓存,提高加载速度。webpack4吐弃了CommonsChunkPlugin,选取了runtimeChunkPlugin可以将各个entry
chunk中的runtime部分的函数分离出来,只必要3个简便的配备:optimization.runtimeChunk: true

1.4.0宣布25天后,Nuxt2就即现在临。抢先3二十六回提交,3二十三遍变动文件,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文件,另1个是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上提供了一个sideEffects的demo示例供参考,借使对tree-shaking的定义不是太精通,可去官方的文书档案中tree-shaking部分详细通晓。下边是官方提供的三个减包效果示例,仅供观赏。
澳门葡京 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. Larkin的 那篇小说 以及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;不然,它将被更换为寻常的ULANDL。如您所见,问号(?)用于将参数字传送递到加载器。

开行服务器后,small.png和big.png将有以下U瑞虎L。

<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 、 AMD 、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可以打开3个新的浏览器选项卡。

// 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 v4本性(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运转四回。一遍用于客户端,1次用于SS揽胜捆绑。第③个是暗藏的!因而,我们创立了
WebpackBar ,使得开发方式特别顺畅。

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

Nuxt常常供给的抓牢功能支撑Test and CI(持续集成)环境。 Nuxt
2自动物检疫测配置项和测试环境,并将切换成一个誉为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
插件。
澳门葡京 4

4.修改webpack.prod.conf.js

加上mode属性,并安装为production形式;然后注释掉
webpack4生产形式已经停放的插件,如CommonsChunkPluginuglifyjs-webpack-plugin
ModuleConcatenationPlugin插件;最后依据webpack4提供的文书档案配置optimization,使用splitChunksruntimeChunk完了chunk的领取和优化。
澳门葡京 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)

热更新

热模块替换(HMGL450)沟通,添加或删除模块,而应用程序正在运营,而从不页面重新加载。

您有三种艺术通过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
参数定义了打包后的输入文件,能够是个字符串或数组或许是指标;假设是数组,数组中的全部文件会打包生成一个filename文件;借使是指标,能够将分化的文件创设成不一样的文本:

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

实例说话—webpack4的性格怎样

webapck4意在开发格局下提高创设速度、进步用户体验,在生育方式下减小产出包的尺寸,提高加载和平运动作速度,上面是webapck3和webapck4下vue-cli的webapck模板项目标实效截图:
开发者形式下:
澳门葡京 6

澳门葡京 7
由上海体育地方可以知道:webapck4下的营造速度是3703ms,明显是因为webapck3下的5617ms;

生育形式下:
澳门葡京 8

澳门葡京 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和Intel,同时全部丰硕的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开发职员的通用框架,那表示它能够用于SSRubicon或仅用于客户端(单页面应用)形式。大家重新修改了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提供了[累加的机件]用来满足差别的急需,当然大家也得以活动完结2个零部件来知足自身的需求:

plugins: [
     //your plugins list
 ]

常用插件:

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

  • NamedModulesPlugin
    –当模块热替换(HMSportage)时在浏览器控制台出口对用户更和谐的模块名字消息

  • 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"
}

如此那般就退出了这几个不必要变更的借助模块,换句话,上边显示的代码还足以健康运作:

import $ from 'jquery';

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

webpack-dev-server

webpack-dev-server是多个微型的node.js
Express服务器,它采用webpack-dev-middleware中间件来为经过webpack打包生成的能源文件提供Web服务。它还有叁个透过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 方式

此办法比较不难,只需在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方式

  • 第3种方案:将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: 使用前要注入 HMXC90插件

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

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

选拔HMHighlander同样一致有三种方法: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奥迪Q7功用生效,正是要在利用热替换的模块大概根模块里面参预允许热替换的代码。不然,热替换不会收效,还是会重刷整个页面。下边是摘自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——令人质疑的地点

相关文章

发表评论

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

*
*
Website