【4858美高梅】0种种击破,居尔p和Webpack是3回事吗

By admin in 4858美高梅 on 2019年4月15日

webpack作为前端最火的营造筑工程具,是前者自动化学工业具链最根本的壹部分,使用门槛较高。本种类是小编本人的学习记录,相比基础,希望经过主题素材+
消除方法
的格局,以前端营造中境遇的求实供给为出发点,学习webpack工具中相应的拍卖措施。(本篇中的参数配置及使用办法均基于webpack4.0版本

webpack

在小编刚接触前端开拓的时候,已经开始流行各样营造筑工程具了;而当自家上手gulp今后,webpack又时兴了。所以,对前者工程化驾驭不多的自身,有了“What’s
the difference between using 居尔p and Webpack?”的迷思(˶‾᷄ ⁻̫ ‾᷅˵)。

4858美高梅 1
初稿链接:

4858美高梅 2

前言

  • 【4858美高梅】0种种击破,居尔p和Webpack是3回事吗。WebPack 是什么?

WebPack 是何许,WebPack
能够作为是模块打包机:它做的业务是,分析你的品种结构,找到 JavaScript
模块以及别的的一部分浏览器无法向来运转的张开语言(Scss,TypeScript
等),并将其改造和打包为适当的格式供浏览器采取。

  • WebPack 能够用来做哪些?

大家都了然,前端本领不断向上,已部分 htmljscss
等基础的手艺已经不可能满意寻(yue)求(lai)捷(yue)径(lan)的程序员群众体育了,于是
jsxlesssass,以及方便模块化开荒的
AMDCommonJSES2015 import
等有利成功项指标方案被贰个个的提了出去并得以利用,但是那个方案并不可能直接被浏览器识别协助,由此与这一个方案一齐建议的数十次会有各样转变工具。

  当大家在品种中动用了 jsxlesssass 等工具时,往往必要采纳
babel 以及任何的转移工具将其转移为 jscss
等浏览器度和胆识别的体裁。当2个系列相比较复杂时,这几个职分量无疑是变得庞大的,更毫不说当代码体量过大时大家还亟需对代码举行压缩,优化,分割,整个项目完毕下来费用的生机和时间想一想都认为可怕。

  于是,webpack
走进了小编们的视线。它的见解是一切皆模块,将有所的文书都作为模块处理(必要小心的是,在
webpack 中,文件是模块,但模块不必然是文本)。大家在 webpack
能够使用各样各个的
loader,用以调换种种分裂系列的文书,也足以利用种种种种的插件plugin,对大家容积变得壮大的花色代码实行优化,分割,压缩,提取等。

  • WebPack和别的打包工具如Grunt以及居尔p的区分在哪儿?

居尔p / Grunt
是一种工具,能够优化前端职业流程。比如自动刷新页面、Coca Cola图、压缩
css、js、编写翻译 less
等等,不过这几个操作都急需在gulp的布局文件中详尽设置。
  webpack 是预编写翻译的,你在本地平素写 JS,不管是 AMD / CMD / ES6风格的模块化,它都能认得,不供给其它再在浏览器中加载解释器,它还足以只透过三个文本输入自动检索其借助的具有模块,包含文件模块,编写翻译成一个或三个浏览器认识的
JS,还足以由此插件plugin对转移的js代码举办种种优化,这么些操作只须求在配置文件中安装用赢得的loader可能plugin就能够了,不用告诉webpack具体怎么操作。
  两者功效有重叠部分,如压缩,合并等,但是各有优势,能够结合使用

  综上:
    一. gulp/grunt 是工具链,营造筑工程具,自动化,提升功效用。
    二. webpack
是文本打包工具,模块化识别,编译模块代码,优化代码方案用。

Gulp和Webpack是什么

先是能够从gulp和webpack的官方网站找到对它们的叙述:

gulp: 用自动化营造筑工程具加强你的做事流程

Webpack: 当下最紧俏的前者财富模块化管理和打包工具

它们都属于前者营造工具,但gulp是职分管理工科具(task
runner),webpack是模块化打包工具(module bundler)。

自我坦白自身是标题党,SB只是SCSS-Bourbon的简写。

1. CSS文本大旨处理供给

万一项目中的CSS文件均选用预编写翻译语言编写,那么在包装中须要处理的主导难题总结:

  • 预编译语言转变
  • 体制文件挂载格局采用
  • 代码优化(合并及收缩)
  • 剔除或保留钦点格式的讲明
  • 财富一定路线的转移
  • 响应式布局单位转变【可选】
  • 模块化【可选】
  • 拍卖浏览器包容【可选】

本文结构:

本文将透过以下十七有个别介绍webpack使用办法:
1. webpack环境营造
2. webpack打包ES6文件
三. 引进webpack配置文件
4. webpack-dev-server
5. Source Maps
6. 编译器
7. webpack打包jsx文件
8. webpack打包css文件
9. webpack打包img文件
10. 插件
11. BannerPlugin插件
12. HtmlWebpackPlugin插件
13. HMR插件
14. BundleAnalyzerPlugin插件
15. ExtractTextPlugin插件
16. CommonsChunkPlugin插件
17. UglifyJsPlugin插件

义务管理工科具

职责管理工科具中我们能够表明若干任务,比如合并、压缩、测试等等。职分间可交互注重,能够是同步,也得以是异步的。然后我们能够轻松地挑选运行哪个职分,职务管理工科具会帮咱们运转它(以及它的依靠)。

利用gulp能够配备各样插件来做css或js文件的晤面压缩、编写翻译sass或less、增加包容性前缀(-webkit-,
-moz-
…)、自动刷新浏览器等等,它能代表手工业完成自动化工作、优化前端职业流程。

一. SASS/SCSS

SASS,也称为SCSS,是CSS预编写翻译语言的一种,常见的预编写翻译语言还包蕴LESS,Stylus,除了语法风格之外它们之间从未什么样太大的分别,从一种语言迁移到另壹种语言只须求花半天通读一下文书档案就能够了。预编写翻译语言为CSS提供了变量定义,函数定义,层级嵌套等等1各样扩大成效,使开荒者更易于编写和管理项目中的CSS代码。作者利用的是SCSS/SASS,因为相关工具库更全面1些,就算名称偶尔会带来一些缺陷(提出选取SCSS)。LESS在和Sublime集成时有局地小题目,也许是本子难点,stylus是新兴起的,开荒生态并不圆满。

贰. 解决方案的升级

  • 旧的缓解方案预编译语言 + 命名方法论

    在不利用营造筑工程具的时日,开荒者使用预编写翻译语言来贯彻变量定义,选取器嵌套等部分刚需,再利用函数作用来落到实处部分一发复杂的须要,例如编写轻易的@mixin px2rem( )函数来将支付中央银行使的px单位调换为rem单位,达到移动端自适应的目标,或是编写1些处理兼容性的函数来拍卖浏览器包容性。

    命名的方法论十二分多,最为盛行的当属BEM,也等于利用**block__Element-Modifier**这么的命名方式来张开模块划分,还有提倡碎片化样式的Aotm-CSS及面向对象的OOCSS等,都以壹种命名方法论,也意味着没有硬性的检测和防范措施。

  • 新的化解方案预编译语言 + 构建工具 +
    BEM + ACSS全局样式+CSSModule组件样式+ POSTCSS

    预编写翻译语言的选择基本不改变,但当代化开辟中曾经不再需求通过预订义函数来缓解单位调换或是包容性的主题素材。首先,构建筑工程具可以经过自动化检查实验将预编写翻译语言转变为CSS,基于今世化构建筑工程具的CSS-Module效果,可以透过特定的语法化解CSS模块化的问题,而基于POSTCSS实现的autoprefixer插件,能够依据CanIUse网站提供的浏览器帮助度数据完结代码的跨浏览器前缀自动补齐。

    新的方案涉及到很多新的定义,但那并不是大概的炫技,每1个概念都有帮助和益处和适用的场子,你要求在适龄的场子使用合适的技艺,最拙劣的做法就是因为某种才具热门而盲目地须要开拓人士在全方位项目中央银行使。

WebPack踩坑之路发轫

模块化打包工具

javascript本人并不帮忙模块化,但对此浏览器中的js和服务端的nodejs,它们运营环境是分裂的,并且各自遵照某种规范,那么该怎样兑现js的模块化呢?

此时此刻有两种主流方案:

  1. 在线编写翻译模块化

    如seajs和requirejs模块框架,也正是在页面上加载1个CMD/英特尔解释器,那样浏览器就认识了define、exports、module这一个东西,也就兑现了模块化。

  2. 预编写翻译模块化

    webpack和browserify它们是3个预编写翻译模块的方案,它们遵从了不供给在浏览器中加载解释器。在本土一贯写js,不管是AMD/CMD/ES陆风格的模块化,它都能分辨并编写翻译成浏览器认识的js。

中期Webpack正是为前端js代码打包而规划的,后来被扩大到此外国资本源(图片、css文件等)的打包处理。Webpack具备grunt、gulp对于静态财富自动化塑造的技术,更要紧的是,webpack弥补了requirejs在模块化方面包车型客车缺陷,同时包容英特尔与CMD的模块加载规范,具备更有力的js模块化的功力。

4858美高梅 3

webpack is a module bundler. webpack takes modules with dependencies
and generates static assets representing those modules.

二. SCSS-Bourbon Family

4858美高梅 4

由于SCSS早期使用Ruby on Rails编写的,所以github上提供的设置方式大概都以通过gem install安装的,但骨子里在npm仓库里也能够找到对应的连串。另1方面,SCSS赞助理工科程师具库中的工具都是以_开班的,约等于说定义mixin的代码并不会被编写翻译到出现的CSS文本中,能够放心使用。

【Bourbon】是小编尤其喜欢的工具包,首先它很吻合渐进式开发的牵记,种种插件只兑现3个特定的作用,同时,它的享有插件都以上下一心付出的(ThoughtBot在收购后保安着1切Bourbon工具链),那又确定保障了工具的身分。

三. 基本接纳方法

壹、 webpack环境营造
  1. 先是全局安装 webpack:
    在终极中输入

npm install -g webpack 
  1. 咱俩得以接纳 Webstom 编辑器新建贰个空项目
    webpackdemo,也得以在桌面新建3个空文件夹,名字自定,然后在其间新建三个
    app 文件夹和一个 build 文件夹,在 app 文件夹中创立
    main.js文件和Greeter.js文件,在 build 文件夹下创立
    index.html 文件。

此地的app文件夹里面就是我们经常写的代码目录,在 webpack
中大家会采用3个主js文件main.js,假如急需别的的
js,css,img文件,能够将其当做模块引进到 main.js 中,而 build
文件夹中存放的是大家利用 webpack 将混乱的 css 和 js
打包过后生成的公文。

  1. 因为我们是在node环境下打包文件的,由此每二个新的门类都急需1个package.json 文件,它是贰个专业的 npm
    表明文件,包罗了现阶段项目依赖的模块,自定义的剧本职责等,创立该公文的方法是跻身
    webpackdemo
    文件夹中,然后在命令窗口输入:npm init,接着一路按回车就足以了。

  1. 大家尽管已经在全局安装了 webpack
    ,但为了稳妥起见,仍旧在此时此刻项目中再安装2回 webpack:

npm install --save-dev webpack

那里的 –save-dev 会将安装的该模块的名号存款和储蓄在 package.json 文件中的
devDependencies 关键字下,便于大家查阅已安装模块消息。

明天我们的花色组织如下图:

类型结构图

成效落成相比

对了,你一点一滴能够gulp搭配webpack来利用,gulp绝对来讲更加灵活,能够做越多的定制化职分,而Webpack更注重于模块打包。

bourbon——函数库

♒ 通过npm install -g bourbon安装.

bourbon已经更新至5.1.0本子,官方文书档案对数不清mixin并未提供验证,提出采纳前通读一下library目录里每叁个独门的文书,在那之中的解说部分标明了该函数的用法。例如实用triangle( )函数来生成1个类,使其伪类蕴涵四个点名尺寸和方向的三角形,又大概是使用tint( )shade( )措施让颜色依据半分比变亮或变暗,当然你也得以活动去扩充bourbon的底蕴功用。

4858美高梅 ,SCSS代码为:

@import "bourbon";
.triangle-down {
    &::after{
     content:'';   
     @include triangle("down", 2rem, 1rem, #b25c9c);
    }
}

编写翻译后的代码:

.triangle-down::after {
  content: '';
  border-style: solid;
  height: 0;
  width: 0;
  border-color: #b25c9c transparent transparent;
  border-width: 1rem 1rem 0;
}

CSS是足以诸如陆边形等诸多模样的,你完全能够在网上学习它们的落到实处格局,然后将其编写制定为扩大的mixin加盟到温馨的常用工具箱中。

叁.1 常用插件及成效简述

webpack4.0本子为例来演示CSS模块的处理格局,要求运用的插件及作用如下:

  • style-loader——将拍卖达成的CSS代码存款和储蓄在js中,运营时置放<style>后挂载至html页面上
  • css-loader——加载器,使webpack能够识别css模块
  • postcss-loader——加载器,下1篇将详细描述
  • sass-loader——加载器,使webpack能够分辨scss/sass文本,私下认可使用node-sass打开编写翻译
  • mini-css-extract-plugin——插件,四.0版本启用的插件,代替原extract-text-webpack-plugin插件,将处理后的CSS代码提取为单独的CSS文件
  • optimize-css-assets-webpack-plugin——插件,完毕CSS代码压缩
  • autoprefixer——自动化增多跨浏览器包容前缀
二、 webpack打包js文件
  1. 咱俩先在 index.html 中写入代码:

// index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>webpackdom</title>
  </head>
  <body>
    <div id='root'>
    </div>
  <!-- 这里引入的 bundle.js 文件现在还不存在,是将来我们用 webpack 打包出来的文件 -->
    <script src="bundle.js"></script>          
  </body>
</html>

此地引进的 bundle.js 是透过webpack打包后的能够供浏览器度和胆识其余 js
文件(未来还不存在)

  1. 进而我们在 Greeter.js
    中写入1个函数,用途是在页面中打字与印刷出来一句话,然后将该函数作为多个模块导出:

// Greeter.js

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};
  1. 接下去编写大家的 main.js 文件,引进Greeter
    文件导出的模块,并将该模块增添到页面包车型地铁div节点中:

// main.js 

const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
  1. 上述文件编写制定实现后,大家能够在命令窗口输入webpack打包命令:

//webpack 打包命令

webpack {entry-file} {output for bundled file}
    {entry-file}                  //入口文件路径,即我们所说的主js文件main.js
    {output for bundled file}     //打包输出的js文件路径

在我们的这个demo中,需要输入的命令是:
    webpack app/main.js build/bundle.js

包裹成功分界面:

一声令下行打包

上海体育场地展示的 bundle.js 即为 main.jsGreeter.jswebpack
打包成功后转换的文本,展开 index.html ,在浏览器页面会展现如下内容

页面呈现结果

从那之后结束,大家中标的用webpack打包了 Greeter.js 文件。

整合Gulp&Webpack

能够在居尔p中采用webpack-stream,首先要求设置一下急需的模块:

npm install gulp webpack-stream vinyl-named --save-dev

然后在 gulpfile.js 中张开铺排:

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var webpackConfig = require("./webpack.config.js");

gulp.task('webpack', function() {
  return gulp.src('./src/app.js')
    .pipe(named())
    .pipe(webpack(webpackConfig))
    .pipe(gulp.dest('./dist/'));
});

使用 vinyl-named 保持输入和输出的文书名同样,
否则文件名会由webpack打包后自动生成3个hash。

唯独那个方案貌似有坏处:

选择webpack-stream即使能够很便宜的将webpack整合到gulp中,可是有沉重的难点存在:假设关闭webpack的监听形式,那么每一次文件变动就会全量编写翻译JS/CSS文件,非凡耗时。
倘诺展开webpack的监听方式,那么会卡住别的gulp任务,导致别的gulp职分的监听失效。
故此那种方案大概不可用!——《gulp &
webpack整合,鱼与熊掌小编都要!》

于是仍然建议用webpack原生方案。

Bitters——脚手架

♒ 通过npm install -g bourbon-bitters安装

Bitters是Bourbon工具家族里的脚手架,它将您的基础样式分拆为*_bass* ,
*_buttons* , *_forms* , *_layout* , *_lists* , *_media* ,
*_tables* , *_typography* , *_variables*
等多少个分化的公文并提供壹些起来样式,开辟中能够将与基础模块相关的体制增添写在那么些文件中,那样的做法能够在必然水平上下降项指标掩护难度。

自然你也得以间接引进normolize.css来对品种实行体制的重新恢复设置。

3.2 webpack的配置

本篇不是webpack课程,在此直接提交带有注释的webpack.config.js的布置以供参考,示例中利用SCSS作为预编写翻译语言,别的预处理语言配置情势基本1致:

const HtmlWebpackPlugin = require('html-webpack-plugin');//用于自动生成html入口文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//将CSS代码提取为独立文件的插件
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");//CSS模块资源优化插件

module.exports = {
  mode:'development',
  entry:'./main.js',
  output:{
    filename:'main.bundle.js',
    path:__dirname + '/build'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/, //排除node_modules文件夹
        use: [{
             loader: MiniCssExtractPlugin.loader//建议生产环境采用此方式解耦CSS文件与js文件
          },{
            loader: 'css-loader',//CSS加载器
            options: {importLoaders: 2}//指定css-loader处理前最多可以经过的loader个数     
          },{
            loader: 'postcss-loader',//承载autoprefixer功能
          },{
            loader: 'sass-loader'//SCSS加载器,webpack默认使用node-sass进行编译
          }
        ]
      }
    ]
  },
  plugins:[
      new HtmlWebpackPlugin(),//生成入口html文件
      new MiniCssExtractPlugin({
        filename: "[name].css"
      })//为抽取出的独立的CSS文件设置配置参数
  ],
  optimization:{
    //对生成的CSS文件进行代码压缩 mode='production'时生效
    minimizer:[
       new OptimizeCssAssetsPlugin()
    ]
  }
}

postcss.config.js的配备较为轻松:

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

package.json中扩展新的参数钦命打包需求援助的浏览器类别:

  "browerslist": [
    "last 2 versions",
    "IE 8",
    "UCAndroid"
  ]

编辑1段待SCSS代码:

//变量定义
$grey: #1e1e1d;
$yellow: #ffad15;
$offwhite: #f8f8f8;
$darkerwhite: darken($offwhite, 15);//SCSS函数
$baseFontSize:14px;

//循环
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//mixin
@mixin px2rem($name, $px){
  #{$name}: $px / $baseFontSize * 1rem;
}

//嵌套
.class3{
    font-weight: bold;
    display:flex;
    &-small{
        color: $offwhite;
        @include px2rem('font-size',14px);
    }
}

//autoprefixer
::placeholder{
    width:10px;
}

能够看出转变后的结果:

4858美高梅 5

提醒:代码压缩等优化作用在四.0版本中暗中认可当mode : ‘production’时有效。

叁、 引进webpack配置文件

大家在张开上述操作时会发现,假使 webpack
每一遍打包都无法不输入那行十分长的打包命令,无疑是追求高(xiang)效(tou)率(lan)的大家所不能够耐受的,大家期望因此更简短的通令来让
webpack 工作。可是大家命令轻便了,就供给另建一个文书来告诉 webpack
它须要怎么着工作,这一个文件就是webpack配置文件

webpack配置文件作用具体是什么样呢?
  它是来报告 webpack
,你要从哪些文件(入口文件)伊始,找和这几个文件有关联的兼具模块,包括引进的第三方模块和文件模块。
  找到那些模块后,借使那几个模块中用了例如 less, sass, es20一伍, jsx
等浏览器不能够一贯识别补助的语法,webpack
会自身用大家在安顿文件中设置好的更改工具(loader),将那个语法调换来CSS3 ES5等浏览器能够直接识别的语法,然后将那么些模块和进口文件一同打包成多少个文件。
  可是那个文件若是不进行拍卖,体量会异常的大。由此在那边 webpack
会引用大家在布局文件中装置的插件(plugin)对转移的文件进行优化,比如分离css,切割代码,分离引进的第1方模块等。

咱们先在根目录下创办1个 webpack.config.js ,在里头写入以下代码:

// webpack.config.js

module.exports ={
        entry:__dirname + '/app/main.js',      //入口文件
        output:{
                path: __dirname + '/build',    //输出文件路径
                filename:'bundle.js'           //输出文件名
        }
}

那样大家的2个最主题最轻巧易行的webpack配置文件就创办好了,现在大家得以在指令窗口输入webpack,然后回车,

配置文件打包

出现上海体育地方内容即为打包成功。

