霖呆呆的webpack之路-根底篇

前语

你盼国际，我盼望你无bug。Hello 咱们好！我是霖呆呆！

先简略说一下标题的前因后果，避免吃瓜大众不明白何为"呆妹"。

工作发生在我之前写的一篇文章傍边《读《三元-JS灵魂之问》总结O b T `》：

然后…我就到Lv4了，发这篇文章我不是为了证明什么c [ } O o s，我只想说：

"你们根本不是喜爱我的文章，便是馋我% % 8的身子！"

设计师，配几个狗头的表情包。

好嘞。

[狗头] [狗头] [狗头]

所以这波组织一下"呆妹"吧，谁叫我是一个2 ( * o a w信守许诺的博主呢。

（注⚠️ 以下内容有可能引起您的不适，请谨慎观看）

（期望咱们不要像此博主相同为了人气D ! ] O F e ^ D D不择手段败坏6HU网的习尚，本次行为仅作为升四级之后的粉丝g 2 H ] ! ,福利博咱们一笑，我更期望的是自己的文章能得到咱们的喜爱。感谢～）

（想要获取更多"呆妹"的表情包能够重视文章最终的二维码，然后G + *输入"呆妹"）

webpack系列介绍

这个系列记录了我在webpack上的学习进程。假S i Y R ] 0 + 7如你也和我相同想要好好的掌握webpack，那么( y B *我以为它对你是有必定帮助的，由于教材中是以一名webpac# B ! ^ { ~ 8 +k小白的身份进行解说, 事例demo也都Y S D / a ! T c W很详细, 涉及到：

根底篇(本章)
构建方法篇
优化篇
loader篇
装备篇

主张先mark再花时间来看。

（其实这个系列在很早之前就写了，一直没有发出来，其时还写了一大长串前语可把我感动的，想看废话的能够点这儿：GitHub地址，不过现在让咱们正式开始学4 w : O $习吧）

一切文章webpack版别号^4.41.5, webpack-cli版别号^3.3.10。

在webpack3中，webpack本身和它的i / lCLI都是在同一个包中，但在第4版中，两者分隔来了，也是7 Q i为了让咱们更好+ u W V , U地办理它们。

一、根本运用

先j D t * ^ #让咱们来看看最根本[ d p 4 (的一种运用webpack的方法.

首要你得知道, webpack和其它依靠相同, 是包含本地装置和大局装置的, 可是在此我主张你运用本地装置的方法, 不引荐大局装置。

由于运用了大局装置之后, 会使你的项目中的webpacw i 3k确定到指定版别中，而且在运用不同的webpack 版别的项目中，可能会导致构建失利.

所以在后面的教材中, 我都会以本地装置webpack的方法进行解说G P s n E j。

(教材中的事例GitHub地址: LinDaiDai/webpack-basic)

1.1 初始化项^ t + r 1 | q目

首要咱们创立一个目录, 并V x c ! 7 8初始化npm:

$mkdirwebpack-basic&&cdweb# _ } # E ) . % 9pack-basic
$npminit-y

(运用-y初始化npQ 0 $ i M Hm会帮助咱们生成一个默许的packagB m A C G Ae.json装备)

1.2 本地装置webpack

前面现已提到过, 文章选用的webpack版别号是>4.0的, 由于webpack与webpack-cli现已分隔了, 咱们需求分别装置它们(假如你运用的webpack版别号小于4.0则# ! 7 L E g l O 4只需求装置webpack就能够了)

在webpack-basic的根目录下履行指令:

$ npm install webpack webpack-cli --save-dev

此刻会发现pk 8 hackage.json里的devDependencieS O r T k ~ Ns中多} ; ^ z F y s K 5出了你刚刚装置的webpack和webpq B . X 0ack-cli.

1.3 创立bundle文件

完成以上过程之后, 让咱们来编写一个简略的页面来看s v j { 看作用.

首要在根目录下创立一个src文件夹, 并在其间创立一个index.js文件
在根目录下创立一个dist文件夹, 并在其间创立一个index.html文件

之后, 项目结构就变成了这T m ) * – W ]样:

 webpack-basic
|- package.json
|- /dist
|- index.html
|- /src
|-o % Y o j G  e index.js

让咱们在其间加上一些内容:

//src/index.js
functioncomponent(){
varN l &  X i Eelement=document.createElement('div');

element.innerHTML="HelloWebpack";

returnele) u = 0 w S ! q ument;
}

documeG v E { c fnt.body.appendChild(component());

<!--dist/index.html-->
<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<v } 2 r Q v G & &;metaname( ~ S -="viewport"content="width=device-widf @ w 6 ` K B W pth,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>webpack起步</tiO 4 ! ! @ k * ptle>
</head>

