怎么用webpack4.0擼單頁/多頁腳手架

這篇文章主要介紹怎么用webpack4.0擼單頁/多頁腳手架，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1.導語

首先來簡單介紹一下webpack：現代 JavaScript 應用程序的 靜態模塊打包工具 。當 webpack 處理應用程序時，它會在內部構建一個會映射項目所需的每個模塊 的依賴圖(dependency graph)，并生成一個或多個 bundle 。webpack4.0出現之后，我們可以不用再引入一個配置文件來打包項目，并且它仍然有著很高的可配置性，可以很好滿足我們的需求。 在開始正文之前，首先先來看看我們要實現的成果：

• 支持ES6+JQuery+Less/Scss的單頁/多頁腳手架

• 支持ES6+React+Less/Scss+Typescript的單頁/多頁腳手架

• 支持ES6+Vue+Less/Scss+Typescript的單頁/多頁腳手架

github地址：

基于webpack4.0搭建的腳手架（支持react/vue/typescript/es6+/jquery+less/scss)

在腳手架的開發過程中我會詳細介紹每個插件或者loader的用途以及webpack的核心理念，如有不懂或者有其他更好的想法歡迎交流。 下面是基于該文章的webpack4.0的思維導圖：

2.webpack核心概念

• 入口：指示 webpack 應該使用哪個模塊作為入口起點

• 輸出：告訴 webpack 在哪里輸出它所創建的 bundle，以及如何命名這些文件

• loader：讓 webpack 能夠去處理其他類型的文件，并將它們轉換為有效模塊，以供應用程序使用

• 插件：用于執行范圍更廣的任務。包括：打包優化，資源管理，注入環境變量

• 模式：通過選擇 development, production 或 none 之中的一個，來設置 mode 參數，從而進行不同的打包優化

• 瀏覽器兼容性：支持所有符合ES5 標準的瀏覽器（不支持 IE8 及以下版本）下面提供官網的打包模型

3.支持ES6+JQuery+Less/Scss的單頁/多頁腳手架

在實現腳手架之前，假設我們已經創建了目錄和package.json文件，接下來先安裝webpack相關依賴：

// 此處建議安裝局部依賴，安裝全局依賴可能會出現版本問題
npm install -D webpack webpack-cli

因為項目要支持es6+,我們還需要安裝babel相關依賴：

npm install -D babel-loader @babel/core @babel/preset-env

這個時候可以開始配置我們的腳手架邏輯了，為了項目結構清晰易于維護，我們建一個build目錄專門放webpack構建的腳本，webpack默認的配置文件是webpack.config.js,由于實際項目需要，我們將其拆分為3個文件，分別是webpack通用配置文件webpack.base.js，開發環境配置文件webpack.dev.js以及生產環境配置文件webpack.prod.js。

我們先處理webpack.common.js文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: {
  main: './src/index.js',
 },
 output: {
  path: path.resolve(__dirname, '../dist'),
 },
 module: {
  rules: [
   // 將es6編譯成es5
   { 
    test: /\.jsx?$/, // ?表示x有0個或一個
    exclude: /node_modules/, // 不編譯某個目錄下的文件
    include: path.resolve(__dirname, '../src'), // 只在include包含的目錄下進行loader編譯
    use: [
     "babel-loader",
    ]
   },
  ]
 }
}

為了項目后期的開發和維護，我們建立好項目結構：

public目錄是事先準備好的html模版，這里就不介紹了，其他目錄可根據具體項目進行設置。

我們還需要一個插件將打包后的文件植入到html模版中并導出到dist目錄下，這里使用html-webpack-plugin來實現

npm install -D html-webpack-plugin

現在webpack.base.js為如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const template = path.resolve(__dirname, '../public/index.html');