上述大家早就用了二种包装方式,分别是命令行打包和布局文件打包,在此间再而三介绍第壹种包装格局:命令窗口输入
npm run xxx 指引职责施行。
第二大家进去 package.json 文件,找到 scripts 属性,在上面加多

"xxx":"webpack"        // xxx为个人定义的属性名,可以用 `npm run xxx` 来运行后面的文件

此时 package.json 中的代码如下:

// package.json

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

此地有个坑:JSON 文件中 不能 添加 注释 !!!

接下去大家运转 npm run dev
,假如你在上边加的性格名是,同样会产出以下结果

npm run dev 输出结果

上述,大家引进了 webpack.config.js 配置文件并总计出了三种 webpack 打包:

  • 一声令下行打包 webpack {entry-file} {output for bundled file}
  • webpack打包 webpack
  • npm run xxx 打包 npm run xxx

引入应用第一种格局

总结

今昔的前端开辟领域融合了无尽后端工程化的钻探,诸多产品从网页进化成了Web
app,它平常是一个单页应用(SPA),每一个页面都因此异步的主意加载,那就会形成大气的代码存在于
client side
,并且前端开拓是多语言、多层次的开辟工作,各类财富以增量更新的法子加载到浏览器,为了越来越好的组织那一个代码和能源,并且保障它们在浏览器端快捷、优雅的加载和更新,便出现了职务管理工科具和模块化打包工具。

自此刀耕火种的小日子一去不归了,前端开垦正式进入工业化时代!!立即,心中吹响了新时代的喇叭,小编的脸蛋洋溢着三胖般的笑容。

Neat——网格工具

♒ 通过npm install -g bourbon-neat安装.

小编们利用的第一方UI框架中,大约都选选择优秀者良的1二列布局,但总有个别产品经营会建议希望将某1列的宽窄扩充到一.伍倍那种须求,可能有个别场景下你指望对全体网页的布局举行更加精致的调整,这年轻量级的网格工具Neat就派上用场了,轻量,庞大,易用,轻巧完结网格划分,网格嵌套,响应式布局等繁杂的功用。具体的采取文书档案能够访问其官网Neat官网翻看文书档案。

使用示例:

上面轻易的几行代码编写翻译为CSS后,就能够完结将页面分为间距为20px的10列,右边边栏占二列,右边内容区占八列;然后又将右手内容分别为距离为10px的陆列,每一种表格项占1列。

@import "neat";
/*定义网格*/
$sidebar-layout:(
    columns: 10,
    gutter: 20px
);

$list-layout: (
    columns: 6,
    gutter: 10px
);
/*使用网格*/
.sidebar-layout{
    @include grid-container;
}
.sidebar-layout__sidebar{
    @include grid-column(2,$sidebar-layout);
}

.sidebar-layout__content{
    @include grid-column(8,$sidebar-layout);
}

.list-layout{
    @include grid-container;
    @include grid-collapse($list-layout);
}

.list-item{
    @include grid-column(1, $list-layout);
}

四. 使用CSS-Modules

体系地址:CSS
Modules开源地址

CSS
Module
在CSS中使用类采取器,其基本原理是将CSS代码中的样式名更迭为哈希值,并树立三个json对照表,在js文件中对于天性名选拔器的选拔均被沟通为哈希字符串,以此来缓解CSS模块化的主题素材。

在webpack中使用CSS Modules效益10分简单,只须要在css-loader的计划参数中装置:{modules:true}即可激活模块化功效。

