nodejs中安裝webpack的簡單使用

一、介紹

1、什么是Webpack

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。

2、為什要使用WebPack

今的很多網頁其實可以看做是功能豐富的應用，它們擁有着復雜的JavaScript代碼和一大堆依賴包。為了簡化開發的復雜度，前端社區涌現出了很多好的實踐方法

a:模塊化，讓我們可以把復雜的程序細化為小的文件;

b:類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之后還能能裝換為JavaScript文件使瀏覽器可以識別；

c:scss，less等CSS預處理器

.........

這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求。

3、WebPack和Grunt以及Gulp相比有什么特性

其實Webpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之后可以自動替你完成這些任務。

Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。

優點：模塊化

在webpack看來一切都是模塊！這就是它不可不說的優點，包括你的JavaScript代碼，也包括CSS和fonts以及圖片等等等，只有通過合適的loaders，它們都可以被當做模塊被處理。

二、重要內容

1.1、CSS

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能,style-loader將所有的計算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

需要分別安裝：npm install --save-dev style-loader css-loader

1.2、CSS modules

在過去的一些年里，JavaScript通過一些新的語言特性，更好的工具以及更好的實踐方法（比如說模塊化）發展得非常迅速。模塊使得開發者把復雜的代碼轉化為小的，干凈的，依賴聲明明確的單元，且基於優化工具，依賴管理和加載管理可以自動完成。
不過前端的另外一部分，CSS發展就相對慢一些，大多的樣式表卻依舊是巨大且充滿了全局類名，這使得維護和修改都非常困難和復雜。

最近有一個叫做 CSS modules 的技術就意在把JS的模塊化思想帶入CSS中來，通過CSS模塊，所有的類名，動畫名默認都只作用於當前模塊。Webpack從一開始就對CSS模塊化提供了支持，在CSS loader中進行配置后，你所需要做的一切就是把”modules“傳遞都所需要的地方，然后就可以直接把CSS的類名傳遞到組件的代碼中，且這樣做只對當前組件有效，不必擔心在不同的模塊中具有相同的類名可能會造成的問題。具體的代碼如下

這樣相同的類名也不會互相污染

1.3、CSS預編譯

Sass 和 Less之類的預處理器是對原生CSS的拓展，它們允許你使用類似於variables, nesting, mixins, inheritance等不存在於CSS中的特性來寫CSS，CSS預處理器可以這些特殊類型的語句轉化為瀏覽器可識別的CSS語句，
你現在可能都已經熟悉了，在webpack里使用相關loaders進行配置就可以使用了，以下是常用的CSS 處理loaders

a:less-loader

b:sass-loader

c:stylus-loader

還有一個CSS處理平台-PostCSS，可以讓你用CSS事先更多功能，比如如何使用PostCSS，我們使用PostCSS來為CSS代碼自動添加適應不同瀏覽器的CSS前綴。

首先安裝postcss-loader 和 autoprefixer（自動添加前綴的插件）

npm install --save-dev postcss-loader autoprefixer

並在webpack配置文件中進行設置，只需要新建一個postcss關鍵字，並在里面申明依賴的插件，如下，現在你寫的css會自動根據Can i use里的數據添加不同前綴了。

2、webpack-pulgins

 

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。
Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這么來說，loaders是在打包構建過程中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操作單個文件，它直接對整個構建過程其作用。

 

Webpack有很多內置插件，同時也有很多第三方插件，可以讓我們完成更加豐富的功能。

1、如何使用插件？

要使用某個插件，我們需要通過npm安裝它，然后要做的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例（plugins是一個數組），我們添加了一個實現版權聲明的插件。如HtmlWebpackPugin插件，

該插件的作用是依據一個簡單的模板，幫你生成最終的Html5文件，這個文件中自動引用了你打包后的JS文件。每次編譯都在文件名中插入一個不同的哈希值。

//安裝

npm install --save-dev html-webpack-pugin

三、安裝使用方法
nodejs環境安裝好之后，
（淘寶npm cmd命令行輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org）

·安裝webpack和webpack-cli
cnpm install –save-dev webpack
cnpm install –save-dev webpack-cli

-------------------------------------------------------------------------------------
這里的參數–save是要保存到package.json中，dev是在開發時使用這個包，而生產環境中不使用。

開發環境and生產環境：
開發環境：在開發時需要的環境，這里指在開發時需要依賴的包。
生產環境：程序開發完成，開始運行后的環境，這里指要使項目運行，所需要的依賴包。
------------------------

pm install -d 就是 npm install --save-dev 安裝到開發環境 例如 gulp ，babel，webpack 一般都是輔助工具
npm insatll -s 就是npm install --save 安裝到生產環境 如 vue ,react 等
devDependencies：開發環境使用
dependencies：生產環境使用
例如：webpack，gulp等打包工具，這些都是我們開發階段使用的，代碼提交線上時，不需要這些工具，所以我們將它放入devDependencies即可，但是像jquery這類插件庫，是我們生產環境所使用的，所以如要放入dependencies，如果未將jquery安裝到dependencies，那么項目就可能報錯，無法運行，所以類似這種項目必須依賴的插件庫，我們則必須打入dependencies中

-------------------------------------------------------------------------------------------

·項目示例
1、切換到項目目錄：
直接進入d盤 ：  d:
cd D:\Program Files\nodejs\node_global\node_modules\webpack\jqueryDemo