module.exports = {
 entry: {
  main: './src/index.js'
 },
 output: {
  path: path.resolve(__dirname, '../dist')
 },
 module: {
  rules: [
   // 將es6編譯成es5
   { 
    test: /\.jsx?$/, // ?表示x有0個或一個
    exclude: /node_modules/, // 不編譯某個目錄下的文件
    include: path.resolve(__dirname, '../src'), // 只在include包含的目錄下進行loader編譯
    use: [
     "babel-loader",
    ]
   },
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   template,
   filename: 'index.html'
  })
 ]
}

為了打包項目，我們需要在webpack.prod.js目錄下進行配置，此處需要一個模塊webpack-merge將wepack基礎配置合并進生產配置，我們先來安裝一下：

npm install -D webpack-merge

webpack.prod.js配置如下：

const merge = require('webpack-merge');
const base = require('./webpack.base');

module.exports = merge({
 mode: 'production',
 output: {
  filename: 'js/[name]_[contenthash].js', // 入口和內容hash組成的文件名，也可以是hash
		chunkFilename: 'js/[name]_[contenthash].chunk.js'
 }
}, base)

然后在package.json里添加執行腳本：

"scripts": {
 "build": "webpack --config ./build/webpack.prod.js"
 }

webpack默認會找名為webpack.config.js的文件，由于我們將其拆解為prod和dev，所以我們要手動指定webpack執行的文件，添加--config，即可手動指定目錄。下面我們開始寫一段代碼試試吧，在index.js中寫入如下es6代碼:

// index.js
let name = 'xuxi';
let say = (name) => {
 alert(name)
};
say(name);

下面我們執行：

npm run build

此時我們會看見項目中多了一個dist目錄，里面的html也植入了相應的代碼，

在瀏覽器中打開：

ok,第一步完成。 下一步是支持css，我們先安裝如下幾個模塊：

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

在webpack.base.js中的module中添加如下代碼：

module: {
  rules: [
   // 將es6編譯成es5
   { 
    test: /\.jsx?$/, // ?表示x有0個或一個
    exclude: /node_modules/, // 不編譯某個目錄下的文件
    include: path.resolve(__dirname, '../src'), // 只在include包含的目錄下進行loader編譯
    use: [
     "babel-loader",
    ]
   },
   // 加載css
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
   },
  ]
 }

注意，laoder的加載順序是從下往上，從右往左的，所以配置loader的時候要注意一下順序。 此時在styles目錄下加入app.css,在js中引入:

// app.css
#root {
 background-color: #f0c;
 height: 100px;
}

// index.js
import './styles/app.css'

此時打開瀏覽器，可以看到css生效了：

現在css導入雖然生效了，但是是有js動態創建添加到head里面的，如果后期項目復雜了，將會嚴重影響項目的加載速度，所以我們這里需要另一個插件，對css進行代碼分割，單獨生成css文件：

npm isntall mini-css-extract-plugin -D

根據該插件的官方配置，我們需要把style-loader替換成該插件提供的loader，并配置導出的css文件目錄和文件名，為了提高開發環境構建速度，我們只在生產環境分割css：

// webpack.prod.js
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const base = require('./webpack.base');

module.exports = merge({
 mode: 'production',
 output: {
  filename: 'js/[name]_[contenthash].js', // 入口和內容hash組成的文件名，也可以是hash
		chunkFilename: 'js/[name]_[contenthash].chunk.js'
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [ // loader解析的順序是從下到上，從右到左的順序
     {
      loader: MiniCssExtractPlugin.loader,
      options: {
       filename: '[name].css',
       chunkFilename: '[name].css',
       publicPath: '../' //****最后打包的時候替換引入文件路徑
      },
     },
     // 'style-loader', 使用MiniCssExtractPlugin時就不能使用style-loader了
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //該方式可以讓@import引入的css文件再次執行一邊css打包loader
      }
     },
    ]
   }
  ]
 },
 plugins: [
  new MiniCssExtractPlugin({
   // Options similar to the same options in webpackOptions.output
   // both options are optional
   filename: 'css/[name]_[hash].css',
   chunkFilename: 'css/[name]_[hash].chunk.css',
   }),
 ]
}, base)

