1.安裝webpack
?????? 前提條件??????? :? 已經(jīng)安裝了Node.js的最新版本(LTS---long term support),
????????????????????????????????? 已經(jīng)初始化package.json文件(npm -y init).
?????? 本地安裝??????? :? npm install --save -dev webpack
?????? 全局安裝??????? :? npm install? -global webpack
?????? 安裝指定版本:? npm install? --save -dev webpack@<version>
??????? 參考: https://doc.webpack-china.org/guides/installation/#-
2. 配置文件
?????? 根目錄新建webpack.config.js文件,
?????? eg.? const path=require('path');
?????????????????????? module.exports= {
?????????????????????? entry:__dirname+"/js/index.js",?
?????????????????????? output: {
??????????????????????? ? ??? path:path.resolve(__dirname,'bundle'),
?????????????????? ? ? ? ? ?? filename:'bundle.js'
??????????????????????? },
?????????????????????? devtool:"source-map",
?????????????????????? module: {
??????????????????? ? ? ? ? ? ? ? ? ? ? ? rules: [
????????????????????????????????????????????????????????? {
???????????????????????????????????????????????????????????????? test:/.js$/,
???????????????????????????????????????????????????????????????? use:'babel-loader'
???????????????????????????????????????????????????????? }
???????????????????????????? ? ? ? ? ? ? ]
??????????? ? ? ? ? ? }
???????????? }
??????????? <一>入口(entry) --- 指定某個(gè)模塊作為構(gòu)建內(nèi)部依賴圖的開始
??????????? <二>出口(output) ---指定webpack輸出所創(chuàng)建的bundles以及對(duì)bundles的命名.
??????????? <三>loader---
????????????????? 識(shí)別出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的那些文件(使用test屬性);
?????????????????? 轉(zhuǎn)換這些文件,從而使其能夠被添加到依賴圖中(并且最終添加到 bundle 中)(use屬性)
??????????? <四>devtool:
?????????????????? 此選項(xiàng)控制是否生成，以及如何生成 source map,
?????????????????? (參考: https://doc.webpack-china.org/configuration/devtool/)
??????????? <五>__dirname : node中的全局變量, 存儲(chǔ)的是文件所在的文件目錄,這里就是項(xiàng)目根目錄.
??????????????????? __filename : node中的全局變量, 存儲(chǔ)的是文件名.
??????????????????? path.resolve()方法會(huì)把一個(gè)路徑或路徑片段的序列解析為一個(gè)絕對(duì)路徑
???????????????????????????????? ---參考:http://nodejs.cn/api/path.html#path_path_resolve_paths
