webpack 系统学习(1)

简介:webpack是一个给js准备的打包工具,官方的定义也就是一个打包器。它可以把很多的模块打包成很少的静态文件。webpack有一个自己的特性,就是代码分割;代码分割使得项目在加载时只加载当时需要的一些文件;

webpack安装和命令行:
在命令行中cd到需要安装webpack的目录下,初始化npm:

npm init

初始化完成之后可以安装webpack;现在安装的webpack都是4.X的,安装了4.x的都要安装webpack-cli才能打包成功

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

下面就来写一些代码来使用webpack进行打包:
1.新建一个hello.js

function hello(str){
    alert(str);
}
hello("hello world!");
  1. 打包命令
webpack hello.js -o hello.bundle.js
image.png
  1. 引入新文件(world.js),进行打包
require('./world.js')
function hello(str){
    alert(str);
}
hello("hello world!");
image.png
  1. 在js中引入css文件,并且进行打包
    引入打包css需要依赖一些loader,分别是css-loader和style-loader
npm install css-loader style-loader --save-dev

并且在导入时也要注意,需要添加loader

require('css-loader!style-loader!./style.css')
image.png

也可以不在引入的时候指定loader,在命令行中指定

require('./style.css')

使用命令:

webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader'
image.png

5.打包的一些参数
--watch 更新自动打包
--progress 显示打包进度
--display-reasons 显示打包的原因

建立项目的webpack的配置文件
首先需要了解webpack配置文件的4个概念:入口,输出,loader,插件
入口:webpack 应该使用哪个模块作为打包的开始
输出:就是打包完成之后生成的文件应该存在在哪里
loader:就是一些非js文件需要依赖的loader
插件:可以require一些插件,然后添加到plugins中,可以使得执行更广的业务;
写配置文件的目的就是方便打包;
配置文件默认的名字:webpack.config.js

const path = require('path')
module.exports = {
    entry: './src/script/main.js',
    output:{
        path:path.join(__dirname,'./dist/js'),
        filename:'bundle.js'
    }

}

直接执行webpack:


image.png

在dist中会生成bundle.js


image.png

如果配置文件名不是webpack.config.js,改成webpack.xj.config.js
使用命令:

 webpack --config webpack.xj.config.js
image.png

如果在打包时想输入一些参数,需要在package.json中配置:


image.png

执行:npm run webpack


image.png

多个入口文件的配置:

const path = require('path')
module.exports = {
    entry: {
        main:'./src/script/main.js',
        a:'./src/script/a.js',
    },
    output:{
        path:path.join(__dirname,'./dist/js'),
        filename:'[name]-[hash].js'
    }
}

将entry设置成对象形式,就可以配置多个入口文件;拥有多个入口文件就要有多个输出;
[name] -- 指代entry中的对象key
[hash] -- 指代打包时生成的hash值


image.png

image.png

html-webpack-plugin插件:

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

在配置文件中将插件引入:


image.png

重新打包完成之后会生成两个打包后的js+1个html,在html中会将生成的两个js引入


image.png

image.png

但是打包生成的index.html和我们自己创建的index.html没有任何关系,我们需要将他们建立关系,方法很简单:设置好模版即可


image.png

插件其他参数的使用:
filename::命名生成的html的文件名
inject:指定生成的脚本放在哪里,一般常用的就是"head"或者"body"
title: 设置html 的title,使用<%= %>的方式获取title值


image.png
image.png

image.png

也可以用这种方式查看是有的htmlWebpackPlugin

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <% for(var key in htmlWebpackPlugin){%>
        <%= key  %>
    <%}%>
    ------------------------------------------
    <% for(var key in htmlWebpackPlugin.files){%>
        <%= key  %> : <%=  JSON.stringify(htmlWebpackPlugin.files[key])%>
    <%}%>
    ------------------------------------------
    <% for(var key in htmlWebpackPlugin.options){%>
        <%= key  %> : <%=  JSON.stringify(htmlWebpackPlugin.options[key])%>
    <%}%>
  </body>
</html>

重新打包之后生成的html结果:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test config file title </title>
  <script type="text/javascript" src="main-4e082b2fc9be4cc4a21f.js"></script><script type="text/javascript" src="a-4e082b2fc9be4cc4a21f.js"></script></head>
  <body>
    
        files
    
        options
    
    ------------------------------------------
    
        publicPath : ""
    
        chunks : {"main":{"size":60,"entry":"main-4e082b2fc9be4cc4a21f.js","hash":"68ddd569f8e6fd8a323c","css":[]},"a":{"size":17,"entry":"a-4e082b2fc9be4cc4a21f.js","hash":"29cc8bc883ed375fa050","css":[]}}
    
        js : ["main-4e082b2fc9be4cc4a21f.js","a-4e082b2fc9be4cc4a21f.js"]
    
        css : []
    
        manifest : 
    
    ------------------------------------------
    
        template : "/Users/emma/Desktop/personal/myself/study/webpack/webpack-demo/node_modules/html-webpack-plugin/lib/loader.js!/Users/emma/Desktop/personal/myself/study/webpack/webpack-demo/index.html"
    
        templateParameters : 
    
        filename : "index-[hash].html"
    
        hash : false
    
        inject : "head"
    
        compile : true
    
        favicon : false
    
        minify : false
    
        cache : true
    
        showErrors : true
    
        chunks : "all"
    
        excludeChunks : []
    
        chunksSortMode : "auto"
    
        meta : {}
    
        title : "test config file title "
    
        xhtml : false
    
  </body>
</html>

其实到这一步我们就可以看出我们可以直接在script中使用<%= %>引入打包的文件,并且将配置文件中的inject改为false;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
  </head>
  <body>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.a.entry %>"></script>>
  </body>
</html>

打包结果:


image.png

output 中的 pulicPath:占位符,如果需要上线,对这个值进行了设置,那么在html文件中引用的js的路径就是以这个path开头的绝对路径;
minify:对生成的html进行压缩

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容