Webapck 簡單配置

時間  2020-01-20
標籤 webapck 簡單 配置 简体版
原文   原文鏈接

核心概念

webpack是一個應用程序的靜態模塊打包工具，當webpack處理應用程序時，它會在內部構建一個依賴圖：css

任什麼時候候，一個文件依賴於另外一個文件，webpack 就把此視爲文件之間有 依賴關係。這使得 webpack 能夠接收非代碼資源(non-code asset)（例如 images 或 web fonts），而且能夠把它們做爲 依賴 提供給你的應用程序。html

此依賴圖會映射項目所需的每個模塊，並生成一個或多個bundle。node

特色webpack

  • 代碼轉換: TypeScript 編譯成 JavaScript、SCSS,LESS 編譯成 CSS.
  • 文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片。
  • 代碼分割：提取多個頁面的公共代碼、提取首屏不須要執行部分的代碼讓其異步加載。
  • 模塊合併：在採用模塊化的項目裏會有不少個模塊和文件，須要構建功能把模塊分類合併成一個文件。
  • 自動刷新：監聽本地源代碼的變化，自動從新構建、刷新瀏覽器。
  • 自動化流程

入口(entry)

入口起點指示 webpack 應該使用哪一個模塊，來做爲構建其內部 依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。web

默認值是 ./src/index.js，能夠經過在 webpack configuration 中配置 entry 屬性，來指定一個（或多個）不一樣的入口起點。例如：正則表達式

webpack.config.jsnpm

module.exports = {
  entry: './path/to/my/entry/file.js'
}
複製代碼

輸出(output)

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundle，以及如何命名這些文件。json

主要輸出文件的默認值是 ./dist/main.js，其餘生成文件默認放置在 ./dist 文件夾中。能夠經過在配置中指定一個 output 字段，來配置這些處理過程：數組

webpack.config.js瀏覽器

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};
複製代碼

在上面的示例中，經過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及想要 bundle 生成(emit)到哪裏。最上面導入的 path 模塊是一個 Node.js 核心模塊，用於操做文件路徑。

loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 讓 webpack 可以去處理其餘類型的文件，並將它們轉換爲有效 模塊，以供應用程序使用，以及被添加到依賴圖中。

注意，loader 可以 import 導入任何類型的模塊（例如 .css 文件），這是 webpack特有的功能 其餘打包程序或任務執行器的可能並不支持,官方團隊認爲這種語言擴展是頗有必要的， 由於這可使開發人員建立出更準確的依賴關係圖。

webpack 的配置中 loader 有兩個屬性：

  • test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
  • use 屬性，表示進行轉換時，應該使用哪一個 loader。

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
複製代碼

在 webpack 配置中定義 rules 時，要定義在 module.rules 而不是 rules 中。若是沒有按照正確方式去作，webpack 會給出警告。

請記住，使用正則表達式匹配文件時，不要爲它添加引號。也就是說，/\.txt$/ 與 '/\.txt$/'/ "/\.txt$/" 不同。前者指示 webpack 匹配任何以 .txt 結尾的文件，後者指示 webpack 匹配具備絕對路徑 '.txt' 的單個文件; 這可能不符合預期的想法。

插件(plugin)

loader 用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。包括：打包優化，資源管理，注入環境變量。

插件接口(plugin interface) 功能極其強大，能夠用來處理各類各樣的任務。

想要使用一個插件，只須要 require() 它，而後把它添加到 plugins 數組中。多數插件能夠經過選項(option)自定義。也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 操做符來建立它的一個實例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
複製代碼

在上面的示例中，html-webpack-plugin 爲應用程序生成 HTML 一個文件，並自動注入全部生成的 bundle。

模式(mode)

經過選擇 development, production 或 none 之中的一個，來設置 mode 參數，你能夠啓用 webpack 內置在相應環境下的優化。其默認值爲 production。

module.exports = {
  mode: 'production'
};
複製代碼

構建項目

一、新建

新建一個空文件夾，用於建立項目，使用 npm init 命令建立一個 package.json 文件。

輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，也可使用 npm init -y

這個命令來一次生成 package.json 文件。

以下圖：

二、安裝 webpack

安裝 webapck 時須要把 webpack-cli 也裝上是由於在 webpack4.x 版本後 webpack 模塊把一些功能分到了 webpack-cli 模塊，因此二者都須要安裝，安裝方法以下：

npm install webpack webpack-cli --global    //這是安裝全局webpack及webpack-cli模塊
複製代碼

三、新建文件目錄

在根目錄件夾中新建兩個文件夾，分別爲 src 文件夾和 dist 文件夾，接下來再建立三個文件:此時，項目結構以下

  • index.html --放在 dist 文件夾中；
  • hello.js --放在 src 文件夾中；
  • index.js --放在 src 文件夾中；

a、index.html 中寫下 html 代碼，它的做用是爲引入打包後的 js 文件：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Webpack Project</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
    <!--這是打包以後的js文件，咱們暫時命名爲bundle.js-->
  </body>
</html>

複製代碼

b、在 hello.js 中導出模塊：

// hello.js
module.exports = function() {
  let hello = document.createElement('div')
  hello.innerHTML = 'Hello world!'
  return hello
}

複製代碼

c、在 index.js 中引入這個模塊（hello.js）:

//index.js
const hello = require('./hello.js')
document.querySelector('#root').appendChild(hello())

複製代碼

打開 index.html 就能夠看到咱們的頁面了

四、配置 webpack.config.js

