【webpack系列】webpack4.x入門配置基礎（一）

1、前言

webpack在不斷的迭代優化，目前已經到了4.29.6。在webpack4這個版本中，作了不少優化，引入了不少特性，將得到更多模塊類型，.mjs支持，更好的默認值，更爲簡潔的模式設置，更加智能的chunk，新增的splitChunks來自定義分隔代碼塊等等。升級待4，在打包速度，代碼體積，數量，以及運行效率上有一個飛躍。

 

2、安裝webpack4最基礎入門

2.1首先初始化npm 項目，npm init初始化，生成package.json

node版本建議8.2以上

npm init -y

npm i webpack webpack-cli webpack-dev-server -D

npm i -D是npm install --save-dev 的縮寫，是安裝模塊並保存到package.json的devDependencies中，主要是開發環境的依賴包。

 

2.2新建src/index.js 和 dist/index.html

 

 

2.3webpack4是零配置

在使用webpack進行打包的時候，默認狀況下會將src下的入口文件(index.js)進行打包。

能夠直接在終端中輸入命令webpack 將當前的內容進行一個簡單的打包。

這樣dist文件夾下面多了一個main.js文件。

可是有一個黃色警告，mode是webpack中獨有的，兩種打包環境，一個是開發環境：development，另一個是生產環境：production。

打包的時候，輸入webpack --mode=development或者webpack --mode=production就不會出現警告提示了。

下面是webapck --mode=production命令打包，這個是代碼壓縮過的，細心的朋友應該也發現打包後小了不少。

 

2.4新建config/webpack.config.js建立文件

在 webpack v4 中，能夠無須任何配置，然而大多數項目會須要很複雜的設置，這就是爲何 webpack 仍然要支持 配置文件。這比在 terminal(終端) 中手動輸入大量命令要高效的多，因此讓咱們建立一個配置文件：

進入到webpack.config.js文件中進行配置，具體在代碼中註釋（這裏簡單的一些，具體的下面會給你們）

const path = require("path"); module.exports = { mode: 'development', /*入口文件配置*/ entry: { main: './src/index.js' }, /*出口文件配置*/ output: { /*打包路徑*/ path: path.resolve(__dirname, '../dist'),
 /*打包文件名稱*/ filename: "main.js" }, /*模塊：例如解讀css，圖片轉換，壓縮*/ module: { }, /*插件，用於生產的各類功能*/ plugins: [ ], /*配置webpack開發服務的功能*/ devServer: { } }

如今不能執行以前的webpack --mode="development"命令了會報下面的錯誤。

這裏是由於webpack4打包默認找的src下面的index.js入口，咱們前面已經刪除了，如今這裏src下面是main.js文件，因此找不到就報ERROR in Entry module not found: Error: Can't resolve './src' ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\2019github\resume'錯誤。

因此這裏咱們到package.json裏面配置下命令，讓打包的時候執行咱們在config/webpack.dev.js下面配置的入口。

 

2.5package.json配置命令

執行npm run build

如今配置打包時候的入口文件以及出口文件，不少朋友看webpack.dev.js中的註釋。入口是./src/main.js

打開index.html

注意：

一、若是你使用的是 npm 5，你可能還會在目錄中看到一個 package-lock.json 文件。

 

以上就是最基礎的webpack4的搭建。

 

 

3、管理資源

在 webpack 出現以前，前端開發人員會使用 grunt 和 gulp 等工具來處理資源，並將它們從 /src 文件夾移動到 /dist 或 /build 目錄中。

像 webpack 這樣的工具，將動態打包全部依賴（建立所謂的 依賴圖(dependency graph)）。

webpack 最出色的功能之一就是，除了引入 JavaScript，還能夠經過 loader 引入任何其餘類型的文件。

3.1 加載css

在js模塊中，import 一個css文件，你須要安裝style-loader和css-loader，並在配置文件中添加這些loader。

npm i style-loader css-loader --save-dev

webpack.config.js中

const path = require("path"); module.exports = { mode: 'development', /*入口文件配置*/ entry: { main: './src/index.js' }, /*出口文件配置*/ output: { /*打包路徑*/ path: path.resolve(__dirname, '../dist'), /*打包文件名稱*/ filename: "main.js" }, /*模塊：例如加載css，圖片轉換，壓縮*/ module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, /*插件，用於生產的各類功能*/ plugins: [ ], /*配置webpack開發服務的功能*/ devServer: { } }

webpack 根據正則表達式，來肯定應該查找哪些文件，並將其提供給指定的 loader。在這個示例中，全部以 .css 結尾的文件，都將被提供給 style-loader 和 css-loader。

經過在項目中添加一個新的 style.css 文件，並將其 import 到咱們的 index.js中：

在src/index.js

import _ from 'lodash' import './css/index.css' function component() { let ele = document.createElement('div'); ele.innerHTML = _.join(['你好,2019,saucxs','webpack']); return ele } document.body.appendChild(component());

如今運行 build 命令：

查看後發現：

注意：在多數狀況下，你也能夠進行 CSS 提取，以便在生產環境中節省加載時間。最重要的是，現有的 loader 能夠支持任何你能夠想到的 CSS 風格 - postcss, sass 和 less 等。

 

3.2 加載image圖像

假想，如今咱們正在下載 CSS，可是像 background 和 icon 這樣的圖像，要如何處理呢？使用 file-loader，咱們能夠輕鬆地將這些內容混合到 CSS 中：

npm install file-loader --save-dev

webpack.config.js

const path = require("path"); module.exports = { mode: 'development', /*入口文件配置*/ entry: { main: './src/index.js' }, /*出口文件配置*/ output: { /*打包路徑*/ path: path.resolve(__dirname, '../dist'), /*打包文件名稱*/ filename: "main.js" }, /*模塊：例如加載css，圖片轉換，壓縮*/ module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|jpeg|gif|webp)$/, use: [ 'file-loader' ] } ] }, /*插件，用於生產的各類功能*/ plugins: [ ], /*配置webpack開發服務的功能*/ devServer: { } } 

在使用 css-loader 時，如前所示，會使用相似過程處理你的 CSS 中的 url('./my-image.png')。loader 會識別這是一個本地文件，並將 './my-image.png' 路徑，替換爲 output 目錄中圖像的最終路徑。而 html-loader 以相同的方式處理 <img src="./my-image.png" />。

咱們向項目添加一個圖像，而後看它是如何工做的，你可使用任何你喜歡的圖像：

src/index.js

import _ from 'lodash' import './css/index.css' import sau from './img/sau.jpg' function component() { let ele = document.createElement('div'); ele.innerHTML = _.join(['你好,2019,saucxs','webpack']); var image = new Image(); image.src = sau; ele.appendChild(image) return ele } document.body.appendChild(component()); 

src/css/index.css

body{
    color: pink;
    background: url('../img/sau.jpg'); } 

從新構建並再次打開 index.html 文件

果一切順利，你如今應該看到你的 sau.jpg圖標成爲了重複的背景圖，以及文本旁邊的 img 元素。若是檢查此元素，你將看到實際的文件名已更改成 e2c11146949c08b542c068aefc0c1d7b.jpg。這意味着 webpack 在 src 文件夾中找到咱們的文件，並對其進行了處理！

 

3.3 加載字體

像字體這樣的其餘資源如何處理呢？file-loader 和 url-loader 能夠接收並加載任何文件，而後將其輸出到構建目錄。這就是說，咱們能夠將它們用於任何類型的文件，也包括字體。讓咱們更新 webpack.config.js 來處理字體文件：

webpack.config.js

{
      test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }