>

Webpack学习笔记,速度最高可提升98

- 编辑:至尊游戏网站 -

Webpack学习笔记,速度最高可提升98

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

2018/02/27 · CSS

原稿出处: Sean T. Larkin   译文出处:众成翻译/怡红公子   

Webpack 是一个前端财富加载/打包工具。它将基于模块的信赖关系进行静态剖析,然后将那些模块遵照钦赐的平整更换对应的静态能源。找到JavaScript模块以致其余的片段浏览器不可能直接运维的实行语言(Scss,TypeScript等卡塔 尔(英语:State of Qatar),并将其包装为方便的格式以供浏览器接受。
Webpack的劳作章程是:把您的品类作为叁个全体,通过多少个加以的主文件(如:index.js卡塔尔国,Webpack将从这些文件初步找到您的门类的有所信任文件,使用loaders管理它们,最终打包为一个浏览器可识其余JavaScript文件。

代号: _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以致愈来愈多卡塔 尔(英语:State of Qatar)无闲暇的打包在一同。因而我们信赖 “Legato” 那几个代号会顺应 Webpack。 ——  Patrick Gotthardt

我们识破后也不行地振憾,因为新版 Webpack 中大家所做的每三个创新指标都在于此,为了当大家在应用 Webpack 的时候敏捷连续毫无顿挫感。非常感激过去的这几年 trivago 对 webpack 的无私进献帮忙,更谢谢其为 webpack 4 命名!

引申阅读:trivago 帮助维护 webpack 的前途

安装Webpack

webpack是创设在node.js情形下的,所以要利用它大家须要先安装node和npm,其辅车相依文化这里将不介绍。

️‍ 有怎样更新?

webpack 4 有太多的新东西得以说了,但是自个儿不容许在本文中列举全数的剧情,不然那篇文章就要延期比较久本事发布了。因而上边小编会和大家分享部分自家觉着风趣的换代内容,要是我们想要看有着的更新的话能够查阅 webpack 4 的更新日志

安装node.js

在极端输入以下命令就可以

$ sudo apt-get install nodejs

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

我们在社区中倡议大家对 webpack 4 进行营造质量测验,得出的结果丰裕风趣。结果很震撼,创设时间降低了 伍分叁-98%!!这里给我们享用一下某部顾客的测量试验结果:

至尊游戏网站 1

至尊游戏网站 2

来源: Twitter

理之当然那只是大器晚成都部队分顾客的测量试验数据,你可以在笔者的至尊游戏网站,推文的回复中查看他们具备的结果。

天性测量检验进程中也发觉了生龙活虎部分 loader 的 bug 我们曾经及时修复了!!PS: 大家还并未有落成多进度,可能缓存成效(安插在v5版达成卡塔尔国。所以理论上大家的性质还会有非常的大的晋升空间!!!!

零件速度是咱们这一次宣布最着重的对象。你能够把具备的效力都抬高到工具中,可是只要不可能节约花费时间那您加那么些意义又有如何用吧?当然以上的那些都以某些演示,大家非常应接大家在Instagram上行使 #webpack #webpack4 开首提交你们的构建时间告诉。

安装npm

在终点输入以下命令就可以

$ sudo apt-get install npm

为了确认保障下载速度,大家直接恒久设置为Taobao源为npm的registry地址。在极端里输入

npm config set registry https://registry.npm.taobao.org
  • 配置成功后输入以下命令来查阅是不是成功
npm config get registry

如图所示即为成功

至尊游戏网站 3

安装npm为Tmall源

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

✂ 再见 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结果

WebAssembly 支持

Webpack 今后暗中同意支持在任哪处方 WebAssembly 模块中的 importexport 语句。那象征你能够直接在 Rust, C++, C 可能别的 WebAssembly 支持语言中应用 import

Webpack功能

模块类型简单介绍以至 .mjs 匡助

在此以前,JS 平素都以 Webpack 唯风度翩翩的一等模块类型。当顾客不需求使用 CSS/HTML 的时可能会诱致部分劳神。大家依照新的 API 抽象实现了 JS 类型。近些日子,大家早就扶助5种模块类型完毕:

  • javascript/auto: _(webpack 3 默认值)_ 全数的 JS 模块标准都可用:CommonJS,AMD,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 间版本完结卡塔 尔(阿拉伯语:قطر‎。 它将允许大家直接将 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"
    }
}

假诺您正在使用 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
    }
}

