nodejs中安裝webpack的簡單使用

1、介紹

一、什麼是Webpack

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

二、爲什要使用WebPack

今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法

a:模塊化，讓咱們能夠把複雜的程序細化爲小的文件;

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

c:scss，less等CSS預處理器

.........

這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是繁瑣的，這就爲WebPack類的工具的出現提供了需求。

三、WebPack和Grunt以及Gulp相比有什麼特性

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

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

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

優勢：模塊化

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

2、重要內容

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.二、CSS modules

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

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

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

1.三、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裏的數據添加不一樣前綴了。

二、webpack-pulgins

 

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。
Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，能夠這麼來講，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。

 

Webpack有不少內置插件，同時也有不少第三方插件，可讓咱們完成更加豐富的功能。

一、如何使用插件？

要使用某個插件，咱們須要經過npm安裝它，而後要作的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例（plugins是一個數組），咱們添加了一個實現版權聲明的插件。如HtmlWebpackPugin插件，

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

//安裝

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

3、安裝使用方法
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中

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

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

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

三、經過配置文件進行打包
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】---推薦
【http://www.javashuo.com/article/p-vqwgctuz-hg.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】