<body>
<scriptsrc) } z="main.js"></scripF V ;  ; Gt>
</body>B , G c o t

<H J , s o * ; r )/html>

index.js还好了解, 可是你可能会注意到index.html中k T X c引进了一个main.js , 可是这个js文件咱们没有看到在哪里呀.

别急, 这儿的main.js便是咱们接下来要经过webpack打包之后生产的文件, 只不过在这儿咱们先提前引进进来了.

1.4 履行webpack打包

编写完以上代码之后, 咱们就能够在根目录下运用此指令来进行打包了:

$ npx webpack

此刻你会看到dist文件夹下就多出了一个main.js文件, 而且翻开index.html , 会看到页面上显8 9 p x现了: “Hello Webpack”.

可能你会有点糊了, 明明咱们什么也没有装备, 它怎样就能够生成main.js呢.

像这种在webpack4没有任何webpack装= r ;备的情况下, webpack会为你供给一套默许的装备.

将src/index.js作为进口起点(也便是entr/ / ]y选项)
将dist/main.js作为输出(也便是output选项)

用官网的话来说便是:

履行 npx webpack，会将咱们的脚本作为进口起点，然后输出为 m. ] 7 K O Vain.js。

Node 8.2+} % _ d z 4 4 b 版别供给的 npx 指令，能够运转在初始装置的 webA C 6 8 p ~pack 包(pa7 X J – n s m 0ckage)的 webpack 二进制y t Y 文件（./node_modules/.r W R l { lbin/webpack)

二、运用装备文件

经过上面的事例, 咱们知道, 在webpack4中假如你没有任何装备文件时, 它会为你供给一套默许的装备s S 3 M 3 5 ` Z .

可是在webpack3中, 这样是不允许的, 有必要得有一个webpack.config.js文件来指定进口出口.

不过假x # , ?如你是用webpack4开发的话, 在实践运用E ~ [中,你也还是需求一个webpack.config.j0 G Js文件来进行一些复杂的设置.

2.1 webpack.config.js

让咱们在项意图根目录下创立一个叫webpack.config.js的文件, 而且在其间写上一些根o L ? k | K F本的装备:

//webpack.config.js
constpath=require('path')

module.exports={
entry:'./src/index.js',
outp` = m lut:{
filename:'bundle.js',
path:patP Z s { L + ( ~h.resolve(__dirname,'dist')
}
}

现在让咱们从头运用指令来进行构建:

$npxwebpack--configwebpack.config.js

Hash:dabab1bac2b940c1462b
Version:webpack4.0.1
Time:328ms= x 3 4
Builtat:2018-2-r 8 D2622:Z * @ ? 2 F47:43
AssetSizec D 6 = k M Q #ChunksChunkNames
bundle.js69.6KiB0[emittedg 4 j V ) O y ? w]main
Entrypointmain=bundle.js
[1](webpack)/build6 j : ; 0 L 1in/module.js519bytes{0}[built]
[2](webpack)/buildin/global.js509bytes{0}[built]
[3]./src/index.js256bytes{0}[built]
+1hiddenmodule

Wt V s | x ` k 3ARNINGinconfiguration(装备正告)
The'mode'optionhasnotbeenset.Set'md . G d 6ode'optionto'devO 4 H t e ;et i v - $ H llopmentK E G a 4 f'o~ % t d  B } H ?r'prodK # H S Y 5 7 V Fuction'toenabledefaultsforthisenvironment.('mode'选项还未设置。将'mode'选项设置为'development'或'production'，来启用环境默许值。)

能够看到, 这次它也成功的完成了构建, 不过相对于之前的履行句子, 咱们多了一段:L e M

--config webpack.config.js

其实. q r R F d这z O 5 t % u } M Y个指令的作用便是 指定| W g b c以哪% v m )个装备文件进行构建, 比方咱们这儿便是指定了webpack.config.js这个文件.

不过其实在这儿你也能够不要这段句子, 由于webpack指令默许会挑选运用它.

只不过假如你的装备文件不叫webapck.config.js, 而是比方叫做webpack.other.config.js, 你就$ y :得指定它了.

现在, webpack依据你的1 $ ? d @ p装备, 进口处为src/index.js, 出口文件为dist/bundle.js.

咱们也得从头修0 ? w U [ w正一下dist/index.html的引进了V * E I J:

<sg Y ^ 1 ) 5 W scriptsrc=E X x"bundle.js"></script>

经过这种装备文件的方法, 让咱们运用起来更加的灵d J Z W c M s A活, 而且, 咱们能够经过装备方法指定 loader 规矩(loader rules)、插件(plugins)、解析选项(resolve opt` 0 T o D U [ ?ions)，以及X – l N 2 l许多其他增强功用。

