webpack學習筆記（四）

當前優化：配置本地開發環境（引入webpack-dev-server）、區分開發環境和生產環境

tips：node-sass可能出現安裝不成功的情況，請使用cnpm並且刪除依賴重試；

npm install;

npm run build;

路徑./webpack.dev.config.js

const path =

require
("path");
const webpack =
require
("webpack");
const htmlwebpackplugin =
require
("html-webpack-plugin");
const
=require
("clean-webpack-plugin");
const uglifyjsplugin =
require
("uglifyjs-webpack-plugin");
const copywebpackplugin =
require
("copy-webpack-plugin");
const minics***tractplugin =
require
("mini-css-extract-plugin");
const optimizecssassetsplugin =
require
("optimize-css-assets-webpack-plugin");
// 獲取本地ip位址
const os =
require
("os");
const networkinte***ces = os.
networkinte***ces()
;const ipv4config = networkinte***ces[object.
keys
(networkinte***ces)[0
]].find
( config =>);
const ip = ipv4config ? ipv4config.address :
"0.0.0.0"
;module.exports =
,// 輸出(output)
output:
,// 啟用 source map
devtool:
"cheap-module-eval-source-map"
,// webpack-dev-server配置
devserver:
, publicpath:
"/",
proxy:
, quiet:
true
, watchoptions:},
// loader
module:}]
},// 載入ts]}
,// 載入 css}]
},// 載入less},
}]},
// 載入scss},
}]},
// 載入sass},
}]},
// 載入
,// 載入字型
,//把jquery變成 $ 暴露到window
,//把lodash變成 _ 暴露到window]}
,// 外掛程式(plugins)
plugins:
[// 熱替換模組
newwebpack.hotmodulereplacementplugin()
,// 當開啟 hmr 的時候使用該外掛程式會顯示模組的相對路徑
newwebpack.namedmodulesplugin()
,// 在輸出階段時，遇到編譯錯誤跳過
newwebpack.noemitonerrorsplugin()
,// html處理
newhtmlwebpackplugin()
,// css提取
newminics***tractplugin()
,// 複製引用資源
newcopywebpackplugin([
])]}
;

webpack筆記記錄四

entry 入口起點 1.string src index.js 單入口打包形成乙個chunk。輸出乙個bundle檔案。此時chunk的名稱預設是 main 2.array src index.js src add.js 多入口所有入口檔案最終只會形成乙個chunk,輸出出去只有乙個bundle檔...

Webpack學習筆記

自我總結 如其名，一些入口處的引導檔案 定義 output 位於物件最頂級鍵 key 包括了一組選項，指示 webpack 如何去輸出 以及在 輸出你的 bundle asset 和其他你所打包或使用 webpack 載入的任何內容 自我總結 這個也沒什麼說的，如其名，定義了最終生成檔案的位址以及其...

webpack 學習筆記

學習資源來自前端工程化 webpack.html 課程專題 使用webpack搭建生產環境工作流.html 這兩個教程必須同時看著，互相補充。impot和 export是es6新語法，需要用babel轉一下，直接執行不了 配置webpack.config.js時候，需要引入path模組。1 例 co...