Webpack快速入門

laznrbfe 發布于2019-08-20 18:13 / 2220人閱讀

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

了解Webpack相關

什么是webpack

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

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

它將根據模塊的依賴關系進行靜態分析，生成對應的靜態資源

理解Loader

Webpack 本身只能加載JS模塊，如果要加載其他類型的文件(模塊)，就需要使用對應的loader 進行轉換/加載

Loader 本身也是運行在 node.js 環境中的 JavaScript 模塊

它本身是一個函數，接受源文件作為參數，返回轉換的結果

loader 一般以 xxx-loader 的方式命名，xxx 代表了這個 loader 要做的轉換功能，比如 json-loader。

配置文件(默認)

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

插件

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

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

Webpack 本身內置了一些常用的插件，還可以通過 npm 安裝第三方插件

學習文檔 :

webpack官方入門: http://webpack.github.io/docs...

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

你將學到:

How to install webpack

How to use webpack

How to use loaders

How to use the development server

How to use image

初始化項目: package.json

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

安裝webpack

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

開始編譯

創建入口src/js/ : entry.js

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

創建主頁面 build/: index.html

編譯js

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

查看頁面效果

第二個js

創建第二個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

查看頁面效果

第一個加載器(loader)

安裝樣式的loader

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

創建樣式文件: 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, 并查看頁面效果

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

查看頁面效果

使用webpack配置文件

創建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   //編譯顯示進度

問題---每次修改模塊文件內容的重新手動打包，刷新

自動編譯

webpack --watch  //編譯并啟動監視(但需要刷新瀏覽器)

瀏覽器自動刷新(熱加載)----解決手動刷新瀏覽器問題

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

加載圖片

安裝依賴的loader

npm install url-loader file-loader --save-dev
url-loader比file-loader功能更加完善是對file-loader的上層封裝,但二者需配合使用

添加config中loader的配置

{ test: /.(png|jpg)$/, loader: "url-loader?limit=8192" }  //如果圖片小于limit就會進行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;
}

在頁面引用樣式或圖片: index.html

編譯并瀏覽

webpack-dev-server

圖片打包問題

1、圖片大于8kb的時候無法打包到js文件中，
2、index.html引入js的時候發現沒有打包進去的圖片路徑不對
3、解決方法： 
    * //publicPath : "./js/",//webpack的絕對路徑,設置服務index.html資源的路徑

配置npm script命令

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
}
 
npm start: 編譯運行項目
npm build: 編譯打包

GPU云服務器云服務器 webpack入門前端快速入門云計算快速入門 css快速入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84204.html

Webpack快速入門

摘要：了解相關什么是是一個模塊打包器。配置文件默認是一個模塊，返回一個格式的配置信息對象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項中指定。了解Webpack相關什么是webpack Webpack是一個模塊打包器(bundler)。在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會作為模塊處理它將根據模塊的依...

curried 2019-08-29 12:58 評論0 收藏0
Webpack快速入門

摘要：了解相關什么是是一個模塊打包器。配置文件默認是一個模塊，返回一個格式的配置信息對象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項中指定。了解Webpack相關什么是webpack Webpack是一個模塊打包器(bundler)。在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會作為模塊處理它將根據模塊的依...

LMou 2019-08-01 17:12 評論0 收藏0
Webpack系列—快速入門

摘要：如使用插件為我們自動生成一個文件。安裝使用生產和開發構建分離生產和開發中的構建肯定是不同，生產中側重于一個更好的開發體驗，而生產環境中則需要更多的性能優化，更小的。可以指定命令運行以來的配置文件，通過在中寫入是一種不錯的方式。原文地址：https://github.com/huruji/blog/issues/3 入口單文件入口指定entry鍵值 const config = { ...

TIGERB 2019-08-20 19:08 評論0 收藏0
vue-cli “從入門到放棄”

摘要：主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代，和作為前端框架已經呈現出了三國鼎立的局面。主要作用：目錄結構、本地調試、代碼部署、熱加載、單元測試在如今前端技術飛速發展的時代，angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

DrizzleX 2019-08-01 17:19 評論0 收藏0
vue-cli “從入門到放棄”

摘要：主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代，和作為前端框架已經呈現出了三國鼎立的局面。主要作用：目錄結構、本地調試、代碼部署、熱加載、單元測試在如今前端技術飛速發展的時代，angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

william 2019-08-20 18:28 評論0 收藏0