從零開始--webpack 4 配置

一個菜鳥的奮鬥史發表於2019-04-08
Web

小白入門級別的webpack實踐，搭建一個基礎的webpack

專案地址：git@github.com:Oldpost/webpack-tes…
原文地址：blog.silviaxu.com/2019/04/08/…

安裝

全域性

npm install webpack –g
複製程式碼

本地

npm install webpack –save-dev
複製程式碼

測試

webpack -v
複製程式碼

準備工作

新建一個空專案並初始化,建立一個dist/index.html和index.js

mkdir webpack-test
cd webpack-test
npm init
複製程式碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack test</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>
複製程式碼

index.js

document.write('今天天氣很好')
複製程式碼

開始第一個webpack

命令列執行

webpack index.js bundle.js
複製程式碼

報錯

從零開始--webpack 4 配置
原因：版本太高，命令過時了。改成

webpack index.js -o bundle.js
複製程式碼

從零開始--webpack 4 配置

  • Hash:hash值
  • Version:webpack版本
  • time:這次打包所花費的時間
  • Asset:打包這次生成的檔案
  • Size:這次生成檔案的大小
  • Chunks:這次打包的分塊
  • chunk Names:這次打包的名稱

此時警告：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
複製程式碼

是因為webpack4引入了模式,有開發模式,生產模式,無這三個狀態。暫時可忽略。

此時打包完成，開啟dist資料夾下，可以看到打包好的bundle.js檔案

通過配置檔案打包以及開發

新建webpack.config.js檔案，並在package.json檔案裡配置scripts欄位

"build": "webpack --mode production"
複製程式碼

webpack.config.js需要配置其檔案的入口及出口

const path = require('path');
module.exports = {
  entry:"./src/index.js",
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      }
    ]
  },
  plugins:[]
}
複製程式碼

path 是一個 Node.js 核心模組，用於操作檔案路徑。entry:入口的檔案，即要處理的檔案(現在只做單個入口)、output：出口的檔案，可配置出口檔案路徑以及檔案相關資訊、module：即配置 loader,可以通過配置 loader 擴充套件其他語言，如scss、plugins：外掛

命令列執行：

npm run build
複製程式碼

此時打包完成，開啟dist資料夾下，可以看到打包好的bundle.js檔案

開發過程

在開發過程中為了避免改一點程式碼就執行一次命令，加入開發模式。 首先需要安裝webpack-dev-server

npm install --save-dev webpack-dev-server
複製程式碼

在package.json檔案裡配置scripts欄位

"start": "webpack-dev-server --mode development --open",
複製程式碼

--open：自動開啟視窗

// webpack.config.js需要配置 devServer
module.exports = {
  ...
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    hot: true, // 開啟實時重新整理
    port: 9000 // 埠，預設8080
  }
}
複製程式碼

錯誤追蹤

為了更容易地追蹤錯誤和警告，JavaScript 提供了 source map 功能，將編譯後的程式碼對映回原始原始碼。如果一個錯誤來自於 b.js，source map 就會明確的告訴你。在package.json檔案裡配置，

devtool: 'inline-source-map',
複製程式碼

更多

動態頁面

通常我們需要開發一個動態的html檔案，而不是直接在dist資料夾裡面放進去一個靜態檔案。這裡使用到 html-webpack-plugin 外掛

從零開始--webpack 4 配置

npm install --save-dev html-webpack-plugin
複製程式碼

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 動態生成html檔案
module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html'),
    })
  ],
}
複製程式碼

編譯檔案前清空dist

npm install --save-dev clean-webpack-plugin
複製程式碼

webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin'); // 動態生成html檔案
module.exports = {
  ...
  plugins: [
    new CleanWebpackPlugin(),
  ],
}
複製程式碼

雜湊值

可以在 output 裡配置輸出檔案的檔名。當檔案變化的時候載入新檔案 否則使用快取

module.exports = {
  ...
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[chunkhash].js'
  },
}
複製程式碼
  • hash：hash值是特定於整個構建過程的
  • chunkhash：hash值是特定於每一個檔案的內容的

圖片

file-loader

npm install url-loader file-loader html-withimg-loader --save-dev
複製程式碼
  • url-loader： 功能類似於 file-loader，但是在檔案大小(單位 byte)低於指定的限制(limit)時，可以返回一個 DataURL
  • file-loader：直接將圖片打包到生產目錄下
  • html-withimg-loader：處理html中直接使用src引用的img 使用相對路徑
// index.html
<img src="images/750x380.cc8da272.png" alt="" sizes="" srcset="">
複製程式碼

webpack.config.js配置

module.exports = {
  ...
  module:{
    rules:[
      ...
      {
        test: /\.(png|jpg)$/,
        use: [{
            loader: 'url-loader',
            // 將小於8K的圖片以base64的形式打包到js檔案中
            options: {
              limit: 8192, // 檔案大小
              name: '[name].[hash:8].[ext]', // 設定檔名
              // name(file) {
              //   if (process.env.NODE_ENV === 'development') {
              //     return '[path][name].[ext]';
              //   }
              //   return '[hash].[ext]';
              // },
              outputPath: 'images', // 新增一層檔案路徑
            }
          }],
      },
      {
        test: /\.html$/,
        loader: 'html-withimg-loader'
      }
    ]
  }
}
複製程式碼

name：當配置為 [path][name].[ext] 時，會將路徑也一併打包， ext：目標檔案/資源的副檔名。 path：相對於webpack/config 檔案的路徑 outputPath: 指定檔案路徑

css 分離打包

webpack4之前使用 extract-text-webpack-plugin，現在用 mini-css-extract-plugin 代替

npm install --save-dev mini-css-extract-plugin
複製程式碼

webpack.config.js配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // webpack分離css單獨打包
module.exports = {
  ...
  module:{
    modules:[
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
            }
          },
          // 在這裡帶呼叫 style-loader 會報錯
          "css-loader"
        ]
        // use: ['style-loader', 'css-loader'] // 先呼叫css-loader，解決不了在呼叫style-loader
      },
      ...
    ]
    plugins:[
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
    ]
  }
}
複製程式碼

相關文章