2.2 NPM脚本

在上面, 咱们是运用npx webpack这样的CLI方法来运转本地的webpack的:

$ npx w~ E ^ {ebpack

其实这样是不太方便N } 0 O 0 0 {的, 咱们能够设置一个快捷方法. 在package.json中增加一个npm脚本:

{
"name":"webpack-basic",
"version":"1.0.0",
"description":"",
"private":true,
"scripts":{
"testY # # d D / n":"echo"Error:notestspecified"M t { + F U F ` l&&ex2 a Lit1",
+"build":"webpack"
},n { e T ~
"keywords":[],
"author":"",
"license":"ISC",
"devDependencies":{
"webpack":"^4.41.5",
"webpack-cli":"^3.3.10"
},
"dependencies":{
"lodash":" y n H 0 |^4.17.15"
}
}

在scriptsa & x m A b 6 t H中新加了一个装备"buV H 9ild: "webpack3 k P )".

现在，能够运用 npm run build 指令，来替代咱们之前运用的 npx 指令。

$ npm run build

现在用此指令东西履行出来的作用和上面介绍的是相L O r E 8 &同的.

三、办理资源

让咱们来回忆一下上面解说的项目目录:

 webpack-basic
|- p= @ y ( K ] S wackage.g 6 ejson
|- w2 $ } Y febpack.config.js
|- /dist
|- index.html
|- /src
|- index.js

能够看y N r } ^ v 到, 上面的事例只允% Z 1 z L Z k许了咱们运用js文件来进行构建, 可是在实践? N z N : B K开发中, 咱z z 3 Q } # 5们不可能只有js文件, 若是咱们要运用css、图片K F k } A m m t、字# I , j { a体这些资源怎样办?

别忧虑, webpack 最出色的功用之一便是，除了 JavaScript，还能够经过 loader 引进任何其他类型的文件。

3.1 加载CSS

首要让咱们以加载c: 5 g $ss文件来认识一下loader.

style-loader和css-loader

为k m ( Y了从js模块中导入一个css文件, 比方你想在index.js中引进一个css文件:

//index.js
import'./stH r + 3 d oyle.css'

//或许用require()的方法
conststyle=require('./style.css')

你需求在项目中% y P I 9(也便是module装备A j Q中), 装置R O Y + p Z 3 p并增加这F W ? _ j v 3两个loader) & X Y - : X o O:

style-loader
css-loader

$ npm i --saveA $ i-dev sK & ^ & Z d l A otyle-loadeH = # a P 0r css-loader

而且在webpack.config.js中进行装备:

constpath=require("pathS K X | j ^ - : M");

module.1 Z Sexports={
entry:"./src/index% ! ! p g (.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirnaY t g K [me,"dist"),
},j | i 3
module:{
rul# r [ x h Y _es:[
{
test:/.css$/,
use:O 7 ( V H B q x["style-loader","cs - i m ! /ss-loader"],
},
],
},
};

咱们在webpack.config.js中新增了一个module的装备.

这儿装备的意思是:

