webpack搭建基本的前端開發環境（二）

搭建基本的前端開發環境

咱們平常使用的前端開發環境應該是怎樣的？咱們能夠嘗試着把基本前端開發環境的需求列一下：

• 構建咱們發佈須要的 HTML、CSS、JS 文件
• 使用 CSS 預處理器來編寫樣式
• 處理和壓縮圖片
• 使用 Babel 來支持 ES 新特性
• 本地提供靜態服務以方便開發調試

上述幾項應該能夠知足比較簡單的前端項目開發環境需求了，下面會一一介紹如何配置 webpack 來知足這些需求。

關聯 HTML

webpack 默認從做爲入口的 .js 文件進行構建（更可能是基於 SPA 去考慮），但一般一個前端項目都是從一個頁面（即 HTML）出發的，最簡單的方法是，建立一個 HTML 文件，使用 script 標籤直接引用構建好的 JS 文件，如：

<script src="./dist/bundle.js"></script>
複製代碼

可是，若是咱們的文件名或者路徑會變化，例如使用 [hash] 來進行命名，那麼最好是將 HTML 引用路徑和咱們的構建結果關聯起來，這個時候咱們能夠使用 html-webpack-plugin。

html-webpack-plugin 是一個獨立的 node package，因此在使用以前咱們須要先安裝它，把它安裝到項目的開發依賴中：

npm install html-webpack-plugin -D 

# 或者
yarn add html-webpack-plugin -D
複製代碼

而後在 webpack 配置中，將 html-webpack-plugin 添加到 plugins 列表中：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(),
  ],
}
複製代碼

這樣配置好以後，構建時 html-webpack-plugin 會爲咱們建立一個 HTML 文件，其中會引用構建出來的 JS 文件。實際項目中，默認建立的 HTML 文件並無什麼用，咱們須要本身來寫 HTML 文件，能夠經過 html-webpack-plugin 的配置，傳遞一個寫好的 HTML 模板：

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置輸出文件名和路徑
      template: 'assets/index.html', // 配置文件模板
    }),
  ],
}
複製代碼

這樣，經過 html-webpack-plugin 就能夠將咱們的頁面和構建 JS 關聯起來，迴歸平常，從頁面開始開發。若是須要添加多個頁面關聯，那麼實例化多個 html-webpack-plugin， 並將它們都放到 plugins 字段數組中就能夠了。

更多配置這裏就不展開講解了，參考文檔 html-webpack-plugin 以及官方提供的例子 html-webpack-plugin/examples。

構建 CSS

咱們編寫 CSS，而且但願使用 webpack 來進行構建，爲此，須要在配置中引入 loader 來解析和處理 CSS 文件

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.css/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  }
}
複製代碼

style-loader 和 css-loader 都是單獨的 node package，須要安裝。

咱們建立一個 index.css 文件，並在 index.js 中引用它，而後進行構建。

import "./index.css"
複製代碼

能夠發現，構建出來的文件並無 CSS，先來看一下新增兩個 loader 的做用：

• css-loader 負責解析 CSS 代碼，主要是爲了處理 CSS 中的依賴，例如 @import 和 url() 等引用外部文件的聲明；
• style-loader 會將 css-loader 解析的結果轉變成 JS 代碼，運行時動態插入 style 標籤來讓 CSS 代碼生效。

經由上述兩個 loader 的處理後，CSS 代碼會轉變爲 JS，和 index.js 一塊兒打包了。若是須要單獨把 CSS 文件分離出來，咱們須要使用 extract-text-webpack-plugin 插件。

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        // 由於這個插件須要干涉模塊轉換的內容，因此須要使用它對應的 loader
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader',
          use: 'css-loader',
        }), 
      },
    ],
  },
  plugins: [
    // 引入插件，配置文件名，這裏一樣能夠使用 [hash]
    new ExtractTextPlugin('index.css'),
  ],
}
複製代碼

CSS 預處理器

在上述使用 CSS 的基礎上，一般咱們會使用 Less/Sass 等 CSS 預處理器，webpack 能夠經過添加對應的 loader 來支持，以使用 Less 爲例，咱們能夠在官方文檔中找到對應的 loader。

咱們須要在上面的 webpack 配置中，添加一個配置來支持解析後綴爲 .less 的文件：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        // 由於這個插件須要干涉模塊轉換的內容，因此須要使用它對應的 loader
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader',
          use: [
            'css-loader', 
            'less-loader',
          ],
        }), 
      },
    ],
  },
  // ...
}
複製代碼

處理圖片文件

在前端項目的樣式中總會使用到圖片，雖然咱們已經提到 css-loader 會解析樣式中用 url() 引用的文件路徑，可是圖片對應的 jpg/png/gif 等文件格式，webpack 處理不了。是的，咱們只要添加一個處理圖片的 loader 配置就能夠了，現有的 file-loader 就是個不錯的選擇。

file-loader 能夠用於處理不少類型的文件，它的主要做用是直接輸出文件，把構建後的文件路徑返回。配置很簡單，在 rules中添加一個字段，增長圖片類型文件的解析配置

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
}
複製代碼

更多關於 file-loader 的配置能夠參考官方文檔 file-loader。

使用 Babel

Babel 是一個讓咱們可以使用 ES 新特性的 JS 編譯工具，咱們能夠在 webpack 中配置 Babel，以便使用 ES六、ES7 標準來編寫 JS 代碼。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.jsx?/, // 支持 js 和 jsx
        include: [
          path.resolve(__dirname, 'src'), // src 目錄下的才須要通過 babel-loader 處理
        ],
        loader: 'babel-loader',
      },
    ],
  },
}
複製代碼

Babel 的相關配置能夠在目錄下使用 .babelrc 文件來處理，詳細參考 Babel 官方文檔 .babelrc。

啓動靜態服務

至此，咱們完成了處理多種文件類型的 webpack 配置。咱們能夠使用 webpack-dev-server 在本地開啓一個簡單的靜態服務來進行開發。

在項目下安裝 webpack-dev-server，而後添加啓動命令到 package.json 中：

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development"
}
複製代碼

也能夠全局安裝 webpack-dev-server，但一般建議以項目開發依賴的方式進行安裝，而後在 npm package 中添加啓動腳本。

嘗試着運行 npm run start 或者 yarn start，而後就能夠訪問 http://localhost:8080/ 來查看你的頁面了。默認是訪問 index.html，若是是其餘頁面要注意訪問的 URL 是否正確。

小結

咱們如今已經能夠使用 webpack 來完成平常中須要的基礎前端構建需求：構建 HTML、CSS、JS 文件、使用 CSS 預處理器來編寫樣式、處理和壓縮圖片、使用 Babel、方便開發調試的靜態服務，接下來的小節會在這個基礎上，深刻 webpack 配置細節，結合實際工做中的一些須要，更進一步地瞭解 webpack 的使用。