webpack包教不包會系列（2）

時間  2019-11-16
標籤 webpack 包教 系列 简体版
原文   原文鏈接

注：在github上看到一篇比較好的webpack入門教程，本人也是爲了加深印象以此記錄。奉上原文地址：https://github.com/kingvid-ch。css

目標

創建一個lesson1項目，在項目中建立html, css, js， 圖片等靜態文件，編寫webpack配置文件，而後生成以下頁面。html

clipboard.png

要求
  1. 使用require引入jQuery， 切頁面中藥使用jQuery操做DOM.
  2. 輸入npm run build能正確打包靜態文件，本地打開index.html頁面樣式正常無錯誤。
挑戰

將原頁面中的"hello world"修改爲"你好世界"，css文件打包命名位stylesheet.css，本地打開index.html時，頁面能正確顯示且樣式無錯誤。jquery

知識點
  1. webpack配置文件。學習config文件部分經常使用參數含義以及做用。
  2. webpack loader。使用loader來解析各類靜態資源文件。
  3. webpack plugin。使用插件來協助解析和生成資源。
課程內容

新建lesson01文件夾，進入文件夾使用npm安裝webpack到本地webpack

mkdir lesson01 && cd lesson01
npm init -y
npm install webpack --save-dev

新建src文件夾，在裏面編寫項目靜態文件git

mkdir src && cd src
touch index.html style.css main.js
npm install jquery --save
mkidr img

複製如下內容到index.htmlgithub

<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>webpack-lesson1</title>
 </head> 
 <body> 
  <img src="./img/1.jpg" alt="放棄個人臉" /> 
  <h1>hello world!!!</h1> 
 </body>
</html>

複製如下內容到style.cssweb

body {
  text-align: center;
  font-size: 16px;
}

img {
  width: 500px;
  height: auto;
}

複製如下內容到main.jsnpm

$("body").append('<h2>This is created by jquery!</h2>');

在img文件夾中放入如下圖片：數組

clipboard.png

編寫配置文件

新建一個webpack.config.js和webpack.entry.js入口文件：瀏覽器

touch webpack.config.js webpack.entry.js

複製如下代碼到webpack.config.js:

//webpack配置文件符合commonJs模塊規範
var path = require('path'); //這裏引入path是爲了解析相對路徑，配置文件某些路徑要求是絕對路徑
module.exports = {
  // 入口文件，webpack據此對項目進行打包
  // 類型： String字符串 | Array數組 | Object對象
  // lesson1很簡單，只使用一個入口
  entry: './webpack.entry.js',
  // webpack的入口文件，後面會建立
  // 定義webpack打包時的輸出文件名及路徑
  output: {
    // 定義webpack打包以後的文件名
    filename: 'webpack.bundle.js',

    // 定義打包文件的存儲路徑：當前目錄的build文件夾
    path: path.resolve(__dirname, './build'),

    // 聲明資源（js、css、圖片等）的引用路徑
    // webpack打包時會把html頁面上的相對路徑根據publicPath解析成絕對路徑
    // eg：當publicPath爲'https://jd.com/'時，若是有html或者css含有一張圖片相對路徑爲'./img/test.jpg',打包以後html（或css）中圖片的路徑就會變成'https://jd.com/img/test.jpg'
    publicPath: ''
  },

  // 用於解析entry選項的基礎目錄(必須是絕對路徑)，該目錄必須包含入口文件
  // 默認: process.cwd()
  context: __dirname
};

再複製如下代碼到webpack.entry.js:

// 入口文件在瀏覽器端的表現相似於html代碼中的 < script >
// 在這裏輸入 console.log('Hello world!')，能在瀏覽器控制檯看到打印結果
require('./src/index.html');
require('./src/style.css');
require('./src/main.js');

總體的目錄結構以下：

clipboard.png

以上配置webpack打包的入口文件和輸出路徑，以及在入口文件中引入了靜態資源，如今運行npm run build：

clipboard.png

clipboard.png

能夠看到html和css文件打包失敗，提示解析html和js文件須要對應的loader。

配置loader

咱們須要在webpack.config.js配置相應的loader來解析html和css類型的文件。html-loader能夠用來解析html文件並以字符串形式傳給webpack，此外還能夠按需對文件進行壓縮。

npm install html-loader --save-dev

css-loader可以解析css文件，並把解析後的css以字符串形式傳給style-loader,在style-loader在html中經過建立<style>標籤引入css。

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

file-loader能夠用來解析靜態圖片的引用，url-loader是對file-loader的進一步封裝，它能夠把較小的圖片轉化成base64,它的使用也依賴於file-loader。

npm install file-loader url-loader --save-dev

安裝完後，從新配置webpack.config.js文件，copy如下代碼到webpakc.config.js