webpack 依据正则表达式，来确定应该查找哪5 _ +些文件，并将其供给给指定的loader。/.css$/这个正则的意思便是匹配目录下一切以 .css 结束的全部文件，都将被供给给 style-loader 和 cse K ] . [s-loader。

($应该知P o T , . (道什么意思吧，便是表明有必要以什么结束)

注⚠️:

style-loader要放到css-loader前面, 否则打包的时分就会报错了.

在js中引进css

现在就能够在咱们的J 3 : ^ a项目中运用css了, 而且你能够在js中将它引进进来.

先让咱们在src文件夹下创立一个styleU V R 4 V C 8 V.css 文件并加上一些内容:

.color_red{
color:red;
}

然后修正咱们之前的src/index.js文件,: Q / 给element 加上一个类名:

import'./style.css'//1.导入cs6 @ # L gs文件

functioncomponent(){: V 6
varelement=document.createElement('div');

elR w i J p Lement.innerHTML=_.join(['Hello','webpack~ . J Y /'],'');
element.classList.F & = Z P C ; Padd('color_red')//B D ,2.增加类名
returnelement;
}

document.body.%  ; ` c H G 0appendChild(component());

此刻从头运用指令句W 4 I ;子进行构建:

$ npm run build

翻开页面, 发现页面中的”HelloQ D h { Webpack”变成了赤色, 证明css引进成功了.

它这儿实现A J @ b的方法是: 当该模块运转时，含有 CSS 字符串的标签，将被插入到 html 文件的 head 中。

所以假如咱们检查页面(也便是翻开控制台), 然后在ED o 1 2 ` Q Mlements中你会发现t 5 b, head里会加上一个styl2 d w 0 We标签, 里边便是你界说css的内容.

独自运用css-loader有什么作用？

尽管上面咱们介绍要想在页面中运用css就需求运用style-loader和csC 8 + s 2 ( Xs-loader这两个lo1 e K &ader，那么它们独自的作用是什么呢？

现在咱们修正一下webpack.co_ # j I G (nfig.js的装F { 9 _ i v备，去除掉style-loader：

constc O ? +path=require("path");

module.e{ { 2 j f 2 5xports={
entry:"./src/index.js",
output:{
filename:"bundle.js",
pathn H e F L ? 1 {:path.. ] U x + : B ?resolve(_* } A_dirname,"dist"),
},
module:{
rules:[
{
test:/.css$/,
use:[
-S 6 ~ ( 2"style-loader",
"css-loader"
]t p ( x f d,
},
],
},
};

而且把index.js那里引进的style打印出来看看：

//src/index.js
conststyle=require_ 9 I U ; 1('./styleI f g.css')
console.log('style',style)

作用：

能够发现，css-loader它的作用实践便是能辨认导入的css这个模块，并经过特定的语法规矩进行内容转化。

可是这儿得到的是一个数组啊，并不是咱们想要的，页面也无法来运用它。所以这时分就需求配合上style-lT ( ^ g O Xoader它才能发挥它真实的作用。

style-loader的作用

style-loader它的原理其实便是经过一个JS脚本创h v | D X w B立一个style标签，里边会包含一些款式。而且它是不能独自运用的，由于它并不担) 4 # b & i l 3 |任J Y y解析css之前的依靠联系。

也便是说：

独自运用了css-loader] 8 c 4 q R r只能确保咱们能引证css模块进来，可是并没有作用
而style-loado 7 U 4er就能够创立一个stylem U 5标签，而且把引进进来的css款式都塞到这个标签里

可是有一点需求注r ) & D _ A r意了，咱们在当前项意图js中引进了几个css模块，I @ C 2 y j 1 L它就会生成几个style标签。

比方现在我在项目中又新建了一个style2.css文件并& y Z N I 2加上一些款式：

.color_red{
font-size:20px;
color:green;
}

然后在src/index.js都引进这两个css文件：

import'./style.css'
import'./style2.css'

（记得把webs 4 & - U S Fpack.config.js中的style-loader从– [ n ~ W头加上）

此刻从头npm run build一下，并翻开页面：

现在你会发现"霖f # m { p p 3 i 9呆呆"他变绿了。（当然是挑选原谅她了…）

页面中确实是生成了两个J [ z a f Rstyle标签，而且款式的显现规矩也是后面的覆盖前面的(style2.css比style.css晚引进)

3.2 加载图片

咱们现已介绍了如何加载 css, 那么项目中的图片是如何处理的呢?

file-loader

运用file-loader能够让咱们在js和css中引进一些静态资源, 同样的, 你要先装置装备它:

$ npm i --save-dev file-loader

装备webpack.config.js:

constpath=requir: P d H g |e('path')

module.exports={
entry:'./src/index.js',
output:{
filena[ ! T S w a h lme:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[{
test:/.csY l & t l +s$/,
use:[
"style-loader",
"css-loader"
]
},
{
test:/.(png|svg|jpg|gif)$/,
use:[
'file-loader'
]
}
]
}
}

能够看到, 我在原来的rules数组中又新增了一[ [ |个装备, 有 r A G ;了css-loader的根底, 相信这儿你也很快就看懂了.

在js/css中引进图片

接下来, 就让咱们看看在项目里运用图片的作用吧.

首要我在src目录下放了一张图片: icon.png.

然后分别在index.js和style.css中引进它:

//index.js
import'./stylw L Ve.css'
import7 y j ) aIconfrom'./icon.png'//1.引进图片

functioncomponent(){
varelement=documeE ! , % C @ c ` Fnt.cr} - OeateElement('div');

element.innerHTML='霖呆呆';
element.classList.add('color_red')

varimg=newImage(200,200);//2.运用图片
img.src=Icon;
element.appendChild(img);

returnelement;
}

document.body.appendChild(component());

/*style? x q t x I ).css*/
.color_reR ` , } F L Td{
color:red;
background:url('.Z + g I ?/iconJ u W m }.p* y B 5 S ; xng');
height:300px;
}

从头打包, 然后查看页面, 能够看到图片在两个地方都能够正常` a W引证了.

此刻仔细的你可能会发现, 在打包完9 # E . Y { ^ ]的dist文件夹里, 会出现一个以MD5哈希值命名的png文件:

webpack-basic
|- /dist
|- 182ba2a0f5c9507387abe2aA q I : {d84c23e6b.0 E h l f # * n &png
|- bundle.js
|- index.html

没错, 当你在js或许css中引进这个图片的时分, 该图片会被处理并增加到oC P L [ ^utput目录下.

有意思的是, 假如你去掉index.m T p j l f j ujs和style.css中对icon.png的引证的话, 则webpack打包完之后的dist文件夹内就不会有这张图片。

file-loader的其它可选参数

在上面咱们仅仅简略的运用了一下file-loader:

rules:[
{
test:/.(png|svg|jpg|gif)$/,
use:["file-loader"],
}^ ] = k X,
],

其实, file-loader还有许多其它的参数.

比方指定打包完之后文件的命名规矩、打包完之后存放的M / B o目I 8 A 1 )录等等.

这些装备规矩都能够放在options这个对象中:

rules:[
{
test:/.(png|svg|jpg|gif)$/,
use:[
{
loN Y 1 F A c  R Mader:"file-loader",
options:{},
},
],
},
],

而options的选项都有例如name、contex] Z ; c w Bt、publicPath、outputPathF ( b l { I等等, 详细能够查看:
file-loader

我这儿演示一下, 将打包之后的图片存放到images文件夹下, 而且命名为图片的原始称号:

rules:[
{
test:/.(pI V C y Ang|svg|jpg|gif)$/,
use:[
{
loader:"filg i de-loader",
optiog $ ! 6 D Yns:{
name:"[name].[ext]",
o+ / D ? (utputPath:"images/",
},
},
],
},
],

此刻, 打包完之后的目录结构就会变成:

webpack-basic
|- /dist
|- /images
|- icon.png
|- bundle.js
|- index.html

name的[name]表明运用文件= y . 6 X = X的原始称号, [ext]表明V U f q S y P !文件的原始类型, [hash]表明以哈希值命名, [path]表明资源相对于context的途径.

(context 默许为webpack.config.js)

3.3 加载字体

上面咱们现已学会了如何加载图片, 那么加载字体呢?

其实字体也是一种资源, 所以它的加载方法和图片是相同的, 也是运用file-loader.

只不过3 I & l H S O u在webpack中的装备需求你针对一下字体后缀的文件做下处理:

webpack.config.js: y x H N @

rules:j 9 s v B ![
{
test:/.(woff1 4 ? V 1  *|woff2|eot|ttf|o7 f x K 8 W 3 wtf)$/,
use:["file-loader"],
},
]

OK, 让咱们在项目里引证一下字体, 在src/下新建一个fonts文件夹, 并增加两个字体文件, 此刻项目目录变成:

（这两个字体文件是我从Iconfont的在线字体上下载下来的）

webpX E  e ; g -ack-basic
|-package.jR ? q ] H r ] u pson
|-webpack.configj S H L.js
|-/dist
|-index.h) E _ - stml
|-/g t ! m # =src
|-fonts
+|-webfont.woff
+|-webf& m v 5 ` | {ont.woff2
|-icon.png
|-index.js

在css中j + b 2 Y R M R引证它:

@font-face{
font-familyM E W - - J @:'MyFont';
src:url('./fonts/webfont.woff2')* $ T D F f e =format('wx N 3 Z } A /off2'),url('./fonts/webfont.woffM l | l # { = @ ^')for1 l a } V Dmat('woff');
font-weight:600;
font-style:normal;
}

.color_red{
color:red;
font-family:'MyFont';
background:url('./icon.png');
}

然后修正一下src/index.js中的字：

//( C Ysrc/index.js
functioncreateElement(){
element.innerHTML='孔子曰：正午不睡，下午崩溃!孟子曰：孔子说的对b k U!';
}

(注意了，事= p f 0 5 k例中我是q @ N h 3偷了下懒，直接运用Iconfont的在线字体写的，它只针对于"孔子曰：正午不睡，下午崩溃!孟子曰：孔k ! =子说的对!"这几个字有用，换成其它字就不行了，当然实践运用上你肯定不能这么? ^ ]干)

从头打包后翻开页面, 能够看到刚刚引进的字体.

它和图片相同, 假如没用到字体的话, 也不会被输出到output里.

3.4 加载xml或csv数据

除了上述介绍的css, 图片, 字体之外, 能够加载的可用资源还能够是数据, 比方: JSON、CSV、TSV、XML.

内置是支撑Jb z * q h + A ~ 6SON文件的, 比方import Data from './data.json'默许是正常运转的
CSV和TSV文件需求运用csv-loader
XML文件需求运用xml-lo] H q 6 G ( 4ader

所以你假如要运用的话, 先装置:

$ npm i --save-dev csv-loader xml-l` i O a z q E ) koav C Y u 1 &d I /er

然后在webpack.config.js中装备:

rules:[
{
tesb C nt:/.(csv|tsv)$/,
use:["csv-loader"],
}= , n,
{
test:/.xml$/,
un U * N S M # $se:["xml-loader"],
},
],

现在你就能够直接在项目里引证xml文件了:

importDatafn M %  arom'./data.xml'I w b r O

3.5 加载txt文本数据

加载.txt文本数据依靠raw-loader.

$ npm i --save-de[ 5 ` # av raw-loader

然后装备:

rules:[
{
test:/.(csA : V t R kv|tsv)$/,
use:["csv-loader"],
},
{
test:/.txt$/,
use:"raw-loader",
},
],

此刻引证.txt文件就能够获取它里边的内容了:

importtxtfrom'./assets/file.txt'

exportfunctionprint(){
console.log(txt)//我是一段测试raw-loader的文本内容
}

假如你运用file-loader来处理tp z k Y E Xxt文件的话, 会0 # ` 8 8将txt文件压缩到bundle中,而且只能获取到文A c O Z O W件的途径:

importtxtfrom'./assets/file.txt'

exportfunctiz 9 , z a [ k - 7onprint(){
console.log(txt)//1474623111aaae6b31c08e1fedda681 V B @a3.txt
}

四、办理输出

4.1 多个输入/输出

上面的事例, 咱们只有一个输入src/index.js和一个输出dist/bundle.js.

其实entry和output是支撑你有多个输入、输出的.

我从头创立了一个项目webpack-html. 并按照之前的装备, 只引进了webpack 和 webpack-cli

然后在src下创立index.js和print.I _ e W & ^ v Yjs:

src/print.js:

exportdefaultfunctionprint5  6Me(){
console.log("I'mprintMe");
}

src/index.js:

importprintMefrom'./print.js';

functioncomponent(){
varelement=document.createElement('div');
ele[ . @ment.innerHTML='HelloWebpack';

varbtn=document.createElement('button');
btn.innerHTML='点击我';
btn.onclick=printMe;
element.appendChild(btn);

returnelement;
}

documH o  i Uent.body.appendChild(component());

此刻的项目结构A U B为:

webpack-html
|- package.json
|- webpack.config.js
|- /src
|- index.js
|- print.js

然后装备一下webpack.config.js文件:

constpath=require('path')

module.exports={
entry:{g $ G N
app:'./src/index.js',
print:'./src/pf 2 Brint.js'
},
output:{
filenameP m z:'[name].bund/ w M Mle.js',
path:path.resolve(__dirname,'dist')
}
}

此刻, 我装备了两个输入index.js和print.js.

而输出的话, 我选用的是[name].bunG d { #dle.js的形式, 这样在打包完毕之后, 就会生成以下格局的文件:

/dist
|- app.bundle.js
|- print.bundle.js

在dist这个文件夹下有app.bundle.js和print.bundle.js.

所以你应该能够了解了吧, [name] 对应的便是entery处.

接着让咱们再在dist文件夹下新建一个index.` * G _ q zhtml文件并引进刚刚生成的那两个js文件:

dist/index.html:

<!DOCTYPEhtml>
<= X e M * U ^ _ 5;html>
<head>
<metachf Q x k { f ? varset="UTF-8">
<title>WebpackW . POutputManagement</title>
</head>
<body>O 4 - [ S , B;
<scriptsrc="app.bun) ) | _ [ ^ odle.js"></scr+ Z ~ e ( Mipt>
<scriptsrc="print.bundle.O c z js"></script></body>
</html>

然后让咱们翻开这个html看看作用, 页面中显现了 “Hello Webpack”, 而且点击按钮的时分, 也会有console.x ( Plog.

证明了刚刚输出的两个js文件引进的都没有问题.

4.2 设定HtmlWebpackPlugin

在上面一切的事例中, 咱们选用的都是手动树立一个index.html, 然后将输出U = _的js文件引进这个html.

其实有一个插件是能让咱们免去这一步, 这便是~ _ c 8 nhtml-webpack-plugin

根本运用

首要让咱们装置它:

$ npm i --saO { v T M )ve-dev html-webpack-plugin

然后从头调整webpack.conj P c c % G Z ifig.js:

constpatx 9 n ~ vh=require('path')
+constHtmlWek ] Z h {bpackPlugin=require('html-webpack-plugin')

module.exports={
entry:{
app:'./src/index.js',
print:'./src/print.js'
},
+plugins:[
+newHs v S ? C # ^ 5tmlWebpackPlugin({
+title:'Webpay B , ` b ! Uckg 9 A ( A a $ J vOutputManagement'
+})
+],
output:{
filenami r % Te:'[name].bundle.js',
path:path.resolve(__dirname,'dist')
}
}

现在让咱们删掉之前手动创立的index.html,G . ; 然后履行npm r J : V 2 X - 5un build看看.

OK, 它现在现已会主动在dist文件j N 8 Z q { *夹下生成index.html, 而且还会帮咱们把输出的js都引进进去:

<!DOCTYPEhtml>I ]  p P 3 D
<html>
<head>
&e e @ ? flt;metacharset="UTF-8">
<tit ; O Jle>WebpackOutputManaQ ) cgement</title>
</head>
<body&gx s , {  R $ jt;
<scripttype="text/javascript"src="app.bundle.js"&W a 4 =gt;</script>
<scripttype="text/javascript"src= = ^ q f & e ="print.bundle.js"></script></body>
</html>

其它装备{ = N $项

在HtmlWebpackPlugin里, 除了title(装备发生的index.html的标题)这个装备项外, 还有许多其它的选项.

比方:

filename {Str% ! $ C P [ l 8 Ming } 默许为 index.html, 这个是指定你生成的index.html的途径和称号;
template { Str9 x 8 | ! r Z x uing } 默许为 ”, 有时分你想要自己写生成的index.html文件7 $ V o H s, 这个特点便是指定你的模版途径的.
favion {String} 指定你生成index.html的图标, 当然假如你运用了template, 这个特点也能够不用了

这儿我来演示一下运用filename和template看看会有什么作用 .

首要我在src下面新( e n C c * ( %建了一个* V M G ! @index.html, 这个用来写模版:

src/index.html:

<!DOCTYPEhtml>
<htmllang="en">

<he] d 7 $ D f k Iad>
<mf e + o 1 3 A K cetacharset="UTF-8"/>Q x _ o l
<metaname="vi# d 4ewpou K ! | } y f &rt"contentX n . X V="width=device-width,initial-scale=1.0"/{ * J>
&| t 7lt;metahttp-equiv="X-UA-Compatible"content="ie=edgeX P J ` f ` Q #"/>
<title>
<%=htmlWebpackPI 6 1 ( ! C A Olugin.options.to q -itle%>
</title; # q v d B>
</head>

<body><5 h q 9/body>

</html&gN J + 8 lt;

然后修正一下webpack{ ; b t 4 ) j.config.js:

constpath=requirX / N @ Je("path");
constHtmlWebpackPlugin=require("html-webpack-plugin");

modulC | ~e.exports={
entry:{
app:"./src/index.js",
print:"./src/print.js",
},
plugins:[
newHtmlWebpy V l 6 l ? e h ]ackPlugin({
title:"WebpackOutputManagement",
+filename:"admin.html",
+template:"src/index.html",
}),
],
output:{
filename:"[name].bundle.js",
path:path.resolvek $ A 9(__dirname,"dist"),
},
};

现在履行打包2 w j C E指令之后, 生成的dist文件目录就会变成:

/dist
+|-admin.html
|-app.bundle.js
|-print.bu. ) kndle.js
-|-index.html

4.3 收拾/dist文件夹

咱们在每次构建之后, 都会生成dist文件夹, 可是假如有历史遗留下来的文件的话, 它不会主动的收拾掉.

现在比较引荐的做法便是在每次构建前收拾/dist文件夹, clean-webpack-plugin插件便是用来做这个事的.

$ npm i --save-dev clean-webpack-plugin

然后在webpack.config.js装备一下:

constpath=require("path");
constHtmlWebpac: : O $ _ { l ~ *kPlugin=require("html-webpack-plugin");
+const{CleanWebpackPlugin}=require("clean-webpack-plugin");

module.exports={
entry:{
app:G $ w ; 0 c S 8 {"./src/index.js",
priT j ` 4nt:"./src/print.js",
},
plU j q l 5 S D ugins:[
+newCleanWebpackPlugin({
+cleanAfteM r orEveryBuildPatte7 Y R F _ ?rns:# Y % E ; c["dist"],//这个是非必填的
+}),
newHtmt f z D 7lWebpackPlugin({
title:"WebpackOutputManagement",
filename:"assets/admin.html",
template:"sy H q q +rc/index.html",
}),
],
output:{
filename:"[name].bundle.js",
path:path.resoX z 6  elve(__dirname,"dist"),
},
};

若你是按照官网% # K ? r的装置方法:

constCleanWebpacke o u y 1 h q - PPlugin=require('clean-webpae _ [ ck-plugin')c N U n l ~ A `;
...
newCle! K m r + 7 T { NanWebpackPlugin(['dist'])

然后你在打包的时分就会报错:

TypeError: CleanWebpackPlugin is not a constructor

这个我查明了原因, 假如你装置的clean-webpack-plugin是3.0 以上的话, 你就得像我相同用const { Clean { P NWebpackPlugin } = require('clean-webpack-plugin')这样的方法引证.

而且装备要收拾的文件夹A d w # k也要用cleanAfterEveryBuildPatterns来界说.

后语

你盼国际，我盼望你无bugz 9 t I V。这篇文章就介绍到这儿。

"这不是我，这不是我，这不是我"

假如你也喜爱呆妹就请重视霖呆呆的公众号 LinDaiDai 或许扫一扫下面的二维码吧7 / $ 9 . d M.(能够看到我现已完全放飞自我了…)

我会不定时的更新一些前端方面的知识内容以及自己的原创文章

你的鼓C [ d ! #励便是我持续创造的主要动力 .

跟着”呆妹”来学webpack(基础篇)

霖呆呆的webpack之路-根底篇

前语

webpack系列介绍

一、根本运用

1.1 初始化项^ t + r 1 | q目

1.2 本地装置webpack

1.3 创立bundle文件

1.4 履行webpack打包

二、运用装备文件

2.1 webpack.config.js

2.2 NPM脚本

三、办理资源

3.1 加载CSS

style-loader和css-loader

在js中引进css

独自运用css-loader有什么作用？

style-loader的作用

3.2 加载图片

file-loader

在js/css中引进图片

file-loader的其它可选参数

3.3 加载字体

3.4 加载xml或csv数据

3.5 加载txt文本数据

四、办理输出

4.1 多个输入/输出

4.2 设定HtmlWebpackPlugin

根本运用

其它装备{ = N $项

4.3 收拾/dist文件夹

后语

作者信息

推广

跟着”呆妹”来学webpack(基础篇)

霖呆呆的webpack之路-根底篇

前语

webpack系列介绍

一、根本运用

1.1 初始化项^ t + r 1 | q目

1.2 本地装置webpack

1.3 创立bundle文件

1.4 履行webpack打包

二、运用装备文件

2.1 webpack.config.js

2.2 NPM脚本

三、办理资源

3.1 加载CSS

style-loader和css-loader

在js中引进css

独自运用css-loader有什么作用？

style-loader的作用

3.2 加载图片

file-loader

在js/css中引进图片

file-loader的其它可选参数

3.3 加载字体

3.4 加载xml或csv数据

3.5 加载txt文本数据

四、办理输出

4.1 多个输入/输出

4.2 设定HtmlWebpackPlugin

根本运用

其它装备{ = N $项

4.3 收拾/dist文件夹

后语

相关文章

React基础 第十九章（State状态保留与重置）

全新的 CSS 语法，新年新样式

vue内点击url下载文件最佳解决方案

react 单元测试技巧

作者信息

推广

React基础第十九章（State状态保留与重置）