开启模块化功用后再拓展打包,能够看来同一的main.css文本形成了之类样子:

4858美高梅 6

而在卷入文件中追加了如下1些:

4858美高梅 7

当然CSS Modules的用法远不止如此,越来越多的音讯方可参见下边包车型大巴品类地址。

四、 webpack-dev-server

本小节大家将介绍一个本土服务器 webpack-dev-server
webpack-dev-server 基于 node.js
塑造,能够让浏览器监听大家的代码修改,代码一旦更动并保留,浏览器会立时自动刷新。
在使用 webpack-dev-server
在此之前,大家供给先安装它当作项目正视,在指令窗口输入以下指令:

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

作者们若想行使 webpack-dev-server 包涵前边要讲的各类 loader 或者
plugin , 都须要在 webpack.config.js 文件中实行配置:

devServer配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外目录下的文件夹提供服务器,应该在该配置选项中重新设置所在目录
prot 设置默认监听端口,默认为"8080"
inline 设置为true时,当源文件改变时会自动刷新页面
historyApiFallback 在开发单页应用时非常有用,依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

接下去更新 webpack.config.js 文件

//webpack.config.js

module.exports ={
        entry:__dirname + '/app/main.js',
        output:{
                path: __dirname + '/build',
                filename:'bundle.js'
        },
        //更新部分代码
        devServer: {
                contentBase:"./build",      //本地服务器加载页面所在目录
                historyApiFallback:true,    //不跳转
                inline:true                 //实时刷新
        }

}

package.json 中的 scripts 对象中加多以下命令,用以开启本地服务:

//package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "server": "webpack-dev-server --open"
  }

接下去在命令窗口输入 npm run server
运营服务器,平常状态下会活动在浏览器展开 localhost:8080
,若未有活动展开药方可在浏览器窗口中手动输入。

起步服务成功

接下来大家得以在 Greeter.js
中修改一下要出口的始末,保存的同时能够观测到命令窗口中会服务器会自动刷新,同时浏览器窗口会活动刷新html内容。

Coolor——自动化配色工具

♒ 访问http://coolor.co

4858美高梅 8

Coolor.co实际上并不是Bourbon家族的成员,但您应当会欣赏它,那是1个无偿的网址(移动端是收取工资的),在你钦定贰个宗旨色后,它会为您回来一组美貌的涵盖陆个颜色的配色方案,若是不称心间接壹键切换就可以了,从此冒充设计师看什么人还敢拦着你~

五. 图解Css-Process-Chain

从上述配置中能够观察,使用预编写翻译器编写的样式文件须要经过1密密麻麻loaderplugin技艺得到最后的对象文件,它因而很空洞是因为中间的处理环节对开荒者来讲是黑箱操作,只看收获输入和输出,作者结合自身领会绘制了下边包车型地铁示意图,希望能够扶助你通晓css文件在全路webpack打包流程中是哪些被处理的(plugins有些从没进行研商,处理链中暂不涉及)。

4858美高梅 9

五、 Source Maps

大家都知晓,打包生成的文书其实可读性是很差的。如若我们在本地编写代码时候不小心写错了,然后装进生成的文件鲜明是达不到大家想要的意义,而在转换的文书中查错即找bug是不现实的,大家须求直观明显的呈现出错地方,今年就必要动用Source Maps
来显示出来大家写的代码出错的任务。
1律,大家供给在 webpack.config.js 中打开陈设。

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,大型项目思索时间资金财产时得以利用cheap-module-eval-source-map。另外,Source
Map 只应该在开辟阶段使用,生产阶段记得将该配置其删除

更新webpack.config.js:

//webpack.config.js

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

        devServer: {
                contentBase:"./build",
                historyApiFallback:true,
                inline:true
        },
        //更新代码:
        devtool: "eval-source-map"    //配置Source Map 
}

三. CSS Evolution

4858美高梅 10

随着前端营造筑工程具的起来,CSS的支付也进入了1个全新的级差,自动化营造筑工程具(例如webpack)带来了新的开垦方式,SASSBEM的年份,还只好通过限制命名规则的格局来制止CSS争论和互动覆盖。

CSS Modules借助构建筑工程具完成了实在的模块化,webpack4中在css-loader计划项中就可以直接启用CSS模块化效果,使用起来尤其有利于。其原理正是通过营造筑工程具将文件中的类名直接沟通为Hash来实现。

Styled Components,实际上便是炒的火爆的CSS-In-Js的壹种完结。新东西总是褒贬不一的,有人说它是必然,也有人说它很难用,小编的建议是:继续观察。Styled Components概念的起来很有望是React团体的炒作行为,JSX已经将HTMLJS代码放在一齐编写,使用起来以为还不易,假若又增进CSS-In-JS
,
那么一定于选择JSX还要编写制定HTML+CSS+JS,你说这种美化未有私念哪个人信?此前使用<script><style>标签把代码都写在<html>中,你们叫嚣着”结构,样式,行为3者分离”,今后大家把代码分离了,你们又摇曳着大家把协会体制行为混在联合签字写到JSX里去,细思极恐。

上海体育地方只是形象地讲述了CSS技术的进步方向,并不代表后出现的就自然越来越好。假设在您的品种组里通过命名规则约定就能够制止顶牛,那的确没必要为了炫技或许赶时髦就去把代码全体制改良成CSS Modules或者
Styled Components的方式。

工具是为了让劳作变得更自在,而不是变得更复杂。

六、 编译器

本小节大家将认识webpack的能够说最棒壮大的法力之1:编写翻译器(装载器)Loaders

webpack1.x
中是loaders,在webpack2.x中将loaders换为了rules,大家在网上搜到的几近课程都以依据webpack1.x的,和现行反革命应用的webpack2.x有微微进出,分裂之处详见:Webpack二调升指南和特征摘要

闻讯过webpack的童鞋们一定都见过loaders这一个单词,那么难题来了,loaders是用来做哪些的?
大家对webpack能够将那1个运用浏览器无法辨识帮忙的各类语法编写的文本打包都有所耳闻,那webpack那种强硬的功用是用什么达成的吧?答案就是Loaderswebpack因而各类不一样的loader调用外部的脚本或工具,达成对两样门类文件的转移编写翻译处理,例如将sass转换为css,ES6/ES7转换为ES5,React中用到的jsx转换为js等。