由于我們在dev和prod環境的css-loader不一樣，所以我們將base的css-loader配置刪除，移到dev下

// webpack.dev.js
const base = require('./webpack.base');
const merge = require('webpack-merge');
const webpack = require('webpack');

module.exports = merge({
 mode: 'development',
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [ // loader解析的順序是從下到上，從右到左的順序
     'style-loader', //使用MiniCssExtractPlugin時就不能使用style-loader了
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //該方式可以讓@import引入的css文件再次執行一邊css打包loader
      }
     },
    ]
   }
  ]
 },
 output: {
		filename: '[name].js',
		chunkFilename: '[name].js',
	}
}, base)

ok,此時我們就完成一個基本的打包es6,css的模塊打包工具，為了支持更高的es6+語法，我們配置.babelrc文件，以及安裝相應的npm包：

npm install @babel/polyfill core-js -D

.babelrc文件如下：

{
 "presets": [
  [
   "@babel/preset-env", // 將ES6語法轉換為es5
   {
    "useBuiltIns": "usage", // 只編譯需要編譯的代碼
    "corejs": "3.0.1",
   }
  ],
  ]
}

我們會看到babelrc文件里面有"useBuiltIns": "usage", 這個配置涉及到一個關于webpack打包的高級用法，tree-shaking。

tree-shaking:用于描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴于 ES2015 模塊語法的靜態結構特性，例如 import 和 export 。這個術語和概念實際上是由 ES2015 模塊打包工具 rollup 普及起來的。

我們通過使用tree-shaking，可以極大的減少代碼的體積，對于提高打包性能很有幫助。為了使tree-shaking能生效，我們還要在webpack配置文件中開啟：

// webpack.base.js
optimization: {
  usedExports: true
 }

還有一個問題，由于tree-shaking是基于import 和export的，當我們用import引入css文件時，是沒有導出的，所以我們需要配置忽略css文件的tree-shaking，在package.json中添加如下配置：

// package.json
"sideEffects": [
 "*.css",
 "*.less"
 ],

在打包的過程中，每次執行打包都會新建一個打包文件，我們想要每次打包之前都清除上一次打包的文件怎么辦呢？我們可以使用clean-webpack-plugin來實現，首先先安裝，然后具體配置如下：

// webpack.prod.js
plugins: [
  new CleanWebpackPlugin()
 ],

該插件會默認清除dist目錄下的打包文件。 接下來我們安裝jquery：

npm install jquery -S

在index.js引入并使用：

import $ from 'jquery';
import './styles/app.css'

console.log($('#root').html('hello world'));

執行npm run build后，我們在瀏覽器中打開，即可看到jq的作用：

但是我們看dist目錄下的js文件，發現jquery和業務代碼都打包進一個頁面了，這樣會導致當業務復雜時，整個頁面代碼會非常大，我們進一步做優化，即js代碼分割。 根據webpack官網的方案，我們只需要進行簡單的配置，便可以進行對js代碼分割：

//webpack.base.js
optimization: {
  splitChunks: {
   chunks: 'all',
   // chunks: 'async', // async表示只對異步代碼進行分割
   minSize: 30000, // 當超過指定大小時做代碼分割
   // maxSize: 200000, // 當大于最大尺寸時對代碼進行二次分割
   minChunks: 1,
   maxAsyncRequests: 5,
   maxInitialRequests: 3,
   automaticNameDelimiter: '_',
   name: true,
   cacheGroups: { // 緩存組：如果滿足vendor的條件，就按vender打包，否則按default打包
    vendors: {
     test: /[\\/]node_modules[\\/]/,
     priority: -10, // 權重越大，打包優先級越高
     // filename: 'js/vender.js' //將代碼打包成名為vender.js的文件
     name: 'vender'
    },
    default: {
     minChunks: 2,
     priority: -20,
     name: 'common',
     // filename: 'js/common.js',
     reuseExistingChunk: true // 是否復用已經打包過的代碼
    }
   }
  },
  usedExports: true
 }

