速度最高可进级98,Webpack学习笔记
分类:前端技术

webpack 4正式发布,速度最高可进级98%

2018/02/27 · CSS

初藳出处: Sean T. Larkin   译文出处:众成翻译/宝二爷   

Webpack 是叁个前端能源加载/打包工具。它将依赖模块的依附关系张开静态深入分析,然后将这几个模块依照内定的法则改变对应的静态能源。找到JavaScript模块以至其余的片段浏览器不可能一向运营的拓宽语言(Scss,TypeScript等卡塔 尔(英语:State of Qatar),并将其包装为适当的格式以供浏览器接收。
Webpack的行事措施是:把你的种类作为叁个意气风发体化,通过一个加以的主文件(如:index.js卡塔 尔(阿拉伯语:قطر‎,Webpack将从这几个文件开首找到您的品类的富有信任文件,使用loaders管理它们,最终打包为叁个浏览器可识别的JavaScript文件。

     阅读本文之前,先看下边这一个webpack的安顿文件,假诺每黄金年代项你都懂,那本文能带来你的拿到大概就相比单薄,你能够便捷浏览或直接跳过;若是你和十天前的本人一样,对众多精选存在着郁结,那木木芍药生可畏段时间逐步阅读本文,你的迷离一定贰个二个都会秋风落叶;假使您早先没怎么接触过Webpack,假设你对webpack感兴趣,本文中有三个贯通始终的例证,假诺你能把那一个例子本人入手写三遍,写完之后你会开采你已清晰的走进了Webpack的大门。

代号: _Legato

明天大家欢腾的公布 webpack 4(Legato)标准发布了!你能够运用 yarn 或许npm 获得它:

JavaScript

$> yarn add webpack --dev

1
$> yarn add webpack --dev

或者

JavaScript

$> npm i webpack --save-dev

1
$> npm i webpack --save-dev

Webpack

    

为何叫 Legato?

率先我们会开首叁个新古板:为大家以往的各类大版本设定代号!因而,大家决定将命名这几个特权赋予大家最大的 OpenCollective 捐赠者:trivago

当大家向其发出哀求后她们是如此回复大家的:

[在 trivago] 大家普通以音乐宗旨来定名咱们的品类。比方,大家前边的 JS 框架叫 “Harmony”,大家的新框架叫“美洛蒂”。PHP 的话大家应用基于 Symfony 上层封装,大家叫它“Orchestra”。 Legato 意味着毫无间隙地接连演奏每种节奏。 那一点和 Webpack 很像,Webpack 将我们的前端能源(JS,CSS以致愈来愈多卡塔尔国无闲暇的打包在一同。由此大家信赖 “Legato” 这么些代号会顺应 Webpack。 ——  Patrick Gotthardt

咱俩获知后也卓殊地震憾,因为新版 Webpack 中大家所做的每多少个更新目标都在于此,为了当我们在动用 Webpack 的时候敏捷连续毫无顿挫感。特别感激过去的最近几年 trivago 对 webpack 的忘作者捐献支持,更感激其为 webpack 4 命名!

引申阅读:trivago 帮忙维护 webpack 的前景

安装Webpack

webpack是创造在node.js景况下的,所以要利用它我们须求先安装node和npm,其连带文化这里将不介绍。

//一个常见的Webpack配置文件
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: __dirname   "/app/main.js",
  output: {
    path: __dirname   "/build",
    filename: "[name]-[hash].js"
  },

  module: {
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
      }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname   "/app/index.tmpl.html"
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("[name]-[hash].css")
  ]
}

️‍ 有啥更新?

webpack 4 有太多的新东西得以说了,然则作者不容许在本文中列举全体的内容,不然那篇文章将要延期十分久技巧宣布了。由此上边小编会和大家享用部分本身觉着风趣的换代内容,若是我们想要看有着的更新的话能够查阅 webpack 4 的更新日志

安装node.js

在终点输入以下命令就能够

$ sudo apt-get install nodejs

如何是WebPack,为啥要利用它?

webpack 4 越来越快(速度进步98%卡塔尔!

我们在社区中号令我们对 webpack 4 举办创设质量测量试验,得出的结果十三分风趣。结果很惊动,构建时间裁减了 伍分叁-98%!!这里给大家享受一下某部顾客的测验结果:

图片 1

图片 2

来源: Twitter

本来那只是一片段客商的测量检验数据,你能够在自家的推文的还原中查看他们具备的结果。

质量测量检验进程中也发觉了风流罗曼蒂克部分 loader 的 bug 大家早就立时修复了!!PS: 大家还还未落到实处多进度,大概缓存作用(安顿在v5版实现卡塔 尔(阿拉伯语:قطر‎。所以理论上大家的性质还也可能有特别大的晋级换代空间!!!!

构件速度是我们此次发表最根本的靶子。你能够把装有的效能都拉长到工具中,不过只要不可能省去花费时间那你加这一个职能又有怎么样用呢?当然以上的这几个都以局地演示,大家丰裕接待大家在Twitter上运用 #webpack #webpack4 开端提交你们的营造时间告知。

安装npm

在终极输入以下命令就能够

$ sudo apt-get install npm

为了确定保障下载速度,大家直接永远设置为天猫商城源为npm的registry地址。在尖峰里输入

npm config set registry https://registry.npm.taobao.org
  • 铺排成功后输入以下命令来查阅是或不是中标
npm config get registry

如图所示即为成功

图片 3

安装npm为天猫商城源

为什要使用WebPack

前几天的广大网页其实能够作为是功用丰盛的利用,它们有着着错综相连的JavaScript代码和一大堆信任包。为了简化开辟的复杂度,前端社区涌现出超多好的实践措施

  • 模块化,让大家能够把纷纷的主次细化为小的文书
  • 好像于TypeScript这种在JavaScript根基上开展的开销语言:使大家能够完毕近期版本的JavaScript不可能平昔动用的表征,何况之后还能够能装换为JavaScript文件使浏览器能够分辨
  • Scss,less等CSS预微型机

那几个改良确实大大的提供了我们的付出功效,不过使用它们开采的文书需求开展额外的拍卖技艺让浏览器度和胆识别,手动管理特别复杂,那就为WebPack类的工具的出现提供了需求。

Mode, 零配置以致默许值

大家为 webpack 新增加了二个 mode 配置项。Mode 有五个值:development 或者是 production,私下认可值是 production。Mode 是大家为收缩坐蓐条件创设体积以及节省花销条件的构建时间提供的风华正茂种优化方案。

借使想要领悟越来越多 mode 配置项的剧情,我们可以看看大家事先的风流倜傥篇文章: webpack 4: mode 和优化

另外,entryoutput 那几个布署项也都有暗中同意值了。那代表你无需每回都配置它们了,理所必然富含 mode。那大概代表从昨天启幕,你的布署文件在大家做出如此宏大改换未来会变得相当的小!

Legato 意味着毫无间隙地接连演奏各类节奏。

除此以外,大家提供零配置平台来扩展。webpack 最大的三个风味正是可扩张性。最后大家贯彻的零配置平台会是什么样体统吧?当大家完成了 webpack presets 功用后,那意味你能够依附零配置平台配置你自个儿,企业,以致是社区的专业流配置用以世袭直接运用。

安装webpack

  1. 全局安装
    在终点输入
sudo npm install -g webpack
  1. 一些安装
    进入项目目录,并在极限中输入
npm install --save-dev webpack

什么是Webpack

WebPack能够作为是模块打包机:它做的作业是,深入分析你的品类布局,找到JavaScript模块以致别的的有个别预设,打包为适当的格式以供浏览器选取。

✂ 再见 CommonsChunkPlugin

在新版中大家抛开并移除了 CommonsChunkPlugin,并且利用部分暗许值以致更易于被复写的新 API optimize.splitChunks 来取而代之。今后你能够在大好些个情景中享用自动分块带给的福利了!

风流洒脱经想要驾驭越来越多该 API 能够查看那篇作品:webpack 4: 代码分块以至分块优化

使用Webpack

  1. 开创叁个做事目录,并跻身这一个目录创立二个品种,在终极输入以下命令,会自动生成八个package.json文件,这是贰个正规的npm表达文件,里面满含了有的新闻,包蕴了类其余依附模块,自定义脚本职责等。
npm init

输入这几个命令后,终端会问你一文山会海诸如项目名称,项目描述,小编等消息,可是实际不是操心,假设你不准备在npm中公布你的模块,这一个主题材料的答案都不重要,回车私下认可就能够。

  1. 在本项目中设置Webpack作为依据包,在极端输入以下命令
npm install --save-dev webpack
  1. 创建app和public文件夹

    • app文件夹用来存放在原始数据和大家将写的JavaScript模块
    • public文件夹用来存放在准备给浏览器读取的数额(包含使用webpack生成的打包后的js文件以至二个index.html文件卡塔 尔(阿拉伯语:قطر‎
  2. 成立多少个html和js文件做三个简便的事例

    • public下创建index.html文本,加载通过webpack打包之后的bundle.js文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
    </head>
    <body>
        <div id='root'>
        </div>
        <script src="bundle.js"></script>
    </body>
    </html>
    
    • app目录下创办Greeter.js,用来回到一个简约的文字新闻的html成分的函数
    module.exports = function() {
        var greet = document.createElement('div');
        greet.textContent = "Hi there and greetings!";
        return greet;
        };
    
    • app目录下开创main.js,用来把Greeter模块归来的结点插入页面
    var greeter = require('./Greeter.js');
    document.getElementById('root').appendChild(greeter());
    
  3. 使用webpack开展包装
    主导命令为

webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

只要求钦赐贰个输入文件,webpack将自动识别项目所依靠的其它文件,可是要求潜心的是只要您的webpack未有实行全局安装,那么当你在极限中央银行使此命令时,须要极其钦定其在node_modules中的地址,继续上面的事例,在尖峰中归于如下命令

node_modules/.bin/webpack app/main.js public/bundle.js

试行结果如下,能够看来帮大家打包了七个公文

图片 4

webpack命令打包

开荒浏览器访谈index.html能够看出如下结果

图片 5

打包后index结果

  • webpack还应该有大多效果,通过命令行都能够完结,可是命令多了不佳记也便于失误,所以webpack也提供了配置文件方式,在品种根目录下创办webpack.config.js文本,在里面编写我们所必要的布置。

    module.exports = {
        //唯一入口文件
        entry: __dirname   "/app/main.js",
        output: {
            //打包后的文件存放的地方
            path: __dirname   "/public",
            //打包后输出文件的文件名
            filename: "bundle.js"
        }
    }
    

    注:__dirname是node.js中的三个全局变量,它指向当前施行脚本所在的目录。
    接下去钦赐打包命令只供给在顶峰中输入webpack即可。试行的结果和用命令生机勃勃致。

  • 包装操作还是能更简便易行,为了缓慢解决命令复杂且多的难题,npm还提供了指点职责实行的作用。对其张开布局后得以选择简易的npm start命令来取代那几个麻烦的通令。在package.json中对npm的台本部分开展相关安装就能够,设置方法如下。

{
  "name": "first_webpack_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    //配置start命令
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.4.1"
  }
}

注:npm的start是一个例外的本子名称,它的特殊性表未来,在命令行中使用npm start就可以实践有关命令,假若对应的此脚本名称不是start,想要在命令行中运维时,要求如此用npm run {script name}npm run build,以下是实践npm start后命令行的输出显示

图片 6

npm start结果

WebPack和Grunt甚至Gulp相比较有怎样特色

实则Webpack和其余五个并不曾太多的可比性,Gulp/Grunt是生龙活虎种工具,可以优化前端的干活流程,而WebPack是风姿洒脱种模块化的应用方案,Webpack的亮点使得Webpack能够代表Gulp/Grunt类的工具。

Grunt和Gulp的专门的学业情势是:在贰个布局文件中,指明对一些文件实行相同编写翻译,组合,压缩等任务的具体步骤,这么些工具之后方可活动替你成功这一个职分。

图片 7

Webpack的办事措施是:把你的门类作为贰个完好无损,通过贰个加以的主文件(如:index.js卡塔 尔(英语:State of Qatar),Webpack将从这些文件开端找到你的花色的持有重视文件,使用loaders管理它们,最佳打包为叁个浏览器可识别的JavaScript文件。

图片 8

假如实在要把双边举行相比,Webpack的管理速度越来越快更直接,能打包越多分歧品类的公文。

WebAssembly 支持

Webpack 以往私下认可扶助在另内地点 WebAssembly 模块中的 importexport 语句。那象征你能够直接在 Rust, C , C 或然其余 WebAssembly 扶持语言中采纳 import

Webpack功能

始于利用Webpack

始发摸底了Webpack职业措施后,大家一步步的始发读书运用Webpack。

模块类型简单介绍以致 .mjs 扶植

前边,JS 一向都以 Webpack 唯后生可畏的一级模块类型。当顾客无需利用 CSS/HTML 的时也许会促成后生可畏都部队分烦劳。大家根据新的 API 抽象完毕了 JS 类型。最近,大家早已支撑5种模块类型达成:

  • javascript/auto: _(webpack 3 默认值)_ 全体的 JS 模块标准都可用:CommonJS,英特尔,ESM
  • javascript/esm:EcmaScript 模块规范,其它的模块标准都不足用 (.mjs 文件的私下认可值)
  • javascript/dynamic: 仅扶持 CommonJS 和 英特尔,EcmaScript 模块标准不可用
  • json: JSON 数据,使用 requireimport 导入 JSON 数据时可用 (.json 文件的暗许值卡塔尔
  • webassembly/experimental: WebAssembly 模块 (.wasm 文件的默许值,近些日子依旧考察阶段卡塔尔国
  • 除此以外 webpack 扶持直接查找 .wasm, .mjs, .js.json 后缀文件

最令人激动的是,大家依旧足以支撑 CSS 和 HTML 模块类型(安顿在 webpack 4.x – 5 间版本完成卡塔 尔(英语:State of Qatar)。 它将同意我们直接将 HTML 作为入口文件!

生成Source Maps

支付连接离不开调节和测量检验,假使得以更进一层便于的调理当然就能够加强支付功能,然则打包后的公文一时候你是不轻易找到出错了的地点对应的源代码的职位的,Source Maps就是来帮大家缓和那么些标题标。

由此轻巧的配置后,Webpack在打包时可认为大家调换的source maps,那为大家提供了后生可畏种对应编写翻译文件和源文件的措施,使得编写翻译后的代码可读性更加高,也更便于调节和测量试验。

devtool选项 配置结果
source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度
cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便
eval-source-map 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项
cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点

在webpack的陈设文件中布局source maps,要求安排devtool,它有以下种种不相同的配置选项,各具优短处,描述如下:

devtool选项 配置结果
source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度
cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便
eval-source-map 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项
cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点

遵照表达接受风度翩翩种你愿意的变化情势,在webpack.config.js中进行配置

module.exports = {
    //配置生成Source Maps,选择合适的选项
    devtool: "eval-source-map",
    //唯一入口文件
    entry: __dirname   "/app/main.js",
    output: {
        //打包后的文件存放的地方
        path: __dirname   "/public",
        //打包后输出文件的文件名
        filename: "bundle.js"
    }
}

安装

Webpack能够行使npm安装,新建叁个空的演习文件夹(此处命名称为webpack sample progect卡塔 尔(英语:State of Qatar),在巅峰中间转播到该公文夹后进行下述指令就可以完结安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

设若您正在利用 HtmlWebpackPlugin

在公布早先大家留下了二个月的日子 来晋级具有的插件和 loader 以适配 webpack 4 的 API。不过,Jan Nicklas 因为做事缘故不能够参与,由此大家只能揭橥了多个 html-webpack-plugin 的 fork 版。你能够应用如下命令安装它:

JavaScript

$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

1
$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

当 Jan 上个月首从天边办事回届时,大家会将大家的翻新合併回 jantimon/html-webpack-plugin 仓库中!早前,如若您有此外难题,可以交给到这里!

比如你是插件或 loader 的开采者,你能够查看大家的搬迁指南:webpack 4: 插件/loader 迁移指南

利用webpack创设地面服务器

Webpack提供叁个可选的本土开辟服务器,那几个地方服务器基于node.js创设,能够实现监测你的代码的改换,并机关刷新改良后的结果,可是它是三个独门的构件,在webpack中展开计划在此以前须求独自安装它充当项目信任。安装命令如下

npm install --save-dev webpack-dev-server

devserver作为webpack配置选项中的风流浪漫项,具有以下配置选项

devserver配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)
port 设置默认监听端口,如果省略,默认为”8080“
inline 设置为true,当源文件改变时会自动刷新页面
colors 设置为true,使终端输出的文件为彩色的
historyApiFallback 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

webpack.config.js中张开安排devserver:

module.exports = {
    //配置生成Source Maps,选择合适的选项
    devtool: "eval-source-map",
    //唯一入口文件
    entry: __dirname   "/app/main.js",
    output: {
        //打包后的文件存放的地方
        path: __dirname   "/public",
        //打包后输出文件的文件名
        filename: "bundle.js"
    },

    devServer: {
        //本地服务器所加载的页面所在的目录
        contentBase: "./public",
        //终端中输出结果为彩色
        colors: true,
        //不跳转
        historyApiFallback: true,
        //实时刷新
        inline: true
    }
}

职业使用Webpack前的备选

  1. 在上述练习文件夹中创立五个package.json文件,这实际上是八个专门的职业的npm表达文件,里面含有了增进的新闻,蕴涵前段时间项指标凭仗模块,自定义的脚本职分。在顶峰中采用npm init指令可以活动创制这些package.json文件

           

npm init

       
输入那些命令后,终端会问您一文山会海诸如项目名称,项目描述,我等新闻,可是并不是忧虑,假诺您不盘算在npm中宣布你的模块,那么些主题材料的答案都不根本,回车私下认可就能够。

    2.   package.json文件已经就绪,大家在本项目中安装Webpack作为依附包

    

package.json文件已经就绪,我们在本项目中安装Webpack作为依赖包

  3. 回到在此以前的空文件夹,并在里面创制四个公文夹,app文件夹和public文件夹,app文件夹用来贮存在原始数据和所写的JavaScript模块,public文件夹用来贮存计划给浏览器读取的数目(包蕴动用webpack生成的打包后的js文件以致二个index.html文件卡塔尔国。在那还索要创建多少个文本,index.html 文件放在public文件夹中,五个js文件(Greeters.js和main.js卡塔尔放在app文件夹中,那时项目组织如下图所示

   图片 9

index.html文本独有最幼功的html代码,它唯后生可畏的指标就是加载打包后的js文件(bundle.js卡塔尔国

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

Greeter.js只包括一个用来回到满含存候音讯的html成分的函数。

//main.js 
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

main.js用来把Greeter模块重回的节点插入页面。

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

还有!

还会有更加多的特点未有在本文列出,咱俩生硬提出大家去看一下我们的法定更新日志

Loaders

经过应用分化的loader,webpack通过调用外界的脚本或工具得以对多姿多彩的格式的公文举行拍卖,例如说深入分析JSON文件并把它调换为JavaScript文件,也许说把下一代的JS文件(ES6,ES7)调换为今世浏览器能够识别的JS文件。

Loaders须求单独安装还要供给在webpack.config.js下的modules关键字下实行配备,Loaders的安插选项满含以下几地点:

|选项|描述|是还是不是必得|
|test|三个相称loaders所管理的文件的拓宽名的正则表明式|是|
|loader|loader的名称|是|
|include/exclude|手动增添必得管理的文件(文件夹卡塔尔国或屏蔽无需管理的文书(文件夹卡塔 尔(阿拉伯语:قطر‎|否|
|query|为loaders提供额外的设置选项|否|

咱俩把Greeter.js里的存候音信放在叁个独门的JSON文件里,并经过适当的布局使Greeter.js能够读取该JSON文件的值,配置格局如下:

  1. 率先安装能够读取json文件的值的loader
npm install --save-dev json-loader
  1. webpack.config.js中开展陈设json-loader:
module.exports = {
    ...
    ...
    ...

    //在配置文件里添加JSON loader
    module: {
        loaders: [
            {
                test: /.json$/,
                loader: "json-loader"
            }
        ]
    },
}
  1. 创立带有存候音讯的JSON文件(在app下创建config.json文件)
{
  "greetText": "Hi there and greetings from JSON!"
}
  1. 更新app/Greeter.js的内容为:
//从config.json读取
var config = require('./config.json');

module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = config.greetText;
    return greet;
};

标准使用Webpack

webpack能够在极限中应用,其最根底的指令是

webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

只需求钦定一个进口文件,webpack将自动识别项目所依赖的其它文件,不过须求静心的是只要您的webpack未有举行全局安装,那么当您在终极中应用此命令时,必要额外内定其在node_modules中的地址,继续上边的事例,在极端中归于如下命令

//webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

结果如下

图片 10

能够看出webpack同一时候编写翻译了main.js 和Greeter,js,现在开发index.html,能够看看如下结果

图片 11

有未有很振撼,已经打响的选拔Webpack打包了四个文件了。可是就算在顶峰中开展复杂的操作,如故不太低价且便于失误的,接下去看看Webpack的另风流浪漫种接受方法。

v4 的文书档案在哪?

大家马上要到位搬迁指南和v4 的文书档案了。你能够访谈 文书档案货仓 切换到 next 分支来获取更新情形,当然能搭把手帮个忙是再好可是了!

Babel

Babel其实是叁个编写翻译JavaScript的平台,它的无敌之处表将来能够透过编译帮你到达以下指标:

  • 后进的JavaScript规范(ES6,ES7卡塔 尔(英语:State of Qatar),那一个规范这段日子尚未被当下的浏览器完全的支撑
  • 使用基于JavaScript实行了举行的言语,比方React的JSX
  1. 设置具有Babel全体的依附包
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
  1. webpack.config.js中开展布局babel
module.exports = {
    ...
    ...
    ...

    //在配置文件里添加JSON loader
    module: {
        loaders: [
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                //在webpack的module部分的loaders里进行配置即可
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

前日您的webpack的铺排已经允许你利用ES6以致JSX的语法了。

到现在利用React举行测量检验,先安装 React 和 React-DOM,在终极中输入

npm install --save react react-dom
  1. 更新app/Greeter.js的源委为:
//Greeter,js
//导入React
import React, {Component} from 'react'
//从config.json读取
import config from './config.json';

class Greeter extends Component{
  render() {
    return (
      <div>
        {config.greetText}
      </div>
    );
  }
}

export default Greeter
  1. 更新app/main.js内容为:
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));

通过安排文件来利用Webpack

Webpack具有众多别样的比较高等的功力(比如说本文后边会介绍的loaders和plugins卡塔尔国,这个职能实在都能够经过命令行格局完结,可是相比已经提到的,那样不太平价且易于失误的,一个更加好的章程是概念一个安排文件,这几个布局文件其实是三个简单易行的JavaScript模块,能够把具有的与构建相关的新闻放在里面。

恐怕三番五次上面包车型大巴例证来证实什么写那几个布局文件,在现阶段演练文件夹的根目录下新建三个名字为webpack.config.js的文书,并在里面進展最最简便易行的配备,如下所示,它蕴涵入口文件路线和存放打包后文件的地点的路径。

module.exports = {
  entry:  __dirname   "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname   "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

:“__dirname”是node.js中的叁个全局变量,它指向当前实施脚本所在的目录。

至今风姿罗曼蒂克旦您须求打包文件只须求在终点里你运维webpack(非全局安装需使用node_modules/.bin/webpack)一声令下就足以了,那条命令会自动仿照效法webpack.config.js文件中的配置选项打包你的项目,输出结果如下

图片 12

又学会了风流浪漫种采取Webpack的艺术,何况不要管那该死的命令行参数了,有未有感到很爽。有未有想过假使能够连webpack(非全局安装需使用node_modules/.bin/webpack)那条命令都足以不用,这种感到会不会越来越爽~,继续看下文。

‍ 各框架 cli 工具协助什么了?

在过去的半年大家也为种种框架的脚手架工作确认保障它们能支撑 webpack 4。以致最风靡的库举个例子 lodash-es, KugaxJS 已经支撑 sideEffects 选项,因而接纳它们的最新版后您会开采打包体量会小幅的滑坡。

AngularCLI 团队曾经安插在近几周将在公布的大学本科子中素来使用 webpack 4!如若您想要知道最新进展,能够一贯关联他们,并打探她们你能帮什么忙并不是一向询问它怎么时候发表

Babel的配备选项

Babel可以在webpack.config.js中张开安顿页可以分块单独布署,当配置超多时,最佳单独布置创建三个.babelrc的babel配置文件,webpack会自动调用.babelrc内部的布局选项。

  1. 更新webpack.config.js内容为:
module.exports = {
    ...
    ...
    ...

    //在配置文件里添加JSON loader
    module: {
        loaders: [
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                //在webpack的module部分的loaders里进行配置即可
                loader: 'babel-loader',
            }
        ]
    },
}
  1. 创建.babelrc文件并累积内容如下:
{
  "presets": ["react", "es2015"]
}

更火速的施行打包职务

执行雷同于node_modules/.bin/webpack那般的下令其实是相比较烦人且易于失误的,可是值得庆幸的是npm能够指导职责实施,对其进展配置后能够行使简易的npm start命令来代表这个麻烦的授命。在package.json中对npm的台本部分进行相关安装就可以,设置方式如下。

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" //配置的地方就是这里啦,相当于把npm的start命令指向webpack命令
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.12.9"
  }
}

注:package.json中的脚本部分已经暗许在指令前加多了node_modules/.bin门路,所以无论是全局还是有的安装的Webpack,你都没有要求写后边那指明详细的路径了。

npm的start是叁个十分的本子名称,它的特殊性表未来,在命令行中使用npm start就足以实行有关命令,倘使对应的此脚本名称不是start,想要在指令行中运转时,需求这么用npm run {script name}npm run build,以下是实践npm start后命令行的输出展现

图片 13

现行反革命只须要接收npm start就可以打包文件了,有未有感觉webpack也只是那样嘛,然则不用太小瞧Webpack,其秋风扫落叶的功效包罗在其一多姿多彩可供配置的选项中,大家生机勃勃项项来看。

干什么您用这么多的 emoji 表情?

因为这样写小说很兴奋哟!大家也得以施行 。

模块

Webpack有多少个必要说的亮点,它把具有的文本都得以作为模块管理,包含你的JavaScript代码,也包涵CSS和fonts以至图片等之类,唯有经过适当的loaders,它们都足以被用作模块被处理。

Webpack的有力作用

接下来?

我们曾经在入手安插下三个版本 webpack 4.x 和 5 的特点了,满含但不压制:

  • ESM 模块导出援助
  • 有始有终缓存
  • WebAssembly 支持从 experimental 升级为 stable 稳固版。并追加 tree-shaking 和未利用代码去除!
  • Presets —— 基于零配置规划,任何事物都能支持零配备
  • CSS 模块类型——协助 CSS 作为入口文件(拜拜吧 ExtractTextWebpackPlugin卡塔尔国
  • HTML 模块类型——补助 HTML 作为入口文件
  • UPRADOL/文件 模块类型
  • 自定义模块类型
  • 多线程
  • 再一次定义大家的团协会章程和布署职务
  • Google Summer of Code (之后单独写文表达!!!)

CSS

webpack提供多少个工具管理样式表,css-loaderstyle-loader,二者管理的天职不一样,css-loader使您可以知道选拔相近@importurl(...)的方法实现 require()的功能,style-loader将具有的揣摸后的体制插足页面中,二者组合在同步使您能够把体制表嵌入webpack打包后的JS文件中。

  1. 安装css-loaderstyle-loader模块,在终极输入以下命令
npm install --save-dev style-loader css-loader
  1. 更新webpack.config.js剧情,使其能够使用css-loaderstyle-loader
module.exports = {
    ...
    ...
    ...

    //在配置文件里添加JSON loader
    module: {
        loaders: [
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                //在webpack的module部分的loaders里进行配置即可
                loader: 'babel-loader',
            },
            {
                test: /.css$/,
                //添加对样式表的处理
                loader: 'style-loader!css-loader'
            }
        ]
    },
}

>注:感叹号的作用在于使同一文件能够使用不同类型的loader
  1. app文件夹下创造main.css的文本,设置有个别因素的体裁
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}
  1. 由于webpack独有十足的输入,此外的模块须求通过 import, require, url等导入相关任务,为了让webpack能找到”main.css“文件,大家把它导入”main.js “中,更新后的main.js文件内容为:
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

//使用require导入css文件
import './main.css';

render(<Greeter/>, document.getElementById('root'));

生成Source Maps(使调试更易于卡塔尔国

支出连接离不开调节和测量试验,假使能够特别惠及的调解当然就会抓实开辟效用,可是打包后的文件不经常候你是不易于找到出错了的地点对应的源代码的岗位的,Source Maps就是来帮我们消除那个主题素材的。

因此简单的安排后,Webpack在打包时能够为大家转移的source maps,那为大家提供了风流浪漫种对应编写翻译文件和源文件的办法,使得编写翻译后的代码可读性越来越高,也更便于调节和测量试验。

在webpack的配备文件中安顿source maps,须要布署devtool,它有以下种种分歧的配置选项,各具优劣势,描述如下:

devtool选项 配置结果
source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度;
cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;
eval-source-map 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项;
cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点;

正如上表所述,上述选项由上到下打包速度越来越快,不过同不常候也保有越多的阴暗面效应,非常的慢的构建速度的结果便是对包裹后的文本的的推行有早晚影响。

在攻读阶段以致在小到中性的品类上,eval-source-map是四个很好的选项,但是记得只在开辟阶段使用它,继续上边的例子,举办如下配置

 

module.exports = {
  devtool: 'eval-source-map',//配置生成Source Maps,选择合适的选项
  entry:  __dirname   "/app/main.js",
  output: {
    path: __dirname   "/public",
    filename: "bundle.js"
  }
}

cheap-module-eval-source-map主意创设速度越来越快,然而不平价调节和测量试验,推荐在大型项目思考da时间资金财产是选拔。

再一次多谢

对于大家的进献者团队,宗旨团队,loader 和插件笔者,那几个第二回提交他们的交给,恐怕扶助化解故障的人:大家亟须感谢您们。以此成品是为您而生的,你们帮助构建了它

2018 大家将决定要遗弃老古董思维,招待 JS 的美貌复兴!❤

本人事先已经数次重申过,在 JS 复兴 的后天,未有社区的拉拉扯扯,webpack 是不会变的如此强盛,可不断以至繁荣的生长。若无你们的帮带,webpack 大概今后也还只是除此以外风流罗曼蒂克款平时的营造筑工程具[Yet Another Build Tool (YABT)]而已。

via:

1 赞 收藏 评论

图片 14

CSS module

CSS modules 的技能就意在把JS的模块化思想带入CSS中来,通过CSS模块,全体的类名,动漫名暗中同意都只效力于当下模块。Webpack从一开头就对CSS模块化提供了援助,在CSS loader中开展配备后,你所急需做的全方位正是把”modules“传递都所要求之处,然后就足以一向把CSS的类名传递到零器件的代码中,且那样做只对当前组件有效,不必忧虑在不相同的模块中保有同样的类名可能会促成的难点.

  1. 更新webpack.config.js剧情,使其能使用CSS module
module.exports = {
    ...
    ...
    ...

    //在配置文件里添加JSON loader
    module: {
        loaders: [
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                //在webpack的module部分的loaders里进行配置即可
                loader: 'babel-loader',
            },
            {
                test: /.css$/,
                //添加对样式表的处理
                //仅仅添加了?modules-loader
                loader: 'style-loader!css-loader?modules-loader'
            }
        ]
    },
}
  1. app文本夹下创设Greeter.css并追加内容为:
.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}
  1. 导入.rootGreeter.js中,更新Greeter.js内容为:
import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>//添加类名
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

应用webpack构建地面服务器

想不想令你的浏览器监测你都代码的纠正,并自行刷新校勘后的结果,其实Webpack提供贰个可选的地面开荒服务器,那些地面服务器基于node.js营造,能够达成您想要的那几个成效,可是它是二个单身的零部件,在webpack中开展安插在此以前供给独自安装它作为项目标依靠

npm install --save-dev webpack-dev-server

devserver作为webpack配置选项中的意气风发项,具备以下配置选项

devserver配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public”目录)
port 设置默认监听端口,如果省略,默认为”8080“
inline 设置为true,当源文件改变时会自动刷新页面
colors 设置为true,使终端输出的文件为彩色的
historyApiFallback 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

持续把这个命令加到webpack的铺排文件中,今后的安顿文件如下所示

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname   "/app/main.js",
  output: {
    path: __dirname   "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    colors: true,//终端中输出结果为彩色
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

CSS预微电脑

Sass 和 Less之类的预微机是对原生CSS的进展,它们允许你利用相像于variables, nesting, mixins, inheritance等不真实于CSS中的特性来写CSS,CSS预微处理器能够那几个特类别别的说话转变为浏览器可甄其他CSS语句,

常用的CSS处理器loaders:

  • Less Loader
  • Sass Loader
  • Stylus Loader
  1. 安装postcss-loaderautoprefixer(自动抬高前缀的插件卡塔尔
npm install --save-dev postcss-loader autoprefixer
  1. 更新webpack.config.js内容,使其能应用postcss-loaderautoprefixer,只要求新建二个postcss关键字,并在里边注脚信赖的插件
module.exports = {
    ...
    ...
    ...

    //在配置文件里添加JSON loader
    module: {
        loaders: [
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                //在webpack的module部分的loaders里进行配置即可
                loader: 'babel-loader',
            },
            {
                test: /.css$/,
                //添加对样式表的处理
                //仅仅添加了?modules
                loader: 'style-loader!css-loader?modules-loader!postcss-loader'
            }
        ]
    },
}
  1. webpack.config.js同级目录下创办postcss.config.js文件,配置内容如下;
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Loaders

赫赫有名的Loaders上场了!

Loaders是webpack中最令人动人心弦的法力之一了。通过动用不一致的loader,webpack通过调用外部的本子或工具得以对各式各样的格式的文件进行管理,比如说深入分析JSON文件并把它转变为JavaScript文件,或许说把下一代的JS文件(ES6,ES7)转换为现代浏览器能够辨认的JS文件。可能说对React的付出来讲,合适的Loaders能够把React的JSX文件转变为JS文件。

Loaders须求独自安装还要需求在webpack.config.js下的modules最首要字下开展安排,Loaders的安排选项蕴涵以下几上边:

  • test:叁个相称loaders所拍卖的文本的拓宽名的正则表明式(必得卡塔 尔(阿拉伯语:قطر‎
  • loader:loader的名称(必须)
  • include/exclude:手动增添必得管理的文本(文件夹卡塔 尔(英语:State of Qatar)或屏蔽无需管理的公文(文件夹卡塔 尔(英语:State of Qatar)(可选卡塔 尔(阿拉伯语:قطر‎;
  • query:为loaders提供额外的装置选项(可选卡塔 尔(英语:State of Qatar)

接轨上面包车型地铁例证,大家把Greeter.js里的问好音信放在三个独自的JSON文件里,并经过适当的布局使Greeter.js能够读取该JSON文件的值,配置情势如下

//安装可以装换JSON的loader
npm install --save-dev json-loader

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname   "/app/main.js",
  output: {
    path: __dirname   "/public",
    filename: "bundle.js"
  },

  module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      }
    ]
  },

  devServer: {
    contentBase: "./public",
    colors: true,
    historyApiFallback: true,
    inline: true
  }
}

创制带有问安音信的JSON文件(命名称叫config.json)

//config.json
{
  "greetText": "Hi there and greetings from JSON!"
}

履新后的Greeter.js

var config = require('./config.json');

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = config.greetText;
  return greet;
};

Loaders很好,然则有的Loaders使用起来比较复杂,比如说贝布el。

插件

插件(Plugins卡塔 尔(英语:State of Qatar)是用来实行Webpack成效的,它们会在整个创设进程中生效,推行有关的职分。

Babel

Babel其实是叁个编写翻译JavaScript的平台,它的强盛之处表现在能够透过编写翻译帮你实现以下指标:

  • 新一代的JavaScript规范(ES6,ES7卡塔 尔(阿拉伯语:قطر‎,这一个规范近些日子并未有被当下的浏览器完全的扶助;
  • 选拔基于JavaScript举办了扩充的言语,比方React的JSX

怎么采纳插件

要利用有些插件,我们需求通过npm安装它,然后要做的便是在webpack配置中的plugins关键字部分增加该插件的三个实例(plugins是三个数组卡塔 尔(英语:State of Qatar)

  1. 累计一个人展览馆示版权表明的插件,在webpack.config.js中更新内容如下
var webpack = require('webpack');

module.exports = {
    ...
    ...
    ...

    plugins: [
        //在这个数组中new一个就可以了
        new webpack.BannerPlugin("Copyright Flying Unicorns inc.")
  ],
}

Babel的安装与计划

Babel其实是多少个模块化的包,其主导功能位于可以称作babel-core的npm包中,不过webpack把它们构成在联合行使,不过对于每三个您需求的效果或进行,你都急需安装单独的包(用得最多的是分析Es6的babel-preset-es二〇一五包和解析JSX的babel-preset-react包卡塔 尔(英语:State of Qatar)。

咱俩先来二遍性安装那一个信任包

// npm一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

在webpack中陈设Babel的艺术如下

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname   "/app/main.js",
  output: {
    path: __dirname   "/public",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel',//在webpack的module部分的loaders里进行配置即可
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },

  devServer: {
    contentBase: "./public",
    colors: true,
    historyApiFallback: true,
    inline: true
  }
}

到现在你的webpack的配备已经运营你采纳ES6以致JSX的语法了。继续用地方的事例实行测量检验,可是要使用React,不忘记了先安装 React 和 React-DOM

npm install --save react react-dom

运用ES6的语法,更新Greeter.js并回到叁个React组件

//Greeter,js
import React, {Component} from 'react'
import config from './config.json';

class Greeter extends Component{
  render() {
    return (
      <div>
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

接收ES6的模块定义和渲染Greeter模块

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));

HtmlWebpackPlugin

本条插件的职能是依据一个简便的模板,帮您转移最后的Html5文书,那个文件中活动援引了你包装后的JS文件。每一次编写翻译都在文书名中插入一个例外的哈希值。

那几个插件自动完结了小编们事先手动做的豆蔻梢头部分事务,在专门的工作使用早先供给对直接以来的连串组织做一些改观:

  1. 移除public文件夹,利用此插件,HTML5文件会自动生成,其它CSS已经经过前边的操作打包到JS中了,public文件夹里。

  2. 在app目录下,创设三个Html文件模板,那么些模板满含title等其余你须求的因素,在编写翻译进度中,本插件会依靠此模板生成最终的html页面,会自行增添所注重的 css, js,favicon等公事,在本例中我们命有名的模特板文件名为index.tmpl.html,模板源代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
  </body>
</html>
  1. 履新webpack的安插文件,方法同上,新建叁个build文件夹用来寄放在最后的出口文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...
    ...
    ...

    output: {
        //打包后的文件存放的地方
        path: __dirname   "/build",
        //打包后输出文件的文件名
        filename: "bundle.js"
    },
    ...
    ...
    ...

    plugins: [
         new HtmlWebpackPlugin({
            template: __dirname   "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
        })
  ],
}

Babel的陈设选项

贝布el其实能够完全在webpack.config.js中开展示公布局,可是寻思到babel具有十分多的布署选项,在单纯的webpack.config.js文件中进行配置往往使得这一个文件突显太复杂,由此有些开采者辅助把babel的布置选项能够放在三个独立的名叫“.babelrc” 的铺排文件中。大家今日的babel的布局并不算复杂,可是随后咱们会再加一些事物,因而今后我们就领抽取有关部分,分多个布局文件举行配备(不用操心webpack会自动调用.babelrc里的babel配置选项卡塔 尔(英语:State of Qatar),如下:

// webpack.config.js
module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname   "/app/main.js",
  output: {
    path: __dirname   "/public",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },

  devServer: {...} // Omitted for brevity
}

//.babelrc
{
  "presets": ["react", "es2015"]
}

到前段时间停止,大家早就精通了,对于模块,Webpack能提供非常强盛的管理效果,这那多少个是模块呢。

优化插件

webpack提供了一些在颁发等第特别平价的优化插件,它们基本上来自于webpack社区,可以通过npm安装,通过以下插件能够成功产品公布阶段所需的意义

  • OccurenceOrderPlugin :为组件分配ID,通过这一个插件webpack可以剖析和事先思谋采纳最多的模块,并为它们分配最小的ID
  • UglifyJsPlugin:压缩JS代码;
  • ExtractTextPlugin:分离CSS和JS文件
  1. 安装插件,在极限中输入
npm install --save-dev extract-text-webpack-plugin
  1. 在在webpack.config.js中修正配备内容如下
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    .
    ...
    ...

    plugins: [
         new HtmlWebpackPlugin({
            template: __dirname   "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin("style.css")
        })
  ],
}

注:

  • 正文参照他事他说加以考察 http://www.jianshu.com/p/42e11515c10f,作为个体学习笔记
  • 上述条件在ubuntu16.04 lts中测量检验成功
  • 上述文字皆为私家见解,如有错误或提出请立时调换自己

所有的事皆模块

Webpack有叁个供给说的独特的地方,它把具备的文件都足以看作模块管理,包罗你的JavaScript代码,也囊括CSS和fonts以致图片等等等,唯有经过适当的loaders,它们都足以被视作模块被管理。

CSS

webpack提供四个工具管理样式表,css-loader 和 style-loader,二者管理的职责不一致,css-loader使您可以知道采用形似@import和 url(...)的方法完成 require()的功能,style-loader将享有的乘除后的样式参预页面中,二者结合在联合令你能够把体制表嵌入webpack打包后的JS文件中。

连续上边的事例

//安装
npm install --save-dev style-loader css-loader

//使用
module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname   "/app/main.js",
  output: {
    path: __dirname   "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.css$/,
        loader: 'style!css'//添加对样式表的处理
      }
    ]
  },

  devServer: {...}
}

:感叹号的职能在于使同一文件能够利用差别品种的loader

接下去,在app文件夹里创制多个名叫”main.css”的文本,对后生可畏部分成分设置样式

html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}

您还记得呢?webpack独有单意气风发的入口,此外的模块要求通过 import, require, url等导入相关职责,为了让webpack能找到”main.css“文件,大家把它导入”main.js “中,如下

//main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

import './main.css';//使用require导入css文件

render(<Greeter />, document.getElementById('root'));

常备意况下,css会和js打包到同多个文书中,并不会卷入为叁个单身的css文件,可是通过适当的陈设webpack也得以把css打包为独立的公文的。

然而那也只是webpack把css充任模块而已,我们继续看看多少个当真CSS模块的推行。

CSS module

在过去的生机勃勃对年里,JavaScript通过一些新的言语特色,越来越好的工具以至更加好的推行措施(比如说模块化卡塔尔国发展得十一分便捷。模块使得开荒者把复杂的代码转变为小的,干净的,注重注明刚毅的单元,且遵照优化学工业具,信赖管理和加载管理能够活动实现。

可是前端的别的一些,CSS发展就相对慢一些,许多的体制表却依然是高大且充满了大局类名,那使得维护和改进都丰富不方便和千头万绪。

前几天有一个名称为 CSS modules 的手艺就意在把JS的模块化观念带入CSS中来,通过CSS模块,全部的类名,动画名暗许都只遵循于前段时间模块。Webpack从意气风发最初就对CSS模块化提供了支撑,在CSS loader中张开陈设后,你所必要做的漫天正是把”modules“传递都所急需的地点,然后就足以直接把CSS的类名传递到零器件的代码中,且那样做只对当下组件有效,不必忧虑在分化的模块中全体同样的类名大概会招致的难题。具体的代码如下

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname   "/app/main.js",
  output: {...},

  module: {
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.css$/,
        loader: 'style!css?modules'//跟前面相比就在后面加上了?modules
      }
    ]
  },

  devServer: {...}
}

制造二个Greeter.css文件

.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}

导入.root到Greeter.js中

import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>//添加类名
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

放心使用把,相符的类名也不会变成分化组件之间的污染。

CSS modules 也是二个一点都不小的核心,有意思味的话能够去合意大利语书档案翻看越来越多音信。

CSS预微电脑

Sass 和 Less之类的预微机是对原生CSS的开展,它们允许你利用雷同于variables, nesting, mixins, inheritance等空头支票于CSS中的特性来写CSS,CSS预微处理机能够那个新鲜类其他话语转变为浏览器可甄其余CSS语句,你现在讲不定都早就深谙了,在webpack里使用相关loaders进行布置就足以应用了,以下是常用的CSS 管理loaders

  • Less Loader
  • Sass Loader
  • Stylus Loader

唯独实在也设有贰个CSS的管理平台-PostCSS,它能够扶助你的CSS完成更加多的功能,在其CSS官方文书档案可探听越来越多相关知识。

譬如来讲如何使用PostCSS,大家应用PostCSS来为CSS代码自动抬高适应不一样浏览器的CSS前缀。

先是安装postcss-loader 和 autoprefixer(自动抬高前缀的插件卡塔尔国

npm install --save-dev postcss-loader autoprefixer

接下去,在webpack配置文件中开展安装,只需求新建三个postcss关键字,并在当中表明信任的插件,如下,以后你写的css会自动依据Can i use里的数码增加不一样前缀了。

//webpack配置文件
module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname   "/app/main.js",
  output: {...},

  module: {
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.css$/,
        loader: 'style!css?modules!postcss'
      }
    ]
  },

  postcss: [
    require('autoprefixer')//调用autoprefixer插件
  ],

  devServer: {...}
}

到现行,本文已经关系各管理JS的Babel和拍卖CSS的PostCSS,它们其实也是多少个单身的平台,合营Webpack能够很好的公布它们的效能。接下来介绍Webpack中另二个百般首要的成效-Plugins

插件(Plugins)

插件(Plugins卡塔 尔(英语:State of Qatar)是用来张开Webpack效能的,它们会在全路创设进程中生效,实施有关的任务。
Loaders和Plugins常常被弄混,然则她们实乃全然不一样的事物,能够这样来讲,loaders是在卷入营造进程中用来管理源文件的(JSX,Scss,Less..卡塔尔国,二遍拍卖二个,插件并不直接操作单个文件,它一贯对全部营造进程其效能。

Webpack有过多平放插件,同期也会有不菲第三方插件,能够让我们成功尤其丰硕的效果。

接受插件的点子

要选取有个别插件,大家供给通过npm安装它,然后要做的就是在webpack配置中的plugins关键字部分增添该插件的三个实例(plugins是二个数组卡塔尔国继续看例子,大家增添了多个完成版权注明的插件。

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

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname   "/app/main.js",
  output: {...},

  module: {
    loaders: [
      { test: /.json$/, loader: "json" },
      { test: /.js$/, exclude: /node_modules/, loader: 'babel' },
      { test: /.css$/, loader: 'style!css?modules!postcss' }//这里添加PostCSS
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在这个数组中new一个就可以了
  ],

  devServer: {...}
}

因此这些插件,打包后的JS文件展现如下

图片 15

略知生龙活虎二Webpack中的插件怎么着利用了,上面给大家推荐几个常用的插件

HtmlWebpackPlugin

其风流倜傥插件的功能是基于贰个简短的模板,帮你转移最终的Html5文书,这些文件中自行援用了你包装后的JS文件。每一回编写翻译都在文书名中插入贰个两样的哈希值。

安装

npm install --save-dev html-webpack-plugin

其生龙活虎插件自动完毕了小编们事先手动做的有的事务,在正规使用从前需要对直接以来的门类组织做一些变动:

  1. 移除public文件夹,利用此插件,HTML5文件会自动生成,别的CSS已经经过前面包车型地铁操作打包到JS中了,public文件夹里。
  2. 在app目录下,创造三个Html文件模板,那一个模板饱含title等别的你要求的因素,在编写翻译进度中,本插件会根据此模板生成最后的html页面,会活动加多所信赖的 css, js,favicon等文件,在本例中咱们命有名的模特板文件名称叫index.tmpl.html,模板源代码如下

    Webpack Sample Project

    3.校正webpack的安顿文件,方法同上,新建三个build文件夹用来贮存在最后的出口文件

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname   "/app/main.js",
  output: {
    path: __dirname   "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      { test: /.json$/, loader: "json" },
      { test: /.js$/, exclude: /node_modules/, loader: 'babel' },
      { test: /.css$/, loader: 'style!css?modules!postcss' }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname   "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
    })
  ],

  devServer: {
    colors: true,
    historyApiFallback: true,
    inline: true
  }
}

Hot Module Replacement

Hot Module Replacement(HM中华V卡塔 尔(阿拉伯语:قطر‎也是webpack里很有用的八个插件,它同意你在更换组件代码后,自动刷新实时预览改正后的成效。

在webpack中落实HMCRUISER也很简短,只供给做两项配置

  1. 在webpack配置文件中增加HM索罗德插件;
  2. 在Webpack Dev Server中添加“hot”参数;

可是配置完这么些后,JS模块其实依旧无法自动热加载的,还索要在你的JS模块中实践一个Webpack提供的API技艺促成热加载,固然那么些API轻易使用,可是倘如若React模块,使用大家曾经深谙的Babel能够更有支持的贯彻效果与利益热加载。

整理下大家的思路,具体贯彻格局如下

  • Babel和webpack是单独的工具
  • 双面可以联手工业作
  • 两岸都足以透过插件实行功用
  • HM索罗德是叁个webpack插件,它令你能浏览器中实时观看模块更改后的效应,不过若是您想让它职业,供给对模块进行额外的分配的定额;
  • Babel有四个叫做react-transform-hrm的插件,能够在难堪React模块进行额外的布局的前提下让HM奥迪Q7符合规律干活;

创新大家的例证来实在看看哪些安顿

//webpack中的配置
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname   "/app/main.js",
  output: {
    path: __dirname   "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      { test: /.json$/, loader: "json" },
      { test: /.js$/, exclude: /node_modules/, loader: 'babel' },
      { test: /.css$/, loader: 'style!css?modules!postcss' }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname   "/app/index.tmpl.html"
    }),
    new webpack.HotModuleReplacementPlugin()//热加载插件
  ],

  devServer: {
    colors: true,
    historyApiFallback: true,
    inline: true,
    hot: true
  }
}

安装react-transform-hmr

npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置Babel

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",

         "imports": ["react"],

         "locals": ["module"]
       }]
     }]]
    }
  }
}

今昔当你接收React时,能够热加载模块了

产品阶段的创设

前段时间截至,大家早就采用webpack营造了一个安然无恙的开拓条件。但是在产物阶段,大概还索要对包裹的文书举行额外的管理,比如说优化,压缩,缓存以至分离CSS和JS。

对此复杂的花色以来,必要复杂的安插,那时候分解配置文件为五个小的公文能够使得业务井井有条,以地方的例子来讲,我们创设一个“webpack.production.config.js”的文书,在个中增多基本的铺排,它和原本的webpack.config.js很像,如下

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: __dirname   "/app/main.js",
  output: {
    path: __dirname   "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.css$/,
        loader: 'style!css?modules!postcss'
      }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname   "/app/index.tmpl.html"
    }),
  ],

}