同上,大家也须求在布置文件webpack.config.js中的module第一字下配置loaders,即webpack2.x中的rules(前边假使再出现rules即为loaders)。rules是1个数组,里面存放着索要使用的无数loader,每个loader都以1个对象,下边是loader中常用的多少个属性:

  • test:二个用来相配loaders所处理公事的拓展名的正则表达式(必须)
  • loader: loader的名称(必须)
  • include/exclude :
    手动增多必须处理的文书(文件夹)/屏蔽不须求处理的文本(文件夹)(可选);
  • query: 为loaders提供额外的安装选项(可选)

在安顿loader从前,我们将Greeter.js里的问讯音讯放在3个独自的JSON文件中,通过适当的铺排使Greeter.js能够读取JSON文件中的值,各文件修改后的代码如下:
在app文件夹中创设带有问候音信的JSON文件(命名称为config.json)

//config.json

{
  "greetText":"hello webpack!"
}

更新后的Greeter.js

//Greeter.js

//更新内容:
var config = require('./config.json');        //引入上面创建的 config.json 文件
module.exports = function(){                  //将该模块公开,外部其他文件可以调用该模块
        var greet = document.createElement('div');    //创建一个div
        greet.textContent = config.greetText;         //将 config.json 文件中greetText属性中的内容添加到创建的div中
        return greet;                                 //将该div块返回出去
}

webpack1.x 中,json
文件需求在布置文件中单独使用json-loader转变处理,而 webpack2.x
内置了能够拍卖json的模块,不供给再独自安顿。

七、 webpack打包ES6文件

我们继续打包文件,可是本次打包的是“品种文件,需求选择Babel。它是随着ES6,ES7,JSXjs语法的兴起而产生的,效率就是用来将这么些最近尚未被浏览器完全协理的语法调换为能够被浏览器识别帮忙的ES5
Babel包罗了几个模块化的包,核心成效在babel-corenpm包中,对于每三个您须求的效益或进行,你都须要设置单独的包,日常用的最多的是分析ES6babel-preset-es2015包和平解决析JSXbabel-preset-react包。
从而大家得以将上述的多少个 npm 包安装二次性的安装下来:

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

接下去我们在配置文件中配备babel

//webpack.config.js

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

    devServer: {
        contentBase:"./build",
        historyApiFallback:true,
        inline:true
    },
    devtool: "eval-source-map",

    //更新内容
    module:{
        rules:[
            {
                test:/(\.jsx|\.js)$/,   //该正则也可以写作  /\.jsx?$/
                use:{
                    loader: "babel-loader",
                    options: {
                        presets:[
                            "es2015","react"
                        ]
                    }
                },
                exclude:/node_modules/
            }
        ]
    }

}

前日用地点的安插大家就能够打包出用 ES6 语法编写的代码了。
下边大家修改代码,将上述文件中的代码改为 ES6
语法的代码,但是那里大家会用到
react,因而先安装ReactReact-DOM,命令如下:

npm install --save-dev react react-dom

下一场更新 Greeter.js 代码:

//Greeter.js

//更新内容:
import React, {Component} from 'react';    //引入React组件
import config from './config.json';        

class Greeter extends Component {          //创建class类 
    render(){
        return(
            <div>
                {config.greetText}
            </div>
        );
    }
}
export default Greeter;                   //返回react组件

更新 main.js 代码:

//main.js

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

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

履新实现后我们得以运作打包命令 webpack ,打包成功后再运转
npm run server 运行服务器,服务器会活动在浏览器中张开 html 页面,输出
「 hello webpack! 」:

localhost:8080

Babel的配置:
Babel
能够在布局文件中铺排,不过它同时也有专门多尤其多的设置选项,即使能够在
webpack.config.js 文件中安装,不过一旦有众多装置选项,webpack.config.js
就会显示很臃肿,因而大家得以把 babel
的设置选项提收取来,单独放在一个名为 .babelrc 的文本中。那里的 babel
的装置选项即为下图中选中的局地:

babel下的装置选项

未来大家就足以领收取有关部分,webpack 会自动调用 .babelrc
中的配置选项,修改代码如下:

//webpack.config.js

module.exports = {
    entry: __dirname + '/app/main.js',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: "./build",
        historyApiFallback: true,
        inline: true
    },
    devtool: "eval-source-map",
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/, //该正则也可以写作  /\.jsx?$/
            use: {
                loader: "babel-loader",
                //将以下部分代码注掉,该 babel-loader 的options 部分我们将在 .babelrc 中单独设置
                // options: {
                //      presets:[
                //              "es2015","react"
                //      ]
                // }
            },
            exclude: /node_modules/
        }]
    }
}

在该品种的根目录成立 .babelrc 文件

//.babelrc

{
  "presets": ["react","es2015"]
}

该文件中 只能 存放 babel-loader
下的安装选项,别的的loader设置不能在那里写

咱俩得以先打包,再展开本地服务器,查看是否布置成功。

八、 webpack打包css文件

通过前边几节演习,大家大概可能就如好像1般大约模模糊糊隐约约约明白了webpack是干嘛的,该怎么用,所以大家后续打包下1种档次文件:css
打包css文件的话,大家必要选用css-loaderstyle-loader,两者处理职务区别,css-loader能使用类似
@import
utl(...)的办法完毕require()的功能,style-loader将具备的乘除后的样式加入页面中,两者结合在同步使您可见把体制表嵌入到打包后的
js 文件。

第贰,安装四个loader:

npm install --save-dev style-loader css-loader

在配备文件中配置:

//webpack.config.js

module.exports = {

      ...
  module: {
        rules: [{
            test: /(\.jsx|\.js)$/, //该正则也可以写作  /\.jsx?$/
            use: {
                    loader: "babel-loader"
            },
            exclude: /node_modules/
        },

        //更新代码:
        {
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }]
        }

        ]
    }
}