由于篇幅限制，splitChunks的具體配置我通過注釋寫出來了，如果想了解更詳細的配置，后面大家可以去webpack官網查看。此時執行npm run build,我們可以看到代碼已經進行了分割：

當然只滿足與css和js的打包還遠遠不夠，我們項目中還會用到各種圖片，字體圖標，css預編譯語言如less或者scss，由于這部分的安裝比較簡單，我們直接上代碼。 首先安裝相關依賴：

npm install url-loader file-loader less less-loader

此時我們webpack.base.js中module變為：

module: {
  rules: [
   // 將es6編譯成es5
   { 
    test: /\.jsx?$/, // ?表示x有0個或一個
    exclude: /node_modules/, // 不編譯某個目錄下的文件
    include: path.resolve(__dirname, '../src'), // 只在include包含的目錄下進行loader編譯
    use: [
     "babel-loader",
    ]
   },
   // 加載解析文件資源
   {
    test: /\.(jpg|png|gif)$/,
    use: {
     loader: 'url-loader', // 和file-loader功能相同，但更智能
     options: {
      // 配置打包后的文件名,具體可看webpack的file-loader文檔
      name: '[name].[ext]?[hash]',
      outputPath: 'images/',
      limit: 4096 // 當圖片大小大于4k時將以文件形式輸出，否則以base64輸出
     }
    }
   },
   // 引入字體，svg等文件
   {
    test: /\.(eot|ttf|svg)$/,
    use: {
     loader: 'file-loader'
    }
   }
  ]
 },

為了支持less，我們修改一下dev和prod文件：

// webpack.dev.js
module: {
  rules: [
   {
    test: /\.(css|less)$/,
    use: [ // loader解析的順序是從下到上，從右到左的順序
     'style-loader', //使用MiniCssExtractPlugin時就不能使用style-loader了
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //該方式可以讓@import引入的css文件再次執行一邊css打包loader
      }
     },
     'less-loader',
    ]
   }
  ]
 }

// webpack.prod.js
module: {
  rules: [
   {
    test: /\.(css|less)$/,
    use: [ // loader解析的順序是從下到上，從右到左的順序
     {
      loader: MiniCssExtractPlugin.loader,
      options: {
       filename: '[name].css',
       chunkFilename: '[name].css',
       publicPath: '../' //****最后打包的時候替換引入文件路徑
      },
     },
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //該方式可以讓@import引入的css文件再次執行一邊css打包loader
      }
     },
     'less-loader'
    ]
   }
  ]
 }

我們寫一段less代碼試試：

body {
 #root {
  background-color: #000;
  color: #fff;
 }
}

我們執行build之后在瀏覽器打開看看效果：

ok，至此，我們第一步也是最重要的一步已經完成了，由于開發項目的時候不可能每次改動代碼都構建一次，這樣時間成本太大了，我們想要實時看到改變的內容，這個時候就要用webpack4.0提供的devServer了，它使得我們項目可以支持熱更新和熱模塊替換，我們需要在開發環境下對其進行配置，具體如下： 首先安裝開發服務器模塊：

npm install webpack-dev-server -D

接著配置dev文件：

webpack.dev.js
const base = require('./webpack.base');
const merge = require('webpack-merge');
const webpack = require('webpack');