//package.json
{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack-dev-server --progress",
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "author": "Cássio Zen",
  "license": "ISC",
  "devDependencies": {...},
  "dependencies": {...}
}

优化插件

webpack提供了有的在公布等级极其平价的优化插件,它们多数来自于webpack社区,能够因而npm安装,通过以下插件可以实现成品公布阶段所需的效果

  • OccurenceOrderPlugin:为组件分配ID,通过这一个插件webpack可以深入分析和开始时期考虑选择最多的模块,并为它们分配最小的ID
  • UglifyJsPlugin:压缩JS代码;
  • ExtractTextPlugin:分离CSS和JS文件

咱俩后续用例子来看看哪些加多它们,OccurenceOrder 和 UglifyJS plugins 都是置于插件,你需要做的只是设置它们

npm install --save-dev extract-text-webpack-plugin

在布局文件的plugins后引用它们

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: __dirname   "/app/main.js",
  output: {
    path: __dirname   "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
      }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname   "/app/index.tmpl.html"
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css")
  ]
}

缓存

缓存无处不在,使用缓存的最棒形式是作保你的文件名和文件内容是协作的(内容改变,名称相应改动卡塔尔

webpack能够把八个哈希值增添到打包的文书名中,使用方法如下,增多特殊的字符串混合体([name], [id] and [hash]卡塔 尔(阿拉伯语:قطر‎到输出文件名前

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: __dirname   "/app/main.js",
  output: {
    path: __dirname   "/build",
    filename: "[name]-[hash].js"
  },

  module: {
    loaders: [
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
      }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname   "/app/index.tmpl.html"
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("[name]-[hash].css")
  ]
}

今昔客户会有合理的缓存了。

总结

那是生机勃勃篇好长的稿子,多谢您的耐烦,能细致观望了此间,大致半个月前笔者第一次和睦一步步布局项目所需的Webpack后就向来想写豆蔻梢头篇笔记做计算,四回动笔都无法让本身左右逢源,总以为写不精晓。直到见到本文的匈牙利(Magyarország卡塔 尔(阿拉伯语:قطر‎语版Webpack for React,真的有一再峰回路转的认为到,喜欢看原稿的点链接就能够看了。其实关于Webpack本文陈诉得仍不完全,然而相信以走入Webpack的大门,能够更加好的商讨其余的有关Webpack的学问了。

提及底欢迎大家在文后刊出本身的视角探讨。

假如有人让您推荐前端技巧书,请让他看那个列表 ->《经文前端手艺书籍》

 转发地址:

本文由pc28.am发布于前端技术,转载请注明出处:速度最高可进级98,Webpack学习笔记

上一篇:2014年JavaScript领域中最受应接的,今后1年Web前端 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 遇见未知的,web开采连忙入门
    遇见未知的,web开采连忙入门
    CSS 框架 Bulma 教程 2017/10/26 · CSS ·Bulma 原文出处:阮一峰    网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS框架,
  • 追踪客户,读书笔记
    追踪客户,读书笔记
    使用 CSS 追踪用户 2018/01/20 · CSS · 1评论 ·追踪 原文出处:jbtronics   译文出处:枫上雾棋    除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行
  • pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    CSS技巧:逐帧动漫抖动实施方案 2017/08/16 · CSS ·动画 原来的书文出处:坑坑洼洼实验室    我所在的前端共青团和少先队首要从事活动端的H5页面开荒,而
  • 跟随我在oracle学习php,HTML中form表单的用法
    跟随我在oracle学习php,HTML中form表单的用法
    表单元素之搭车系 2016/01/28 · HTML5 ·表单 原文出处:司徒正美(@司徒正美)    对于表单元素, 除了reset元素,只要有name与value都能提交 因为在我们印象
  • Codecademy为编程初学者新增HTML和CSS两门课程,可以
    Codecademy为编程初学者新增HTML和CSS两门课程,可以
    Codecademy为编制程序初读书人新添HTML和CSS两门学科 2012/04/03 · CSS · 来源:伯乐在线     ·CSS 葡萄牙语原来的文章:Mashable  编译:伯乐在线– 黄利民 乐