专注那里对同三个文件引进八个 loader 的点子。

接下去在 app 文件中开创 main.css 的文本,设置一下样式:

//main.css

body {
    background-color: pink;
    color: salmon;
}
div {
    font-size: 30px;
}

本实例中的 webpack 入口唯一,即为 main.js
,所以任何的具有的模块都亟待经过 import / require / url
等与之建立关联,为了让 webpack 能找到该
css 文件, 咱们把它导入到 main.js 中,如下:

//main.js

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

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

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

一般性情状下,css 会和 js 打包到平等文件中,并不会打包成三个单独的
css 文件,但是也是能够将其分手的,大家在前面内容将会讲到怎么样将 css 与
js 分离。

1律,先运维 webpack 打包,再开发银行本地服务器看是或不是将 css
文件打包成功,运转服务器命令是 npm run server

卷入成功还要完结效益

如上,大家兑现了对 css 文件的卷入。

CSS module
领会,未来应用JavaScript
进行模块化开辟已经成了主流,大家可以把复杂的代码转化为多个一个的小的模块,并且那个小模块之间的借助关系很显然,每一个小模块中不掺杂其余剧情,合营优化学工业具,重视管理和加载管理能够自动完结,省时省力。
还要,CSS 也在不停的向阳模块化方向提升。而 webpack 从1先导就对 css
模块化提供了支撑,在 css-loader 中实行配备后,接下去做的就是把 modules
传递到需求的地方,然后就足以一贯把 css
的类名传递到零部件代码中,并且那样做只对眼下组件有效,不用操心在不一致的模块中动用同壹的类名形成争辨。具体代码如下:

//webpack.config.js

module.exports = {

      ...
  module: {
        rules: [{
            test: /(\.jsx|\.js)$/, //该正则也可以写作  /\.jsx?$/
            use: {
                    loader: "babel-loader"
            },
            exclude: /node_modules/
        },

        //更新代码:
        {
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader",

                //添加以下代码:
                 options: {
                    modules:true
                }

            }]
        }

        ]
    }
}

在app文件夹下创制2个 Greeter.css 文件

//Greeter.css

.root {
    display: flex;
    justify-content: center;
    border: 3px solid seagreen;
}

将 .root 导入到 Greeter.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 module 后的体制

CSS modules是二个相当大的宗旨,有意思味的童鞋能够去
法定文档
查看掌握更加多

CSS预处理器

  • sass 和 less 能够让我们写 css
    样式更加灵敏,小编想大家应该已经猜到了要在配置文件中应用有关的 loaders
    实行配置,用到的 loaders 即为 less-loader 和 sass-loader 。

  • 其它再介绍四个 css 的拍卖平台 PostCSS,它能够让你的 CSS
    实现更多的功力,能够去读书
    官方文书档案
    理解更加多

  • 那边大家用壹实例证实 PostCSS 怎样为 CSS
    代码自动抬高适应不相同浏览器的CSS前缀,能够大致明了为调同盟

率先安装 postcss-loaderautoprefixer (自动抬高前缀插件)

npm install --save-dev postcss-loader autoprefixer

设置到位后,将 webpack.config.js 更新:

//webpack.config.js

module.exports = {

      ...
  module: {
        rules: [{
            test: /(\.jsx|\.js)$/, //该正则也可以写作  /\.jsx?$/
            use: {
                    loader: "babel-loader"
            },
            exclude: /node_modules/
        },

        //更新代码:
        {
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader",
                 options: {
                    modules:true
                }
            },{
                      loader:"postcss-loader"
            }]
        }

        ]
    }
}

在根目录创制 postcss.config.js ,增添如下代码:

//postcss.config.js

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}
九、 webpack打包img文件

本小节大家将使用webpack打包两张图纸,并将其内置页面内

十、 插件(Plugins)

插件(Plugins)是用来拓展Webpack作用的,它们会在全部营造过程中生效,奉行相关的天职。

Plugins 和 Loaders 的区别:
 >> loaders
是在卷入营造进度中用来处理源文件的(JSX,Scss,Less..),一遍拍卖一个。
 >> plugins
并不直接操作单个文件,它一向对全部营造进程起效果,比如切割代码,分离css,压缩代码等。。。

运用插件的方法:
首先通过npm安装插件,然后在配置文件中引进该插件,接着在与 rules
同层级的岗位加多二个 plugins 关键字,结构如图, plugins
是1个数组,能够增进七个插件,前边将介绍三种常用插件及其宗旨配备格局。

plugins 在配备文件中的地点

十一、 BannerPlugin插件

该插件的效应是给打包后的代码增加2个版权申明,是webpack自带的插件,不用再行安装,配置情势如下:
先是在布置文件中引进 webpack :

const webpack = require('webpack');

继而在 plugins 插件数组中开创该插件,代码如下:

 plugins:[
      new webpack.BannerPlugin('版权所有,翻版必究')
    ]

然后运行打包命令,打开包装生成的文本,会在头顶突显版权申明,如图:

版权评释

十二、 HtmlWebpackPlugin插件

该插件的效应是安分守己1个简易的 index.html
模板文件,在结尾路线生成一个能够电动引用打包后的 js 文件的新的
index.html 文件,主要用于每趟退换的 js
文件名称都不壹致时,例如我们为了优化缓存在出口的 js 文件的名字中加了
hash 值的时候。
第2安装:

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

以此插件可以自动达成我们前边手动做的局地事务,还是可以生成 html
文件,此时大家项目布局中的 build 文件夹就足以让 webpack
本人去成立了,因而就不供给 build
文件夹了,可以先把该公文夹删掉,然后用webpack生成。
只要大家想利用该插件自动生成 html,则需求在 app 文件夹中开创一个index.tmpl.html 文件,该模板必须包罗 html 的不能缺少成分,如 title
等。webpack在编写翻译进度中,会依据此模板生成 html ,自动为该 html
增多它所注重的 css ,js 等此外文件。 index.tmpl.html 文件模板代码如下:

//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>

更新webpack的配置文件,代码如下:

//webpack.comfig.js

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