2、手動打包,將入口main.js文件為public中的bundle.js ： webpack app/main.js -o public/bundle.js

3、通過配置文件進行打包
cnpm start
cnpm run dev



·錯誤記錄：
【1】WARNING in configuration
The 'mode' option has not been set, webpack will
is value. Set 'mode' option to 'development' or
for each environment.
You can also set it to 'none' to disable any def
://webpack.js.org/concepts/mode/

ERROR in multi ./app/main.js public/bundle.js
Module not found: Error: Can't resolve 'public/b
odejs\node_global\node_modules\webpack\jqueryDem
 @ multi ./app/main.js public/bundle.js main[1]
 
·錯誤原因：沒有設置webpack的模式，是生產還是開發（production or development）
·解決辦法：執行命令：webpack --mode=production或者webpack --mode=development
【2】
·ERROR in Entry module not found: Error: Can't resolve ' es\nodejs\node_global\node_modules\webpack\j
·錯誤原因：當前的webpack版本是最新的，原先的這個命令（webpack app/main.js public/bundle.js ）用不了，需更新。
·解決辦法：，命令更新為：webpack app/main.js -o public/bundle.js

【3】
'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序 或批處理文件。
處理方法：
將項目里的“node_modules”文件夾刪除，然后在cmd中cd到項目目錄，依次運行命令：npm install和npm run build，最后運行npm run dev后項目成功運行。


【4】
npm ERR! missing script: build

【5】
清理cache的命令：
npm cache verify



備注：
·cmd命令 【https://www.cnblogs.com/accumulater/p/7110811.html】
( 幾個簡單的cmd命令如“ipconfig /all”、“d:”、“dir”，這里多介紹一個電腦自動關機的方法，輸入命令“shutdown -s -t 3600”就代表3600秒后關機，也就是一個小時后電腦自動關機哦。 )
·linux命令 【http://www.cnblogs.com/yjd_hycf_space/p/7730690.html】

===
npm package.json屬性詳解
【https://www.cnblogs.com/tzyy/p/5193811.html】
===

========
npm webpack的命令需要和版本保持一致，否則不生效
========

=============
·webpack-dev-server 是基於node.js Express服務，它同時包含了一個基於 Socket.IO 輕量的運行時環境。
引用 webpack 和 webpack-dev-server 模塊，通過WebpackDevServer啟動服務，通過 HotModuleReplacementPlugin 插件啟動代碼自動編譯頁面自動刷新。這樣，當你修改了html、js或者樣式文件，頁面會自動編譯刷新。
【https://www.cnblogs.com/penghuwan/p/6941616.html】

==================

----------------------------------------------------------
總結：【https://www.jianshu.com/p/397df5dfd09c】
1.webpack在全局安裝， webpack-dev-server死活不兼容，根本跑不起來（說版本太低了，但是這怎么解決依舊沒有找到解決方案，有待解決）
結論：webpack還是局部安裝吧！

2.webpack在局部安裝，假設package.json 里面的name為：webpack，那很好又報錯了
將package.json 的name屬性修改為：webpackTest, 通過！
結論：package.json的name屬性不能跟webpack命令一樣

3.解決問題2后，輸入命令webpack，提示webpack command is not found

基於這情況，在package.json下，配置一下命令：

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "webpack"
},
在終端下，執行npm start，開始編譯，生成build文件夾
繼續配置webpack-dev-server，package.json入面的配置就不是像教程那樣寫了，應該為這樣

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "webpack",
   "dev": "webpack-dev-server --hot --inline"
}
在終端下，執行npm run dev，通過！！！！ 在瀏覽器里輸入localhost:8080, HelloWorld出現了！！！！！！


·Windows中目錄及文件路徑太長無法刪除的解決方法
【https://www.npmjs.com/package/windows-node-deps-deleter#readme】
導致目錄太深的原因就是用node中的node_modules引起的, 所以以毒攻毒, 用node解決
npm install -g windows-node-deps-deleter
wnddel dir1 <dir2 <... <dirN>>>

============================================================================================================================================================
【https://segmentfault.com/a/1190000012744818】
【https://webpack.docschina.org/configuration】
webpack.config.js的四個核心概念
示例：
var path = require('path'); #使用Node內置的path模塊，並在它前面加上__dirname這個全局變量。可以防止
不同操作系統之間的文件路徑問題，並且可以使用相對路徑按照預期工作。
var webpackConfig = {
    devtool:'inline-source-map', //開發錯誤提示，嵌入到源文件
    entry:{ },  //string | object | array ;這里應用程序開始執行；webpack開始打包
    output:{ },  //webpack 如何輸出結果的相關選項
    devServer:{ },  //開發服務器配置，
    module:{         //關於模塊配置
        rules:[]     //模塊規則（配置loader、解析器等選項）
    },
    plugins:plugins, //附加插件列表
}
module.exports = webpackConfig;

【參考文章】
【https://www.jianshu.com/p/42e11515c10f】-> 【https://www.cnblogs.com/xfshen/p/5942585.html】---推薦
【https://www.cnblogs.com/-walker/p/6056529.html】

官方API【https://www.webpackjs.com/concepts/】
【https://www.cnblogs.com/wymbk/p/6172208.html】
【https://segmentfault.com/a/1190000006178770】
【https://blog.csdn.net/henery_002/article/details/78016575】