webpack基礎——常用配置解析

系列:
webpack入門——了解及使用
webpack進階——緩存與獨立打包

文件目錄:

-- /node_modules:依賴的各種模塊
-- /src
– index.js
– print.js
– style.css
– package.json:配置npm相關設置
– webpack.config.js:配置webpack
package.json腳本(輸入npm run xxx,xxx為腳本中對應命令,將會在命令行中執行相應操作):

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",   // webpack打包
  "watch": "webpack --watch",  // webpack監聽模式
  "start": "webpack-dev-server --open" // 自動刷新
}

webpack.config.js:
(這是一個我們已經配置好的webpack配置js,本文中的講解都將基于該文件,會在本文件上多多少少做一些改變以供測試。)

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
 
module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      minChunks: Infinity,
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ]

HtmlWebpackPlugin

由webpack.config.js可知,webpack打包后生成的是若干個js文件,但是最終這些js文件都是應用在html中的。
假如打包后的文件只有app.js,那么完全可以手動創建一個html,并加入<script type="text/javascript" src="app.js">,html就可以應用該打包后的文件。
但是如果我們打包的文件不止一個,或者打包后的文件包含hash值,那么每次我們都需要添加script或者說每次都需要更改文件的hash值嗎?當然可以,但是這樣很麻煩,開發效率很低。
所以我們就引入了HtmlWebpackPlugin插件,這樣就可以自動生成html模版并且自動添加script。

plugins: [
  new webpack.HashedModuleIdsPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: "common",
    minChunks: Infinity,
  }),
  new webpack.HotModuleReplacementPlugin(), 
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({        // 已添加該插件
    title: 'Output Management'
  })
]

現在我們進行wepack打包:
生成目錄:
-- /dist
– app.js
– common.js
– print.js
– index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Output Management</title>
  </head>
  <body>
  <script type="text/javascript" src="common.js"></script><script type="text/javascript" src="app.js"></script><script type="text/javascript" src="print.js"></script></body>
</html>

更多配置:HTML Webpack Plugin

CleanWebpackPlugin

該插件的主要作用是清除前次打包文件。
沒有hash時,這個插件體現不出來效果,我我們在以上的webpack配置中做點小的變動:

// 給輸出文件名上加上hash
  output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  }
  
// 注釋掉CleanWebpackPlugin
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      minChunks: Infinity,
    }),
    new webpack.HotModuleReplacementPlugin(),
    // new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ]

然后再次打包,可以看見dist文件夾中:


現在我們只需要hash后的文件給html使用,但是這里卻任然保留著很多上一次打包留下來的東西。
這個時候我們把CleanWebpackPlugin取注釋,然后再次打包。

可以看見上次文件夾里的垃圾都沒有了,只留下了現在需要的文件。
故CleanWebpackPlugin的效果是在打包前,刪除指定的曾經打包的文件夾,然再新建并把最新打包好的內容放在dist文件夾里。
參數為文件夾字符串數組,更多配置:Clean Webpack Plugin

webpack-dev-server

webpack有一個功能叫做監聽,使用方法:命令行中輸入 webpack --watch。
這樣啟動webpack之后,每當我們在源文件中發生了改變,都會進行重新打包,這樣提高了生產效率,雖然重新打包了,但是我們必須刷新頁面才能看見更變。
這樣是不友好的,如果能夠自己刷新頁面那就極好了,這也就是webpack-dev-server的作用,啟動一個小型server達到實時刷新的效果。
使用方法:


sudo npm install webpack-dev-server --save-dev
## 然后啟動的時候,就
webpack-dev-server --open
## 運行參數可以用以下查看
webpack-dev-server -help
## 常用的有 編譯刷新的時候出現顏色和進程條
webpack-dev-server --progress --colors

我們將該腳本寫入了package.json中,可以快捷啟動 npm run start。

Hot Module Replace

熱替換常常和webpack-dev-server同時使用,所謂熱替換(HMR: Hot Module Replace)描述的是運行中的一個系統,我要更換其中部分內容,而仍然要保持不替換的內容繼續工作,并在替換后,替換部分能夠立即生效。
可能到這里大家還不是很明白熱替換的具體作用,簡單來說就是部分刷新。
假如我們僅僅只使用webpack-dev-server,然后在index.js 引入了 style.css。 那么我們修改一下style.css的樣式,webpack-dev-server會監聽到源文件發生了變化,然后重新進行webpack打包,然后再刷新頁面,可能到這里已經滿足了很多人的需求。但是我現在有了一個新的需求,我頁面上有一個input,我在input中輸入了一系列文字,現在我希望,我更改了樣式,input中的文字仍然保持不變,只有修改的樣式發生改變。我們知道webpack-dev-server在源文件發生改變后,會刷新整個頁面,一旦刷新的整個頁面,那么input中的文字必當消失。 這個時候就是體現熱替換強大功能的時候了,使用了熱替換,就可以僅僅只更改樣式而保持input中的值不發生改變。