能夠在當前項目的根目錄下新建一個配置文件 webpack.config.js 用來配置打包方式。 webpack.config.js 配置以下

const path = require('path') // 處理絕對路徑
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口文件
  output: {
    path: path.join(__dirname, '/dist'), //打包後的文件存放的地方
    filename: 'bundle.js' //打包後輸出文件的文件名
  }
}

複製代碼

有了這個配置文件，只需在終端中運行 webpack 命令就可進行打包，這條命令會自動引用 webpack.config.js 文件中的配置選項。

五、構建本地服務器

a、webpack-dev-server 配置本地服務器

Webpack 提供了一個可選的本地開發服務器，這個本地服務器基於 node.js 構建，它是一個單獨的組件，在 webpack 中進行配置以前須要單獨安裝它做爲項目依賴：

npm i webpack-dev-server -D
複製代碼

devServer 的一些配置選項:

  • contentBase ：設置服務器所讀取文件的目錄，當前咱們設置爲"./dist"
  • port ：設置端口號，若是省略，默認爲 8080
  • inline ：設置爲 true，當源文件改變時會自動刷新頁面
  • historyApiFallback ：設置爲 true，全部的跳轉將指向 index.html
// webpack.config.js
const path = require('path')
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口文件
  output: {
    path: path.join(__dirname, '/dist'), //打包後的文件存放的地方
    filename: 'bundle.js' //打包後輸出文件的文件名
  },
  devServer: {
    contentBase: './dist', // 本地服務器所加載文件的目錄
    port: '8088', // 設置端口號爲8088
    inline: true, // 文件修改後實時刷新
    historyApiFallback: true 
  }
}

複製代碼

b、package.json 文件中添加啓動和打包命令

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
複製代碼

這樣就能夠用如下命令進行本地運行或者打包文件：

  • npm run dev 啓動本地服務器，webpack-dev-server 就是啓動服務器的命令，--open 是用於啓動完服務器後自動打開瀏覽器。
  • npm run build 執行打包命令

此時，只要輸入 npm run dev 就能夠在http://localhost:8088/ 中查看頁面。

六、配置經常使用 loader

loader 可讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。

a、配置 css-loader 和 sass-loader

要加載一個 css 文件，須要安裝配置 style-loader 和 css-loader。

  • css-loader：加載.css 文件
  • style-loader：使用 style 標籤將 css-loader 內部樣式注入到咱們的 HTML 頁面
const path = require('path')
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口文件
  output: {
    path: path.join(__dirname, '/dist'), //打包後的文件存放的地方
    filename: 'bundle.js' //打包後輸出文件的文件名
  },
  devServer: {
    contentBase: './dist', // 本地服務器所加載文件的目錄
    port: '8088', // 設置端口號爲8088
    inline: true, // 文件修改後實時刷新
    historyApiFallback: true //不跳轉
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 正則匹配以.css結尾的文件
        use: ['style-loader', 'css-loader']
      {
        test: /\.(scss|sass)$/, // 正則匹配以.scss和.sass結尾的文件
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

複製代碼

b、配置 Babel-loader

Babel 實際上是一個編譯 JavaScript 的平臺，它能夠編譯代碼達到如下目的：

  • 能使用最新的 JavaScript 代碼（ES6，ES7...）
  • 能使用基於 JavaScript 進行了拓展的語言，好比 React 的 JSX；
module: {
  ...
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src')]
    }
  ]
}
複製代碼

c、理圖片

處理圖片資源時，咱們經常使用的兩種 loader 是 file-loader 或者 url-loader。 當使用 url-loader 加載圖片，圖片小於上限值，則將圖片轉 base64 字符串，不然使用 file-loader 加載圖片。

module: {
  ...
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    }
  ]
}

複製代碼

七、配置經常使用插件

a、自動生成 html 文件(HtmlWebpackPlugin)

一、安裝插件：

npm i html-webpack-plugin -D
複製代碼

二、把 dist 文件夾清空

三、在根目錄新建 index.html,內容和原來的 html 一致，只是不引入 js 文件。

四、webpack.config.js 中引入 HtmlWebpackPlugin 插件

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  })
]

複製代碼

b、增長 css 前綴

寫 css 時，一些屬性須要手動加上前綴，在 webpack 中能夠自動加上：

一、安裝

npm i postcss-loader autoprefixer -D
複製代碼

二、在項目根目錄下新建 postcss.config.js 文件

在項目根目錄下新建 postcss.config.js 文件

module.exports = {
  plugins: [
    require('autoprefixer') // 引用autoprefixer模塊
  ]
}
module.exports = {
   ...
  module: {
    rules: [
      {
        test: /\.css$/, // 正則匹配以.css結尾的文件
        use: [
          { loader: 'style-loader' }, // 這裏採用的是對象配置loader的寫法
          { loader: 'css-loader' },
          { loader: 'postcss-loader' } // 使用postcss-loader
        ]
      }
       ...
    ]
  }
   ...
}

複製代碼

c、css分離

將CSS提取爲獨立的文件的插件，對每一個包含css的js文件都會建立一個CSS文件，支持按需加載css和sourceMap

安裝

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

使用：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // 相似 webpackOptions.output裏面的配置 能夠忽略
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 這裏能夠指定一個 publicPath
              // 默認使用 webpackOptions.output中的publicPath
              publicPath: '../'
            },
          },
          'css-loader',
        ],
      }
    ]
  }
}
複製代碼

參考文章

一、www.webpackjs.com/concepts/ 【官方文檔】

二、 juejin.im/post/5db0fd… 【掘金】

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