module.exports = merge({
 mode: 'development',
 module: {
  rules: [
   {
    test: /\.(css|less)$/,
    use: [ // loader解析的順序是從下到上，從右到左的順序
     'style-loader', //使用MiniCssExtractPlugin時就不能使用style-loader了
     'vue-style-loader',
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //該方式可以讓@import引入的css文件再次執行一邊css打包loader
      }
     },
     // 'sass-loader',
     'less-loader',
     'postcss-loader',
    ]
   }
  ]
 },
 // 服務器配置
 devServer: {
  port: '8081',
  // 當使用 HTML5 History API 時，任意的 404 響應都可能需要被替代為 index.html
  historyApiFallback: true, // 解決單頁面路由問題，
  contentBase: '../dist',
  open: true, //自動打開瀏覽器
  hot: true, // 開啟熱替換, css代碼跟新不刷新頁面
  // hotOnly: true 開啟后只有手動配置才能更新，即使hot為true也不刷新瀏覽器
  proxy: {
   index: '', // 將index設置為空，可以對根路徑進行轉發
   'api/get': 'xxxx.com/api', // 第一種方式，直接代理到api路徑
   'api/vue': { // 第二種方式，在路徑需要臨時替換時使用
    target: 'xxxx.com/api',
    pathRewrite: {
     'head': 'demo' //此時訪問head路徑將被代理到demo下
    },
    secure: false, //對https請求的配置，false為支持https
    changeOrigin: true //做代理分發時允許訪問其他網站，突破網站限制，建議在開發環境使用
   },

  }
 },
 plugins: [
  new webpack.HotModuleReplacementPlugin()
 ],
 output: {
		filename: '[name].js',
		chunkFilename: '[name].js',
	}
}, base)

以上代碼中，要使用熱模塊替換，我們需要用到webpack自己集成的插件webpack.HotModuleReplacementPlugin，在devServer中，我們還可以設置開發環境中的代理proxy，這已經是目前開發的默認模式了，代碼中一些屬性的用法和含義我都做了注釋，如果大家有興趣，可以查看webpack原版官方文檔，那里有更詳細的配置信息。 我們再來修改package.json,添加開發環境的運行指令：

// 在script里面添加
"start": "webpack-dev-server --config ./build/webpack.dev.js",

我們執行 npm start，此時會自動打開瀏覽器，運行我們的項目。

到此，我們基本的一個支持ES6+Less/css+JQuery的單頁應用打包工具已經做好了，當然這只是基礎，后面的多頁應用，vue/react/typescript都是在這個基礎上構建的，讓我們拭目以待。

多頁面應用：

我們開發多頁面應用還是需要用到之前使用的html-webpack-plugin插件，此時我們需要定義多個入口：

// webpack.base.js
entry: {
  main: './src/index.js',
  about: './src/about.js'
 }

plugins: [
new HtmlWebpackPlugin(
  {
   template,
   title: 'webpack打包但單應用',
   chunks: ['vender', 'main']，
   filename: 'index.html'
  }
 ),
 new HtmlWebpackPlugin(
  {
   template,
   title: '關于我們',
   chunks: ['vender', 'about']，
   filename: 'about.html'
  }
 ),
]

template是我們定義的public下的html路徑，title是我們要植入html模版中的titl標簽中的內容，我們在index.html中這么使用：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title><%= htmlWebpackPlugin.options.title %></title>
 <link rel="shortcut icon" href="./favicon.ico" rel="external nofollow" >
</head>
<body>
 <div id="root"></div>
</body>
</html>

這樣，webpack配置的title就可以動態的添加到html頁面中了，這里我要說一下在new HtmlWebpackPlugin中我們添加了chunks數組，這個數組就是我們要打包進頁面的js，main和about分別代表入口的名字，vender就是我們定義optimization時里面cacheGroups屬性值中vendors中定義的name,當代碼超過30000b時就會生成vender.js文件。 此時我們執行npm run build，打包結束后將會生成2個html頁面，對應的文件依賴也會引入，在瀏覽器中打開，親測有效～

這樣，一個基本的多頁面打包工具就開發完成了，不過還有幾點優化：

• 代碼壓縮，

• 第三方模塊懶編譯，我們可以使用webpack提供的dll技術做優化

• pwa技術引入 下面分別是相關實現： 1.代碼壓縮，我們使用terser-webpack-plugin壓縮js，用optimize-css-assets-webpack-plugin壓縮css

npm install terser-webpack-plugin optimize-css-assets-webpack-plugin -D

我們在webpack.prod.js中添加一下配置：

// 導入模塊
// 壓縮css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 壓縮js
const TerserPlugin = require('terser-webpack-plugin');

