webpack的使用 工作流程 原理

webpack的使用以及工作流程

一.安裝準備工作

1.首先安裝node.js

2.全域性指令安裝webpack或基於專案安裝

npm install webpack -g

初始化乙個專案，會生成乙個package.json檔案

npm init

1.在你的專案目錄下建立webpack.config.js配置檔案, 通過這個檔案進行webpack的配置, 並且還要建立一些路徑儲存基本檔案. 例如:

src資料夾：

2.在src的js下建立乙個入口檔案, 我建立的叫做entry.js, 在專案目錄再建立乙個index.html用來除錯使用. 編寫webpack.config.js檔案:

module.exports =

,

開發伺服器配置（devsever）

module.loaders配置

plugins配置（內建外掛程式與外接外掛程式）

//詳細的webpack.config.js結構分析：

var path =
require
('path');
var webpack =
require
('webpack');
var htmlwebpackplugin =
require
('html-webpack-plugin');
var transferwebpackplugin =
require
('transfer-webpack-plugin');
module.exports =
,//入口檔案輸出配置
output:
, resolveloader:},
//新建乙個開發伺服器，並且當**更新的時候自動重新整理瀏覽器。
devserver:
, module:
,//.css 檔案使用 style-loader 和 css-loader 來處理.
//,其他寫法1、"-loader"其實是可以省略不寫的，多個loader之間用「!」連線起來。
//，其他寫法2、用loaders陣列形式;
//.scss 檔案使用 style-loader、css-loader 和 sass-loader 來編譯處理。
//在chrome中我們通過sourcemap可以直接除錯less、sass原始檔檔案,,
//.less 檔案使用 style-loader、css-loader 和 less-loader 來編譯處理
//.js 檔案使用babel-loader來編譯處理,設定exclude用來排除node_modules這個資料夾中的**,,
//.jsx 檔案使用 jsx-loader 來編譯處理
,//, //檔案使用 url-loader 來處理，小於8kb的直接轉為base64
//設定名稱副檔名},
,//.jade 檔案使用 jade-loader 來編譯處理
,//.ejs 檔案使用 ejs-loader 來編譯處理
,//.handlebars 檔案使用handlebars-loader來編譯處理handlebars模板檔案
,//.dot 檔案使用 dot-loader 來編譯處理dot模板檔案
,//.vue 檔案使用 vue-loader 來編譯處理
,//.coffee 檔案使用 coffee-loader 來編譯處理,,
,,]}
,//分內建外掛程式和外接外掛程式
plugins:
[//使用了乙個 commonschunkplugin 的外掛程式，它用於提取多個入口檔案的公共指令碼部分，然後生成乙個common.js來方便多頁面之間進行復用。
newwebpack.optimize.commonschunkplugin
('common.js'),
newwebpack.optimize.uglifyjsplugin(,
except:
['$super'
,'$'
,'exports'
,'require'
]//排除關鍵字(可選)})
,new
webpack.defineplugin()
,new
webpack.provideplugin()
,new
webpack.noerrorsplugin()
,//允許錯誤不打斷程式
newtransferwebpackplugin([
//把指定資料夾下的檔案複製到指定的目錄
], path.
resolve
(__dirname,
"src"))
,new
htmlwebpackplugin()
],//其它解決方案配置
resolve:
, modulesdirectories:
[//取相對路徑，所以比起 root ，所以會多很多路徑。查詢module(可選)
'node_modules'
,'bower_components'
,'lib'
,'src']}
};if(process.env.
node_env
==='production')}
),newwebpack.optimize.uglifyjsplugin(}
),//為元件分配id，通過這個外掛程式webpack可以分析和優先考慮使用最多的模組，並為它們分配最小的id
newwebpack.optimize.occurenceorderplugin()])}

參考學習：

把所有依賴打包成乙個bundle.js檔案，通過**分割成單元片段並按需載入。

webpack的使用 工作流程 原理

webpack的使用以及工作流程 一.安裝準備工作 1.首先安裝node.js 2.全域性指令安裝webpack或基於專案安裝 npm install webpack g3.建立乙個專案根目錄cd至專案根目錄 初始化乙個專案，會生成乙個package.json檔案 npm init二.初步webpa...

Web應用工作流程總結

了解web應用的工作過程有益於web測試時更好的理解，web應用工作的過程分為以下5個步驟 2.web瀏覽器將使用者的動作轉換為乙個web請求，並通過網際網路傳送到web伺服器 3.web伺服器收到web請求，必須決定接下來做什麼 a.如果web請求的是靜態內容，如html檔案 影象或儲存在web伺...

機器學習的通用工作流程

1.定義問題，收集資料集首先，你必須定義所面對的問題，只有擁有可用的訓練資料，你才能學習 某件事情。因此，資料可用性通常是這 階段的限制因素。其次，你面對的是什麼型別的問題?是二分類問題 多分類問題 標量回歸問題 向量回歸問題，還是多分類 多標籤問題?或者是其他問題，比如聚類 生成或強化學習?確定問...