1.導語
首先來簡單介紹一下webpack：現代 JavaScript 應用程序的 靜態模塊打包工具 。當 webpack 處理應用程序時，它會在內部構建一個會映射項目所需的每個模塊 的依賴圖(dependency graph)，并生成一個或多個 bundle 。webpack4.0出現之后，我們可以不用再引入一個配置文件來打包項目，并且它仍然有著很高的可配置性，可以很好滿足我們的需求。 在開始正文之前，首先先來看看我們要實現的成果：
github地址：
基于webpack4.0搭建的腳手架（支持react/vue/typescript/es6+/jquery+less/scss)
在腳手架的開發過程中我會詳細介紹每個插件或者loader的用途以及webpack的核心理念，如有不懂或者有其他更好的想法歡迎交流。 下面是基于該文章的webpack4.0的思維導圖：
2.webpack核心概念
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.jslet 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.jsimport './styles/app.css'此時打開瀏覽器，可以看到css生效了：
現在css導入雖然生效了，但是是有js動態創建添加到head里面的，如果后期項目復雜了，將會嚴重影響項目的加載速度，所以我們這里需要另一個插件，對css進行代碼分割，單獨生成css文件：
npm isntall mini-css-extract-plugin -D
根據該插件的官方配置，我們需要把style-loader替換成該插件提供的loader，并配置導出的css文件目錄和文件名，為了提高開發環境構建速度，我們只在生產環境分割css：
// webpack.prod.jsconst 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.jsconst 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.jsoptimization: { usedExports: true }還有一個問題，由于tree-shaking是基于import 和export的，當我們用import引入css文件時，是沒有導出的，所以我們需要配置忽略css文件的tree-shaking，在package.json中添加如下配置：
// package.json"sideEffects": [ "*.css", "*.less" ],
在打包的過程中，每次執行打包都會新建一個打包文件，我們想要每次打包之前都清除上一次打包的文件怎么辦呢？我們可以使用clean-webpack-plugin來實現，首先先安裝，然后具體配置如下：
// webpack.prod.jsplugins: [ 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.jsoptimization: { 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.jsmodule: { 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.jsmodule: { 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.jsconst 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.jsentry: { 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頁面，對應的文件依賴也會引入，在瀏覽器中打開，親測有效～
這樣，一個基本的多頁面打包工具就開發完成了，不過還有幾點優化：
npm install terser-webpack-plugin optimize-css-assets-webpack-plugin -D
我們在webpack.prod.js中添加一下配置：
// 導入模塊// 壓縮cssconst OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');// 壓縮jsconst 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.jsconst 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": { /* ... */ }}該文件有很多靈活的配置項，大家如果想了解更多可以去typescript官網上查看相關文檔。 至此，所有的配置都完成了，是不是很累？哈哈，當然腳手架中還存在一些優化的地方，歡迎大家可以一起完善。
未完成的優化點：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