还有!

还会有越来越多的表征未有在本文列出,大家刚烈提议大家去看一下我们的合法更新日志

Loaders

由此采取分化的loader,webpack通过调用外部的剧本或工具得以对五光十色的格式的文书进行管理,比方说解析JSON文件并把它调换为JavaScript文件,恐怕说把下一代的JS文件(ES6,ES7)调换为今世浏览器可以辨其余JS文件。

Loaders需求独自安装还要须求在webpack.config.js下的modules关键字下进展布署,Loaders的陈设选项包括以下几方面:

|选项|描述|是或不是必须|
|test|二个相配loaders所管理的文件的拓宽名的正则表达式|是|
|loader|loader的名称|是|
|include/exclude|手动增多必需管理的公文(文件夹卡塔尔国或屏蔽没有必要管理的文件(文件夹卡塔 尔(英语:State of Qatar)|否|
|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;
};

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'));

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

在过去的一个月我们也为种种框架的脚手架工作确认保障它们能支撑 webpack 4。以至最流行的库比如 lodash-es, 奥迪Q7xJS 已经扶植 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"]
}

干什么您用如此多的 emoji 表情?

因为这么写小说很欢乐呀!大家也足以试试 。

模块

Webpack有二个必需说的长处,它把富有的文件都足以看做模块管理,蕴含你的JavaScript代码,也包括CSS和fonts甚至图片等等等,独有经过适当的loaders,它们都得以被视作模块被拍卖。

接下来?

咱俩早已在动手安插下多少个版本 webpack 4.x 和 5 的表征了,满含但不抑遏:

  • ESM 模块导出扶助
  • 从头到尾缓存
  • WebAssembly 支持从 experimental 升级为 stable 牢固版。并追加 tree-shaking 和未选用代码去除!
  • Presets —— 基于零陈设规划,任王孝文西都能协理零布署
  • CSS 模块类型——补助 CSS 作为入口文件(拜拜吧 ExtractTextWebpackPlugin卡塔 尔(阿拉伯语:قطر‎
  • HTML 模块类型——帮助 HTML 作为入口文件
  • U索罗德L/文件 模块类型
  • 自定义模块类型
  • 多线程
  • 再次定义大家的协会条例和陈设职责
  • 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'));

重复多谢

对于大家的贡献者团队,宗旨团队,loader 和插件小编,那多少个第叁次提交他们的交给,可能帮忙清除故障的人:大家必得谢谢您们。这么些产品是为您而生的,你们扶持构建了它

2018 大家将决定要毁弃老古董思维,应接 JS 的美观复兴!❤

笔者前边曾经数十一回重申过,在 JS 复兴 的前几天,未有社区的拔刀相助,webpack 是不会变的这么强硬,可不独有以致繁荣的生长。若无你们的帮扶,webpack 大概将来也还只是其他意气风发款普通的营造筑工程具[Yet Another Build Tool (YABT)]而已。

via:

1 赞 收藏 评论

至尊游戏网站 7

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

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

插件

插件(Plugins卡塔 尔(阿拉伯语:قطر‎是用来进展Webpack功用的,它们会在方方面面营造进度中生效,实行有关的义务。

哪些使用插件

要接收某些插件,我们供给通过npm安装它,然后要做的正是在webpack配置中的plugins关键字部分加多该插件的二个实例(plugins是一个数组卡塔 尔(阿拉伯语:قطر‎

  1. 加多叁个出示版权注解的插件,在webpack.config.js中校勘内容如下
var webpack = require('webpack');

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

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

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 一个这个插件的实例,并传入相关的参数
        })
  ],
}

优化插件

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学习笔记,速度最高可提升98