// 配置module.exports,添加配置如下
optimization: {
  minimizer: [
   new TerserPlugin({ // 壓縮js代碼
    cache: true, // 啟用文件緩存
    parallel: true, // 使用多進程并行執行任務來提高構建效率
    sourceMap: true, // 將錯誤消息位置映射到模塊
    terserOptions: {
     drop_console: true, // 打包時剔除所有console.log
     drop_debugger: true // 打包時剔除所有debugger
    }
   }), 
   new OptimizeCSSAssetsPlugin({})] // 壓縮css代碼
 },

pwa：漸進式網絡應用程序(progressive web application - PWA)，是一種可以提供類似于native app(原生應用程序) 體驗的 web app(網絡應用程序)。首先我們安裝依賴：

npm install workbox-webpack-plugin --save-dev

在需要做pwa的頁面里加入如下腳本啟動：

if ('serviceWorker' in navigator) { window.addEventListener('load', () => {
   navigator.serviceWorker.register('/service-worker.js').then(registration => {
    console.log('SW registered: ', registration);
   }).catch(registrationError => {
    console.log('SW registration failed: ', registrationError);
    });
   });
 }

dll文件優化打包速度 關于dll問題，我們可以在官網上查詢具體的使用方法，這里就不具體說明了。

至此，我們關于開發基于ES6+JQuery+Less/Scss的單頁/多頁腳手架就告于段落了，下面我們來集成對react/vue/typescript的支持。

1.支持react

我們首先安裝一個babel模塊：

npm install --save-dev @babel/preset-react

然后在.babelrc中加入如下配置：

{
 "presets": [
 [
  "@babel/preset-react",
  {
  "pragma": "dom", // default pragma is React.createElement
  "pragmaFrag": "DomFrag", // default is React.Fragment
  "throwIfNamespace": false // defaults to true
  }
 ]
 ]
}

然后在index.js中寫入一段react代碼：

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
 render() {
  return <div>react frame content.</div>
 }
}

ReactDOM.render(<App />, document.getElementById('root'));

打包后即可在瀏覽器中看到效果。

2.支持vue

首先先安裝對應npm包：

npm install -D vue-loader vue-template-compiler

之后在webpack的配置文件中寫入如下代碼：

// webpack.base.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
 module: {
 rules: [
  // ... other rules
  {
  test: /\.vue$/,
  loader: 'vue-loader'
  }
 ]
 },
 plugins: [
 // make sure to include the plugin!
 new VueLoaderPlugin()
 ]
}

如果要想解析.vue文件中的style，我們需要使用vue-style-loader模塊，安裝之后將其添加到loder中即可。 接下來我們寫個簡單的vue試一下吧：

<template>
 <div class="example">
  {{ msg }}
  <img src="~/images/logo.png" />
  <img :src="imgSrc" />
 </div>
</template>

<script>
import Logo from 'images/logo.png';
import 'css/common.css';

export default {
 data () {
 return {
  msg: 'Hello world!單獨的',
  imgSrc: Logo
 }
 }
}
</script>

<style lang="less">
.example {
 color: red;
 img {
  border: 2px solid #000;
 }
}
</style>

運行dev在瀏覽器中即可看到效果。 值得注意的是vue文件中引入資源的問題，使用相對路徑會有問題，這里我們可以使用~/images/logo.png的方式或者require的方式來引入圖片。

3.支持typescript

這里我們使用awesome-typescript-loader來編譯typescript文件，也是官方推薦的一個加載器：

npm install awesome-typescript-loader --save-dev

然后我們在webpack的配置文件base中，在module的rules里加入如下代碼：

{
  test: /\.tsx?$/,
  loader: 'awesome-typescript-loader'
  }

最后一步，添加tsconfig.json文件：

{
 "compilerOptions": {
  "noImplicitAny": true,
  "removeComments": true
 },
 "awesomeTypescriptLoaderOptions": {
  /* ... */
 }
}

以上是“怎么用webpack4.0擼單頁/多頁腳手架”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！