webpack安裝配置指令

進行重新加載編譯。實際就是將瀏覽器不認識的語法編譯成瀏覽器認識的語法。比如 less 編譯成 css，ES6 語法轉成 ES5 等等。

減少 io 請求，通常我們在請求後，會返回一個 html 到瀏覽器。這時，我們如果打開控制台，就會發現在 html 頁面通過 script,link 等標籤引用的靜態資源，瀏覽器會再次發出請求去獲取這些資源。但是 webpack 的打包，將所有的靜態資源都合併好了，減少了 io 請求。

# 安裝webpack
npm install --save-dev webpack

# 安裝webpack-cli依賴
npm install --save-dev webpack-cli

# 創建新項目
mkdir demo

# cd項目
cd demo

# 初始化
npm init -y

# 安裝開發版本cli
npm install webpack webpack-cli --save-dev

新建一個 html 文件和一個 js 文件，工程目錄如下

  demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js:

function component() {
  var element = document.createElement('div');

  // Lodash（目前通過一個 script 腳本引入）對於執行這一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html:

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

在 package.json 中：

刪除"main": "index.js", 添加"private": true

調整工程目錄：

  demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

要在index.js中打包lodash依賴，我們需要在本地安裝 library，終端輸入指令：

npm install --save lodash

然後調整index.js內容

// 添加一行代碼
import _ from 'lodash';

在dist/index.html中可以把引入的外部文件lodash刪去

刪去<script src="./src/index.js"></script>

添加<script src="main.js"></script>

執行終端：

npx webpack

即可在dist中打包生成需要的main.js文件

還可以手動配置文件，在根目錄下新建一個webpack.config.js文件

const path = require('path');

module.exports = {
  // 這裡放著需要打包的文件，如果多個文件，用數組形式寫
  entry: './src/index.js',
  output: {
    // 這裡是打包生成的文件名，還可以手動修改
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

考慮到用 CLI 這種方式來運行本地的 webpack 不是特別方便，我們可以設置一個快捷方式，

在package.json中的"scripts"新增

"build": "webpack"

這樣就可以使用npm run build指令代替之前的npx了

把之前dist文件夾裡面的js文件刪去，然後重新打包

npm run build

看一下工程目錄

demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

沒問題，成功打包，瀏覽器也正常顯示

在 js 文件中import了一個 css 文件，需要在配置中安裝並添加style-loaader和css-loader

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

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 添加的內容
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

然後在 js 模塊中：

import './style.css'

npm run build就可以自動解析打包啦

加載圖片

安裝file-loader

npm install --save-dev file-loader

webpack.config.js:

module: {
  rules: [
    {
      test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
      ]
      },{
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
      ]
    }
  ]
}

加載字體

webpack 加載字體資源

記載數據資源

此外，可加載的有用資源還有數據，json文件，CSV，TSV，XML等，實際上，json是內置的，可以直接import data from './data.json'引入

但是CSV，TSV，XML不可以，需要配置一下依賴

終端安裝：

npm install --save-dev csv-loader xml-loader

webpack.config.js:

{
  test: /\.(csv|tsv)$/,
  use: [
    'csv-loader'
  ]
},
{
  test: /\.xml$/,
  use: [
    'xml-loader'
  ]
}

在src目錄下添加一個 json 文件data.json

然後在index.js中引入：

import data from './data.json'