Webpack快速入門(mén)

laznrbfe 發(fā)布于2019-08-20 18:13 / 2227人閱讀

摘要：了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊，返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。

了解Webpack相關(guān)

什么是webpack

Webpack是一個(gè)模塊打包器(bundler)。

在Webpack看來(lái), 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理

它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，生成對(duì)應(yīng)的靜態(tài)資源

理解Loader

Webpack 本身只能加載JS模塊，如果要加載其他類型的文件(模塊)，就需要使用對(duì)應(yīng)的loader 進(jìn)行轉(zhuǎn)換/加載

Loader 本身也是運(yùn)行在 node.js 環(huán)境中的 JavaScript 模塊

它本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果

loader 一般以 xxx-loader 的方式命名，xxx 代表了這個(gè) loader 要做的轉(zhuǎn)換功能，比如 json-loader。

配置文件(默認(rèn))

webpack.config.js : 是一個(gè)node模塊，返回一個(gè) json 格式的配置信息對(duì)象

插件

插件件可以完成一些loader不能完成的功能。

插件的使用一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定。

Webpack 本身內(nèi)置了一些常用的插件，還可以通過(guò) npm 安裝第三方插件

學(xué)習(xí)文檔 :

webpack官方入門(mén): http://webpack.github.io/docs...

Webpack中文指南: http://zhaoda.net/webpack-han...

你將學(xué)到:

How to install webpack

How to use webpack

How to use loaders

How to use the development server

How to use image

初始化項(xiàng)目: package.json

{
  "name": "webpack_test",
  "version": "1.0.0"
}

安裝webpack

npm install webpack@1 -g  //全局安裝
npm install webpack@1 --save-dev  //局部安裝

開(kāi)始編譯

創(chuàng)建入口src/js/ : entry.js

document.write("entry.js is work");

創(chuàng)建主頁(yè)面 build/: index.html

編譯js

webpack src/js/entry.js build/js/build.js

查看頁(yè)面效果

第二個(gè)js

創(chuàng)建第二個(gè)js: src/js/content.js

module.exports = " 
 It works from content.js";

更新入口js : entry.js

* document.write("entry.js is works.");
* document.write(require("./content.js"));

編譯js:

webpack src/js/entry.js build/js/build.js

查看頁(yè)面效果

第一個(gè)加載器(loader)

安裝樣式的loader

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

創(chuàng)建樣式文件: src/css/test.css

body {
  background: red;
}

更新入口js : entry.js

+ require("style-loader!css-loader!../css/test.css");
* document.write("entry.js is works.");
* document.write(require("./content.js"));

編譯js, 并查看頁(yè)面效果

webpack src/js/entry.js build/js/bundle.js

綁定加載器

更新入口js : entry.js

- require("style-loader!css-loader!./test.css");
+ require("./test.css");

編譯:

webpack src/js/entry.js build/js/bundle.js --module-bind css=style-loader!css-loader

查看頁(yè)面效果

使用webpack配置文件

創(chuàng)建webpack.config.js

module.exports = {
  entry: "./src/js/entry.js",//入口路徑配置
  output: {//出口配置
      path: __dirname + "/build/js",//輸出路徑
      filename: "bundle.js"http://輸出文件名
  },
  module: {
    loaders: [//模塊加載器配置
      { test: /.css$/, loader: "style!css"}  //所有css文件聲明使用css-loader和style-loader加載器
    ]
  }
};

編譯

webpack
webpack --progress   //編譯顯示進(jìn)度

問(wèn)題---每次修改模塊文件內(nèi)容的重新手動(dòng)打包，刷新

自動(dòng)編譯

webpack --watch  //編譯并啟動(dòng)監(jiān)視(但需要刷新瀏覽器)

瀏覽器自動(dòng)刷新(熱加載)----解決手動(dòng)刷新瀏覽器問(wèn)題

