這是一個webpack配置說明
本文是發布在github上webpack-demo的README文件內容。 主要對webpack.config.js每一條的注釋說明。 希望瀏覽效果更佳，可以點擊文章最下方**【閱讀原文】**跳轉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
注釋很詳細，原文發表在github: https://github.com/hourong88/webpack-demo
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]
延伸補充：