開始之前先定一個准則，我的博客未必全部正確，要敢於質疑，路不通就換條路。
一、該文章的基本內容
nodejs的安裝yarn安裝- 創建
webpack項目 - 配置
package.json讓項目跑起來 - 安裝
gulp管理工具 - 對css進行預處理 =>
gulp-sass(有個gulp4的坑) - 刷新頁面神器 =>
browser-sync - html預處理 =>
jade(Pug)
1. 安裝node
因為這算是名副其實的從零開始了...所以。。就先從安裝nodejs開始吧 => 戳我進入node中文官網
選擇安裝版本就不說了，傻瓜式安裝，不需要任何操作。
二進制版本(就是解壓即用的版本)我也不說了，開始玩node的人應該基礎都沒問題，環境變量啥的配的都是小意思了，Linux和MacOS自行解決吧，以后我應該會把方法貼上去。
測試是否已經安裝成功用node -version檢測，有顯示版本號就安裝成功了。
未找到命令，多半是環境變量沒有配置好，具體解決方案。。我懶得寫，自行百度。。。。
2. npm安裝，yarn安裝
npm查看
看網上說在安裝node的時候也包括了npm，node很久以前裝的，基本上也忘了網上說的可靠性，總之，完成上一步(安裝node)之后，在cmd中輸入npm -version檢查下版本號。
如果說未找到命令，多半是環境變量沒有配置好。
針對這個問題，有一個可能的原因，你下載的是二進制版本的node，然后只配置了node的環境變量，沒有配置npm的環境，具體解決方案。。我懶得寫，自行百度。。。。
yarn安裝
yarn是Facebook最近(估計都過去好久了)發布的一款依賴包安裝工具，yarn是一款新的，快速，安全，並且是可替換npm的依賴管理工具。
安裝方式使用npm。。。。
npm install -g yarn
這里-g的屬性是指全局(現在想想應該是global這個詞)，如果安裝階段出了報錯，就把報錯內容復制下來百度，因為我沒有遇到過問題，所以就不介紹了。
檢查是否安裝成功 -- 查看版本號yarn -version，如果顯示版本號，就說明安裝完成了。
3. 創建webpack項目
選擇一個文件夾，作為webpack項目的目錄，我這里建立在F盤的item文件夾的webpackDemo文件夾里了，路徑為F:\item\webpackDemo\
然后在該目錄下按住shift鍵，並點擊鼠標右鍵。
win7以前是點
在此處打開cmd命令窗口(具體名稱不記得了，反正差不多這樣)win10點擊
在此處打開Powershell窗口
安裝:
-
進入命令窗口之后，使用
npm init -y配置一些基礎屬性，-y的屬性意思是后面的所有選項都默認為yes，后面我會詳細說里面會遇到的選項，現階段直接用-y就好 -
npm install webpack --save-dev安裝webpack，使用—save-dev，將通知計算機在package.json中添加gulp依賴 (Linux也有dev啊，大概是development開發者的縮寫。。。以前一直理解為驅動) -
npm i webpack-cli --save-dev安裝webpack腳手架 (i是install的簡寫)
然后等待下載...然后你會發現下載超慢的，畢竟服務器在國外嘛，沒辦法的。
要想提升下載速度的話，可以下一個npm的中國淘寶鏡像，具體方法這里懶得寫了(實際上我記不清怎么弄了)，文章挺多的，就搜npm淘寶鏡像就有一大堆結果。。。
如果安裝了淘寶鏡像，把
npm命令換成cnpm就行了，記得安裝淘寶鏡像的時候屬性要加個-g哦~~ 一般他們文章都會加上-g噠，不會太坑的 (是不是已經開始下載了才看到后面說的提速的方法啊，不過可以用ctrl + c終止程序的哦~~)
等安裝結束，如果沒有報什么錯誤的話，你應該會發現，當前目錄下F:\item\webpackDemo\ 里出現了一個文件夾和一個json文件，下面來說說這兩個文件。
- package.json 項目配置文件，不能刪
- node_modules 項目安裝的環境文件，這個文件是根據
package.json生成的，可以刪除，不過建議在看完我這篇博客之前不要刪。。。除非你就是那傳說中的大佬。
到這里，webpack算是建立起來了，但是這只是建立起來了，
4. 配置package.json 讓項目跑起來
打開package.json文件(欸，我是不是超級啰嗦的啊)
超級干凈的一段標准json代碼。。。
{
"name": "build_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2"
}
}
比較難受的是，在json文件中寫的任何注釋都會報錯Orz
這里面的大部分方法我暫時都不介紹了(因為后面會一一說明 => 其實並沒有說明，不過我貼個文章，屬性詳解的)
這里我只說明兩個參數，一個是devDependencies，一個是scripts。
先引用下定義：
- devDependencies 這些依賴只有在開發時候才需要。
- scripts 通過設置這個可以使npm調用一些命令腳本，封裝一些功能。
對於devDependencies，如果你比較敏感的話，會發現這里面的內容正式我們前面用npm安裝的包名webpack和webpack-cil，不難推出，這個是我們已安裝的依賴名稱。
先不管發生了什么，先在package.json的scripts中加上一段代碼"build": "webpack"
{
"name": "build_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2"
}
}
運行npm run build(對，run后面的字段正是scripts中的build字段，代碼執行了build對應的webpack命令)，然后會報出一個警告一個錯誤。
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
原因是沒有設置編譯模式……不過我們程序員都是只看錯誤(error)不看警告(warning)的對吧？
ERROR in Entry module not found: Error: Can't resolve './src' in 'F:\item\webpackDemo'
在項目目錄下找不到入口文件，根目錄里創建一個名叫src的文件夾先……然后根據package.json里的main后面的內容在src里創建入口文件，我這里配置的是index.js(看上面代碼塊里的"mian": "index.js"字段)
我這里簡單寫了個打印語句
console.log('僕のイヴは仙女です!!!'); // 咳……失態了
然后再跑一遍npm run build，等運行結束，檢查下目錄下，應該是多了一個dist目錄，里面還有一個main.js的文件，如果沒有或者是多了點奇怪的東西，我不背鍋。。。搜報錯，然后百度，學會自主學習。
到這里，項目就能跑起來了，下面我們詳細配置一下scripts運行腳本，我們這里給它添加一個mode屬性，解決掉之前的那個warning(說不看警告都是假的...不過大部分都不看，欸嘿嘿)
mode中有兩種模式
- development 開發者環境，代碼格式規范，可讀性強
- production 生產環境，文件都是壓縮過噠~~
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
}
然后你可以運行打包一下，我就不演示啦~~
不過注意一點，兩個模式輸出文件都在
./dist/main.js中，所以運行完一個看一下，否則文件會覆蓋，就看不出效果啦~~
挺不方便的對吧，那就再配置下輸出文件的目錄，還是package.json的scripts。
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development ./src --output ./development/main.js",
"build": "webpack --mode production ./src --output ./dist/index.js"
}
}
沒錯，--output前面的.src正是我們源文件目錄，這個可以根據需求修改，--output后面的是輸出目錄，將文件輸出至指定的目錄，后面跟文件名...(我真的超級啰嗦的對吧)
以上，webpack項目搭建出來了。
5. 不作死就不會死 刪除 node_modules
node_modules挺大的，項目推送的時候放到包里很不方便，怎么辦，刪了吧，反正有package.json撐着，如果刪了的話，會發現，先前運行好好的npm run dev或者是npm run build都不能用了。。。
原因很簡單，這個文件夾里的內容都是項目依賴，里面安裝的插件都在package.json中有備份，所以再安裝回來的話在當前目錄下用指令npm install --save-dev，然后等待安裝。
6.1 安裝各種插件(全部用局部安裝) -- Gulp系列
高能預警
*** 這里安裝的是Gulp4，使用起來坑一堆，查了好久的資料呢 ***
- gulp => 安裝
- sass => css預處理
- browser-sync => 自動刷新瀏覽器
- watch => 配置監聽
首先，gulp是什么，為什么要用它？
...找文章超級麻煩的晚點再加上，目前先玩着吧，反正書上要裝，沒辦法，裝吧，據我所知很有用就是了。
npm i gulp --save-dev
局部安裝gulp插件，並且將依賴名寫入package.json文件中。
根目錄下創建一個gulpfile.js文件，用來配置gulp。。。
const gulp = require('gulp'); // 先引用文件，Java還要import一下包才能用其他的Java文件呢
這行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局環境中查找。找到之后就會賦值給gulp變量，然后我們就可以使用它了 (這段文字復制的...)
下面用gulp寫一個簡單的案例(上面的const gulp = require('gulp')也要帶上的):
gulp.task('Eve', function(){
console.log('...?');
});
運行這行代碼 (注意，還是工程目錄下)
gulp Eve
名字正是gulpfile.js中gulp.task后面的第一個字段Eve，一般開發的話不會這么做，只是告訴你這么寫程序已經可以運行起來了，引用某篇博客的一句話就是
Gulp任務通常都會比這難一丁點，就一丁點。通常會包含兩個特定的Gulp方法和一些列Gulp插件
模板什么的就不寫了，直接上代碼。。。
gulp-sass 對css進行預處理
-
安裝
npm i gulp-sass --save-dev -
配置
// 新插件？安裝，引用，配置，使用(盜用某篇博客的話)
const sass = require('gulp-sass');
gulp.task('sass', function(){
return (gulp.src('./src/css/*.scss')) // 輸入的文件
.pipe(sass()) // 安裝的依賴
.pipe(gulp.dest('./dist/css')) // 輸出地址
});
在這里我們可以新建點測試文件，在src/css/的目錄下創建兩個scss文件(scss好像和sass是同一種文件，不同的后綴。。)，然后在里面隨便寫點代碼，這里我寫了個testFile.scss的文件，內容如下
$height: 50px;
$width: percentage(5 / 7);
.test{
height: $height;
width: percentage(10 / 5);
background: aliceblue; // 個人超喜歡這個顏色的，還有aqua (注釋內容不會被編譯)
}
3.樣式都寫完了，不跑一遍試試么？
gulp sass (以后代碼就用引用的格式寫了)
如果想看看自己之前創建的所有任務(task)名稱的話，可以用以下方式查看
gulp --tasks (注意，有個
s哦~~)
如果沒有編譯出來的話，自己看報錯，然后百度哦~~
到這里gulp-sass就配置完了(我應該分成幾篇博客來寫的吧……)
關於 browser-sync ……算了，往后面看吧，文章坑了我好久
browser-sync能夠在文件保存的時候自動刷新瀏覽器(雖然配置了，但還是習慣地隨手敲一個ctrl + r。。。)，至於效果。。等自己配置完試試？
npm i browser-sync --save-dev
安裝本地運行環境的話，只能靠配置package.json的scripts才能看到結果(或者安裝全局，直接在cmd中執行)
上面那段話無視了吧，繞人。
在node項目中，browser-sync能與gulp很好的搭配起來，這里只介紹一個用gulp配置browser-sync的方法。
先在gulpfile.js中配置
// 老規矩，先引用文件
const browserSync = require('browser-sync');
gulp.task('browserSync', function(){
browserSync({
file: ['dist/**'], // 運行文件的路徑，這里指的是src/dist目錄下的所有文件
server: {
baseDir: './',
index: 'dist/index.html', // 進入入口(首頁)
},
port: 3001 // 使用的端口號
});
});
然后再dist目錄下創建一個index.html，內容隨便寫
運行測試
gulp browserSync
經過漫長的等待(我電腦垃圾)之后，跳出來一個頁面，如果左上角沒有一個cannot GET，頁面標題也不是Error的話，那么你大概就是成功了Orz
但是很快就會發現，修改里面任何文件，都不會讓瀏覽器自動刷新(我猜你是沒試)。。。這時候要涉及到gulp里面的一個api了。
利用gulp對內容監聽，修改時更新頁面
gulp有個監聽操作，能夠監聽事態變化，然后做出相對應的變化，變化可以用默認的，也可以覆蓋原有的默認方法，這里我們要監聽兩樣東西。
- 當sass文件修改的時候自動編譯sass
- 當輸出的(dist)文件夾里有文件變動的時候刷新瀏覽器
在這里我們再gulpfile.js里添加點監聽事件
這里有個gulp4的小坑，后面的方法要用gulp.series('sass' <= 方法名)
gulp.task('watch', function(){
// 第一個是要監聽的文件目錄，我這里寫的是src下css文件夾中的所有文件.
gulp.watch('./src/css/**', gulp.series('sass')); // 其中sass是之前定義的方法名
// 當文件修改的時候 刷新瀏覽器
gulp.watch('./dist/**', gulp.series('browserSync'));
});
然后，運行。。。
gulp watch
如果出現丟包需要安裝的話，不要跟着套路跑，，因為一下起來就沒完沒了了。。。。這個時候把之前裝的包(node_modules文件夾)刪了，然后npm install重新安裝
如果用的gulp3的話，這里的代碼使用應該會報錯，反之亦然，這時候復制報錯，然后丟網上搜一下就好了~~
到這里，自動刷新就配置完了，不難，對吧？反正我是搞了三天Orz
據說browser-sync還能設置代理~ 不過我是懶得寫了~~~
jade(Pug) html預處理
安裝，配置，使用，前面都看了的話，后面也就沒什么好贅述的了，直接上代碼。
npm install gulp-jade --save-dev
然后是gulpfile.js
const jade = require('gulp-jade');
gulp.task('jade', function(){
return gulp.src('./src/html/*.jade')
.pipe(jade()) // 完全抄前面的。。。
.pipe(gulp.dest('dist/html'))
});
然后在gulp.task('watch', function(){})里加上一句
gulp.watch('src/html/*.jade', gulp.series('jade'));
最終gulp.task('watch', function(){})里的內容是這樣的
gulp.task('watch', function(){
// 監聽html文件夾下的文件變化事件
gulp.watch('./src/**/*.jade', gulp.series('jade'));
// 監聽css文件夾下文件變化事件
gulp.watch('./src/css/**', gulp.series('sass'));
// 監聽文件變化事件，刷新服務器
gulp.watch('./dist/**', gulp.series('browserSync'));
})
到這里基本上結束了，簡單總結下好了Orz
1. 踩了無數坑下來，搭建出了一套簡單的webpack，你以為這樣就結束了么？下面的東西你都裝了么？
- ES6語法轉換 =>
babel-corebabel-loaderbabel-preset-envbabel-polyfillbabel-plugin-transform-runtime - 編譯css，自動添加前綴，抽取css到獨立文件 =>
mini-css-extract-plugincss-loaderstyle-loaderpostcss-loader - 復制並壓縮html文件 =>
html-webpack-pluginhtml-loader - dist的清理，打包前清理源目錄文件 =>
clean-webpack-plugin - assets的處理，靜態資源處理 =>
file-loader - development 模式下啟動服務器並實時刷新 =>
webpack-dev-server
以上列表內容從該文章抄來 => 該文章