這是優媽成長記的第63篇原創

這是一個webpack配置說明

本文是發布在github上webpack-demo的README文件內容。主要對webpack.config.js每一條的注釋說明。

github項目地址：https://github.com/hourong88/webpack-demo

可以點擊文章最下方【閱讀原文】跳轉github鏈接查看，或下載實戰代碼直接食用。

Run the example

$?npm?install
$?npm?start

Introduce

這個demo是簡單的webpack配置demo，您可以根據實際項目需求，按照下方的配置說明，個性化的配置您的項目。

您也可以關注我，后續會發布最新的依賴的腳手架項目。

This demo is a simple webpack configuration demo, you can personalise your project according to your actual project requirements by following the configuration instructions below.

You can also follow me and I will be posting the latest scaffolding projects with dependencies.

webpack.config.js 配置說明 Configuration instructions

The following comments are in Chinese, you can use the software to translate them.

const?path?=?require('path')

//?module.exports?=?function?(webpackEnv)?{
????module.exports?=?{
????//定義生產環境和開發環境
????//開發環境development?和生產環境?production構建目標差異很大
????//開發環境：需要強大的，具有實時重新加載或熱模塊替換能力，source map 和 localhost server 調試能力
????//生產環境:?我們關注更小的bundle，更輕量的source map，更優化的資源，改善加載時間。
????//所以不同環境配置不同，有傾向性。
????//?const?isEnvDevelopment?=?webpackEnv?===?'development';
????//?const?isEnvProduction?=?webpackEnv?===?'production';
????//?const?publicPath?=?isEnvProduction???'/ui/'?:?isEnvDevelopment?&&?'/';
????
????//?return{
????????//entry表示入口，webpack構建第一步將從entry開始，輸入類型可以抽象為字符串，數組和對象。從入口開始，遞歸搜尋及解析出所有入口依賴的模塊。entry是必填的，否則會報錯、退出
????????entry:?'./src/app.js',?//可以有一個入口，也可以有多個入口，多個入口對應多個**chunk**，具體寫法看中文文檔。entry根據構建出來的依賴關系圖，從而知道哪些部分將會輸出為bundle。
????????//什么是chunk？
????????//webpack專用術語，用于管理webpack打包進程。chunk和輸出的**bundle**一一對應，但是，有些是一對多的關系。
????????//如果entry配置的是對象object，可能就會出現多個thunk，這時候thunk名稱是對象健值對中健的名稱
????????//什么是bundle？
????????//bundle是已經加載完畢，和被編譯后的源代碼最終版本。由多個模塊產生，一個應用可以拆分為多個bundle。Bundle Splitting是webpack優化代碼的一種方法。
????????//總之，chunk和bundle都可以拆分，按需加載，減少代碼量。
????????output:?{
????????????path:?path.resolve(__dirname?,?'dist'),?//輸出文件存放的路徑
????????????//filename: isEnvDevelopment ? 'bundle.js'?:?'[name].js',//輸出文件完整名稱，即使指定了多個入口點(entry points)，output配置項也只能設置一個。
????????????filename:'bundle.js',
????????????publicPath:?publicPath,//發布到線上，所有資源的URL前綴
????????????pathInfo:true,//是否包含有用的文件路徑信息到生成到代碼里，為布爾類型。
????????????chunkFilename:'[name].js',//chunk文件名稱
????????????sourceMapFilename:'[file].map',//生成到source?map文件名稱
????????????devtoolModuleFilenameTemplate:?'webpack:lll[resource-path?]',?//瀏覽器開發者工具顯示的源碼模塊名稱
????????????},
????????????//配置模塊
????????module:?{
????????????rules:[
????????????????{?//babel?es6轉es5?兼容?babel-loader?同步的
????????????????//配置模塊的讀取和解析規則，通常用來配置Loader。對模塊源碼進行轉換
????????????????test:?/\.(js|mjs|jsx|ts|tsx)$/,//正則匹配命中要使用loader的文件,通過test、 inc1ude、 exclude三個配置項來選中Loader要應用規則的文件。
????????????????include:[
????????????????????path.resolve(__dirname?,?'src')?//只會命中這里面的文件
????????????????],
????????????????exclude:?/node_modules/,?//忽略這里面的文件
????????????????use:?[//使用哪些loader，有先后次序，從后向前執行
????????????????????'style-loader',?//直接使用loader名稱?scss?文件的處理順序為先?sass-loader，再?css-loader，再?style-loader
????????????????????{
????????????????????????options:?{
????????????????????????//向html-loader傳一些參數
????????????????????????},
????????????????????????loader:?require.resolve('eslint-loader'),
????????????????????????//常用loader?分別配置
????????????????????????//轉換編譯：script-loader, babel-loader,ts-loader,coffee-loader
????????????????????????//處理樣式：style-loader,css-loader,less-loader,sass-loader,postcss-loader(postcss和scss關系類似babel和js)
????????????????????????//處理文件：raw--loader,url-loader,file-loader
????????????????????????//處理數據：csv-loader,xml-loader
????????????????????????//處理模板語言：html-loader,pug-loader,jade-loader,markdown-loader
????????????????????????//清理和測試：mocha-loader,eslint-loader
????????????????????????//react：babel-preset-react
????????????????????},
????????????????],
????????????????},??
????????????],
????????????noParse:[?//提高webpack構建性能，忽略沒采用模塊化的文件遞歸處理
????????????????//noParse文件不能包含模塊化的語句import，require，defind，不然會導致構建文件無法在瀏覽器瀏覽
????????????????/lspecial-library\.js$1?//用正則匹配
????????????]
????????},
????????plugins:[
????????????//配置插件,擴展webpack功能，plugin配置項接收一個數組，數組每一項都是使用一個plugin實例，plugin的參數通過構造函數傳入。使用plungin，需要在社區找到plugin本身提供的配置項
????????],
????????resolve:?{?//配置尋找模塊的規則
????????????modules:?[?//尋找模塊的根目錄，為?array?類型，默認以?node_modules?為根目錄
????????????'node_modules',
????????????path.resolve(?dirname,?'app'),
????????????],
????????????extensions:?['.js',?'.json',?'.jsx',?'.css'],?//模塊的后綴名
????????????alias?:{?//除了可以用對象，也可以用數組進行詳細配置
????????????//將'module’映射成'new-module',?'module/path/file'映射成'new-module/path/file’
????????????//通過別名映射原來的路徑為新路徑
????????????'module':'new-module',
????????????},
????????????symlinks:?true?,?//?是否跟隨文件的軟鏈接去搜尋模塊的路徑?
????????????descriptionFiles:?['package.json'],//模塊的描述文件?
????????????mainFields?:?['main'],?//模塊的描述文件里描述入口的文件的字段名?
????????????enforceExtension:?false,?//是否強制導入語句寫明文件后綴,如果為true，導入模塊必須帶后綴
????????????},
????????performance:?{?//輸出文件性能檢查配置
????????????hints:?false,?//?關閉性能檢查
????????????maxAssetSize:?200000?,?//?最大文件的大小(單位為?bytes)
????????},?
????????devtool:?'source-map',?//用于開發環境調試，生產環境可以不配置
????????devServer:?{
????????????contentBase:?"./public",?//本地服務器所加載的頁面所在的目錄
????????????historyApiFallback:?true,?//不跳轉
????????????inline:?true,?//實時刷新
????????????hot:?true?
????????},
????????target:?'web',?//瀏覽器，默認
????????profile:?true,?//?是否捕捉?Webpack構建的性能信息，用于分析是什么原因導致構建性能不佳
????????cache?:?false?,?//?是否啟用緩存來提升構建速度??
????}
//?}