使用方法:

  • 在命令行中直接使用:
webpack-dev-server --hot
  • 將啟動配置寫入webpack.config.js中,首先在插件數組中添加該插件:
plugins: [
  new webpack.HashedModuleIdsPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: "common",
    minChunks: Infinity,
  }),
  new webpack.HotModuleReplacementPlugin(),  // 在實例webpack.config.js中已添加
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({
    title: 'Output Management'
  })
]

這之后我們將進行webpack-dev-server的配置,

devServer: {
  hot: true,  // hot為true則代表啟動了熱替換服務
  contentBase: path.resolve(__dirname, 'dist'),
  publicPath: '/'
},

進行配置之后,我們直接啟動npm run start腳本既可(webpack-dev-server --open)。
由本例我們知道了devServer是關于webpack-dev-server的配置,我們來看看常用參數:

  • port:8080(Number,訪問端口),從localhost:8080訪問服務器
  • hot:是否開啟熱替換模式
  • contentBase:簡單來說就是提供靜態資源文件的目錄,如果我們沒有使用HtmlWebpackPlugin的,而是手動的添加了index.html,那么這個時候index.html在哪個目錄下,contentBase就需要寫哪個目錄。這里一定要寫絕對路徑。因為這個路徑是基于本機的,如果寫相對路徑則是相對于本機的根路徑的。
  • publicPath:開發模式中,打包的文件在該目錄下,而不是在output中制定的文件夾下。并且路徑是相對于當前目錄的,以'/'開頭。例如:publicPath: '/public/',則應該通localhost:8080/public/來訪問打包的文件,例如我要訪問common.js,那么就是localhost:8080/public/common.js。使用該路徑時,通常都不會自己手寫index.html,這樣會造成訪問混亂,直接使用HtmlWebpackPlugin生成HTML。
    更多配置:Webpack Dev Server

source map

首先我們先在本例的webpack配置上做出一些修改:
// devtool: 'inline-source-map' // 注釋掉source-map
之后我們運行npm run start,這個時候我們的項目應該正常進入了開發模式中。進入print.js文件:

import _ from 'lodash';
 
export default function printMe() {
  console.log(_.join(['qq', 'bb'], ' '));
}

這個時候我們把console改成consol然后保存,在頁面上觸發這個printMe函數,發現控制臺上:


我們知道錯誤明明出現在print.js中,但是由于是app.js引用了print.js,所以報錯還是在app.js上,這樣以后我們出現了錯誤很難定位出錯的位置,導致難以調試,現在我們吧
// devtool: 'inline-source-map'解注,然后重新執行npm run start。再次觸發printMe這個函數:


然后我們可以看見,清楚的定位了出錯的是在print.js第四行,這就是source map的作用,用于錯誤定位。但是在生產環境中,我們一般都是經過調試好的文件,所以在生產環境中不需要這個source map。
相關信息查看:開發輔助調試工具(Devtool)

參考資料:
開發中 Server
Webpack dev server
webpack-dev-server 使用總結
Webpack使用教程三(webpack-dev-server)

本文將持續更新。。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • GitChat技術雜談 前言 本文較長,為了節省你的閱讀時間,在文前列寫作思路如下: 什么是 webpack,它要...
    蕭玄辭閱讀 12,721評論 7 110
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看,也希望更多的人看到...
    小小字符閱讀 8,243評論 7 35
  • 在現在的前端開發中,前后端分離、模塊化開發、版本控制、文件合并與壓縮、mock數據等等一些原本后端的思想開始...
    Charlot閱讀 5,505評論 1 32
  • 最近在學習 Webpack,網上大多數入門教程都是基于 Webpack 1.x 版本的,我學習 Webpack 的...
    My_Oh_My閱讀 8,215評論 40 247
  • “人和鬼就差口氣 人就是鬼,鬼就是人?!币蛔钫显?,用高墻圍住生命的氣息,以為那就是人生該有的歸宿。它鎖住了青春...
    甜美系美少女閱讀 5,126評論 1 7