//webpack配置文件符合commonJs模塊規範
var path = require('path'); //這裏引入path是爲了解析相對路徑，配置文件某些路徑要求是絕對路徑
module.exports = {
  // 入口文件，webpack據此對項目進行打包
  // 類型： String字符串 | Array數組 | Object對象
  // lesson1很簡單，只使用一個入口
  entry: './webpack.entry.js',
  // webpack的入口文件，後面會建立
  // 定義webpack打包時的輸出文件名及路徑
  output: {
    // 定義webpack打包以後的文件名
    filename: 'webpack.bundle.js',

    // 定義打包文件的存儲路徑：當前目錄的build文件夾
    path: path.resolve(__dirname, './build'),

    // 聲明資源（js、css、圖片等）的引用路徑
    // webpack打包時會把html頁面上的相對路徑根據publicPath解析成絕對路徑
    // eg：當publicPath爲'https://jd.com/'時，若是有html或者css含有一張圖片相對路徑爲'./img/test.jpg',打包以後html（或css）中圖片的路徑就會變成'https://jd.com/img/test.jpg'
    publicPath: ''
  },

  // 用於解析entry選項的基礎目錄(必須是絕對路徑)，該目錄必須包含入口文件
  // 默認: process.cwd()
  context: __dirname,

  // 定義項目裏各類類型模塊的處理方式
  module: {
    rules: [{
      test: /\.css$/,
      // 處理.css文件
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(jpg|png)$/,
      // 處理.png和.jpg格式的圖片文件
      use: ['url-loader?limit=10000&name=img/[name].[ext]'
      // limit參數指圖片大小（10kb），當小於這個值時圖片轉爲base64，當把值修改成60000時，1.jpg（50kb）會被解析成base64，打包後查看index.html代碼能夠看到
      // name參數指圖片文件的命名格式，前面能夠加 img/ 表示圖片存儲路徑
      ]
    },
    {
      test: /\.html$/,
      // 處理.html文件
      use: ['html-loader']
    }]
  }
};

運行npm run build，顯示打包成功。

clipboard.png

clipboard.png

如上build文件夾中就是打包後生成的目錄，可見全部的文件都打包到了webpack.bundle.js文件中了。

配置plugins

爲了解決上面所有打包到了webpack.bundle.js的問題，咱們可使用html-webpack-plugin和extract-text-webpack-plugin來將html和css代碼片斷從webpack.bundle.js中抽取出來，並生成相應的html或css文件，extract-text-webpack-plugin會自動在生成的html文件中插入<link>標籤引入css。

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

複製如下代碼到webpack.config.js:

//webpack配置文件符合commonJs模塊規範
var path = require('path'),
//這裏引入path是爲了解析相對路徑，配置文件某些路徑要求是絕對路徑
HtmlWebpackPlugin = require('html-webpack-plugin'),
//簡化生成適合webpack打包的html
ExtractTextPlugin = require("extract-text-webpack-plugin"); //抽取css字符串並生成css文件
module.exports = {
  // 入口文件，webpack據此對項目進行打包
  // 類型： String字符串 | Array數組 | Object對象
  // lesson1很簡單，只使用一個入口
  entry: './webpack.entry.js',
  // webpack的入口文件，後面會建立
  // 定義webpack打包時的輸出文件名及路徑
  output: {
    // 定義webpack打包以後的文件名
    filename: 'webpack.bundle.js',

    // 定義打包文件的存儲路徑：當前目錄的build文件夾
    path: path.resolve(__dirname, './build'),

    // 聲明資源（js、css、圖片等）的引用路徑
    // webpack打包時會把html頁面上的相對路徑根據publicPath解析成絕對路徑
    // eg：當publicPath爲'https://jd.com/'時，若是有html或者css含有一張圖片相對路徑爲'./img/test.jpg',打包以後html（或css）中圖片的路徑就會變成'https://jd.com/img/test.jpg'
    publicPath: ''
  },

  // 用於解析entry選項的基礎目錄(必須是絕對路徑)，該目錄必須包含入口文件
  // 默認: process.cwd()
  context: __dirname,

  // 定義項目裏各類類型模塊的處理方式
  module: {
    rules: [{
      test: /\.css$/,
      // 處理.css文件
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.(jpg|png)$/,
      // 處理.png和.jpg格式的圖片文件
      use: ['url-loader?limit=10000&name=img/[name].[ext]'
      // limit參數指圖片大小（10kb），當小於這個值時圖片轉爲base64，當把值修改成60000時，1.jpg（50kb）會被解析成base64，打包後查看index.html代碼能夠看到
      // name參數指圖片文件的命名格式，前面能夠加 img/ 表示圖片存儲路徑
      ]
    },
    {
      test: /\.html$/,
      // 處理.html文件
      use: ['html-loader']
    }]
  },

  // webpack插件
  plugins: [
    // 生成html文件
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),

    // 生成css文件，一下括號中的'style.css' 是打包後的css文件名，可自定義
    new ExtractTextPlugin("style.css")
  ]
};

因爲已經使用html-webpack-plugin以index.html爲模板生成html文件，webpack打包時會引入index.html，因此在webpack.entry.js就沒有必要再次require('index.html')。修改後的webpack.entry.js以下：

// 入口文件在瀏覽器端的表現相似於html代碼中的 < script >
// 在這裏輸入 console.log('Hello world!')，能在瀏覽器控制檯看到打印結果
// require('./src/index.html');
require('./src/style.css');
require('./src/main.js');

運行npm run build顯示打包成功：

clipboard.png

補充知識

一、entry屬性：根據你的項目狀況，若是是SPA（single page app 單頁面應用），使用字符串即一個入口便可；若是是MPA（multiple page app），建議使用Object類型，每個屬性都是一個入口，入口名稱是屬性的名稱，入口文件是屬性的值二、extract-text-webpack-plugin能夠自定義css文件名，也能夠拆分紅幾個css文件，詳情可看官方文檔。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程