//優化

//1.縮小文件搜索范圍
//*?loader?調整目錄結構，include縮小命中范圍
//*?resolve?定義搜索絕對路徑
//*?alias?映射新路徑
//*?extensions:?[’js’],盡可能減少后綴嘗試搜索的可能性
//*?noParse?忽略沒用模塊化的文件

//2.用dllPlugin
//?動態鏈接庫?antd?react?charts

//3.HappyPack?分解任務，多線程解析和處理文件?loader最耗時?happypack/loader

//4.自動刷新?watch監聽?不監聽node_modules

//5.區分環境?開發和生產

//6.壓縮代碼 uglifyJs 壓縮js；cssnano 壓縮css

//7.cdn加速

//8.tree?shaking?可以用來剔除js中用不上的死代碼

//9.提取公共代碼，組件?公共代碼base.js?所有頁面都依賴的基礎組件庫，entry配置，打包成單獨的trunk

//10.分割代碼按需加載?import()?返回一個promise，output配置分割出去的thunk名稱，在路由或者點擊按鈕事件里面配置

//11.使用prepack改變源碼運行邏輯?plugin?運行時優化

//12.scope?hoisting?作用于提升，打包出來的代碼更小，運行更快?是一個plugin

//13.輸出分析?webpack?analyse

//[over]

總結

以上是生活随笔為你收集整理的拆分js文件_2021入门Webpack，看这篇就够了：Webpack.config.js 解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。