npm install webpack-dev-server@1 -g
webpack-dev-server
  訪問(wèn): http://localhost:8080/webpack-dev-server/
      ; http://localhost:8080
  !!!發(fā)現(xiàn)問(wèn)題----訪問(wèn)的是文件夾路徑而不是頁(yè)面
    devServer:{
          contentBase: "./build",//內(nèi)置服務(wù)器動(dòng)態(tài)加載頁(yè)面所在的目錄
          historyApiFallback:true,//不跳轉(zhuǎn)
          inline:true
      }
      
    contentBase : 默認(rèn)webpack-dev-server為根文件夾提供內(nèi)置的服務(wù)，如果其他目錄下的文件
                  提供服務(wù)需要在此設(shè)置目錄(我們?cè)O(shè)置為build文件夾)
    historyApiFallback : 開(kāi)發(fā)單頁(yè)面的時(shí)候非常有用，它依賴于H5的 history API，當(dāng)
                        設(shè)置為true的時(shí)候所有的跳轉(zhuǎn)都指向index.html；
    port：可以設(shè)置端口號(hào)，不設(shè)置時(shí)候默認(rèn)為 8080
    inline ： 設(shè)置為true的時(shí)候回自動(dòng)刷新(有的版本需要配合hot : true使用)
    
  webpack-dev-server
  訪問(wèn): http://localhost:8080
  
 問(wèn)題：頁(yè)面沒(méi)有熱加載，自動(dòng)刷新，因?yàn)閕ndex的src引入的硬盤(pán)中的build文件而不是webpack-dev-server服務(wù)器內(nèi)存中的build
特點(diǎn):
  自動(dòng)編譯并刷新界面
  不生成編譯后的文件, 直接在內(nèi)存中編譯處理, 并啟動(dòng)服務(wù)器運(yùn)行項(xiàng)目

加載圖片

安裝依賴的loader

npm install url-loader file-loader --save-dev
url-loader比f(wàn)ile-loader功能更加完善是對(duì)file-loader的上層封裝,但二者需配合使用

添加config中l(wèi)oader的配置

{ test: /.(png|jpg)$/, loader: "url-loader?limit=8192" }  //如果圖片小于limit就會(huì)進(jìn)行Base64編碼

拷入2張圖片:

小圖: img/logo.png

大圖: img/big.jpg

定義引用圖片的樣式: test.css

#box1{
  background-image: url(../img/logo.jpg);
  height: 200px;
  width: 200px;
}
#box2{
  background-image: url(../img/big.jpg);
  height: 200px;
  width: 200px;
}

在頁(yè)面引用樣式或圖片: index.html

編譯并瀏覽

webpack-dev-server

圖片打包問(wèn)題

1、圖片大于8kb的時(shí)候無(wú)法打包到j(luò)s文件中，
2、index.html引入js的時(shí)候發(fā)現(xiàn)沒(méi)有打包進(jìn)去的圖片路徑不對(duì)
3、解決方法： 
    * //publicPath : "./js/",//webpack的絕對(duì)路徑,設(shè)置服務(wù)index.html資源的路徑

配置npm script命令

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
}
 
npm start: 編譯運(yùn)行項(xiàng)目
npm build: 編譯打包

GPU云服務(wù)器云服務(wù)器 webpack入門(mén) 前端快速入門(mén) 云計(jì)算快速入門(mén) css快速入門(mén)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84204.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

laznrbfe

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow實(shí)戰(zhàn)

閱讀 1452·2023-04-25 19:00
大白話講解Mybatis的plugin（Interceptor）的使用

閱讀 4149·2021-11-17 17:00
年薪50w+的軟件測(cè)試工程師是怎么煉成的？

閱讀 1763·2021-11-11 16:55
每個(gè)男孩的機(jī)械夢(mèng)「GitHub 熱點(diǎn)速覽 v.21.41」

閱讀 1523·2021-10-14 09:43
寶塔面板優(yōu)惠券永久版：寶塔Linux面板僅2088元;寶塔windows面板僅2488元

閱讀 3118·2021-09-30 09:58
就因?yàn)镻ython自動(dòng)化，那個(gè)天天摸魚(yú)的同事，他居然升職了！

閱讀 855·2021-09-02 15:11
bootstrap中的表單

閱讀 2126·2019-08-30 12:56
CSS處理文本過(guò)長(zhǎng)或超出部分（解說(shuō)二）

閱讀 1404·2019-08-30 11:12

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Webpack快速入門(mén)

相關(guān)文章