module.exports = {
    entry: __dirname + "/app/main.js",    //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",       //我们在这里设置输出路径,若该路径不存在,webpack会自动创建
        filename: "[name]-[hash].js"      //输出文件的文件名,这里[name]是自动匹配的,[hash]是自动生成的
    },

    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                   {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    },
                   {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
        })
    ]
};

再次打包,大家会发现自动生成了build文件夹,里面自动生成了二个js文件和3个html文件,运维服务器,阅览最终页面效果是或不是大家想要的职能

十三、 HMR插件

Hot Module Replacement (HMLAND)
也是大家常用的一个插件,它同意你在修改组件代码后,自动刷新实时预览修改后的效果。

布署格局:

  • 在布局文件中加多 HMQashqai 插件
  • 在 devServer 中添加 hot 参数

安排完事后JS依然不可能自动热加载的,还要求在JS模块中实行一个webpackk提供的API才具促成热加载。另壹种方法是用Babel对React模块实行职能热加载,不过用该种方法须要对babel设置选项进行安装,代码如下:

//webpack.config.js

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


module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin()//热加载插件

安装 react-transform-hmr

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

配置Babel:

//.babelrc

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

         "imports": ["react"],

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

接下去大家来修改下 package.json 文件下的 scripts 关键字下的始末:

将 “server” 改变为 “start”,再立异前面包车型地铁内容

即便你选用的是React,那么未来输入npm start就足以热加载模块了,每一趟保存都能在浏览器中观察内容。

当今大意讲述一下 webpack-dev-server 和 HMRAV肆大概有啥样分化,实际情况参见webpack-dev-server配置。

  • webpack-dev-server
    为我们提供了地点服务器,通过对其选取的片段设置,大家能够保存代码后让浏览器自动刷新,呈现大家修改后的代码
  • HMKuga 其实是三个插件,能够相配 webpack-dev-server
    使用,当对其布局达成后并运维服务器后,大家修改代码,然后保留的还要,浏览器内容并不会整整刷新,而是只更新修改部分内容,比如大家修改了2个边框样式,那么页面中任何的始末样式都不会动,只会刷新边框的体裁。
    想打听更深入的童鞋能够去爱上边发的链接里的剧情,也得以团结在网上寻觅两者差距。
十四、 BundleAnalyzerPlugin插件

在介绍该插件之前,我们能够先对近来的代码打包,然后看一下打包出来的格外JS文件体量,会发现大家只有写了那么几行代码,可是打包出来的js文件都有2M+,此时假诺项目已经完毕,该上线了,但那种直白打包出来的文书是自然不可能一贯推到线上的,因为容积太大。
那时候就足以用到该插件了。这几个插件成效是分析项目正视的,配置好该插件之后,运转完打包命令,浏览器会自动张开一个窗口,呈现具体正视的模块,清晰明了直观。

布局:首先安装该模块

npm install webpack-bundle-analyzer --save-dev

在配置文件中引进以及在插件 plugins 数组中实例化出一个插件:

//webpack.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  ...
module.exports = {
  ...
  plugins:[
      ...
    new BundleAnalyzerPlugin()
  ]
}

再一次运维打包命令,浏览器自动展开页面如下图:

image.png

作者们能够通晓地见到变化的 main.js 文件有
二.伍Mb,容积十分的大,我们供给对其实行优化。

十五、 ExtractTextPlugin插件

此刻大家最应该做的就是将Source Maps
配置选项缩短代码容量所以大家就须求用插件对转移代码进行优化,ExtractTextPlugin就是里面之1,功效是将编写翻译后的css与js文件分别。
配置格局如下:

  • 设置该插件:npm install --save-dev extract-text-webpack-plugin
  • 在布局文件中装置如下:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
  ...
module.exports={
  ...
  module:{
    rules:[
      ...
      {
        test: /\.css$/,
        use:ExtractTextPlugin.extract({
          fallback:"style-loader",
          use:{
             loader:"css-loader",
             options:{
                module:true
             }
           }
        }) 
      }
    ]
  },
  plugins:[
    ...
    new ExtractTextPlugin("style.css")  //括号中的内容为分离出的css文件的名字  
  ]
}

包装后会在指标文件夹生成css文件。

十六、 CommonsChunkPlugin插件

透过上述操作步骤后,打包出的公文的容量还是十分大,所以大家继续优化,此处引进CommonsChunkPlugin插件 。
其一模块的效果是提抽出大家用的第一方模块库,例如 react ,react-dom
等,这么些体积较大的模块我们得以把它摘出来,另存为三个js文件,然后通过
HtmlWebpackPlugin 插件,html会自行将该js文件引进到html中。

立异配备文件:

//webpack.config.js


  ...
module.exports = {
  //此处我们修改下入口文件
  entry:{
      app:__dirname + "/app/main.js",
      vendors:['react','react-dom']
    }, 
  ...
  plugins:[
      ...
    new webpack.optimize.CommonsChunkPlugin({name:'vendor', filename: 'vendor.js'})
  ]
}

包裹文件,成功领抽出vender.js,再观望生成的文件大小,大家主要的js文件容量就收缩了。越来越多webpack优化方案

十七、 UglifyJsPlugin插件

到此地的时候代码体积其实早已一点都不大了,不过我们为了追求极致,就会用到该插件,将代码深度压缩,经过压缩的js文件体积会变得越来越小。对代码的滑坡混淆,不仅能够保障代码的安全性,还足以减低能源文件的分寸,收缩网络传输。
该插件是对转移的具备 js 文件举办压缩,具体配置如下:

new webpack.optimize.UglifyJsPlugin(),

&ems p;「」

常用终端命令:

cd ..                             //返回上层目录
cd firDiector/sonDirector         //进入当前目录下的 firDiector 
                              文件夹中的 sonDirector 文件夹
touch file-name.xx                //创建filename.xx的文件
mkdir director-name               //创建名为director-name的文件夹
npm init                          //在当前文件夹
npm install webpack -g            //全局安装webpack,-g 的位置可在前
npm install --save-dev webpack    //在当前目录下安装webpack模块,
                              --save-dev表示在package.json添加当前
                              安装模块的简介,推荐添加
npm uninstall webpack             //删除webpack模块

发表评论

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

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