1. 安裝nodejs
   我的安裝目錄為默認安裝路徑，也就是 C:\Program Files\nodejs
   這里的安裝路徑對于后面的配置環(huán)境變量有很大的關(guān)系，請記住
   配置環(huán)境變量。
   可以參考https://blog.csdn.net/henery_002/article/details/78016575

2. 用命令行來檢查是否安裝成功
   node -v
   npm -v
   成功安裝則會出現(xiàn)相對應的版本號

安裝成功.png

3. 在安裝路徑下，我們可以看到有這樣的文件存在

   
   
   文件.png
   
   

   我們自己手動新建兩個文件夾，分別是：

• node_global 全局包目錄

• node_cache 緩存目錄
  將對應的路徑加入環(huán)境變量中，上述鏈接有詳細說明，這里不再贅述

  
  
  用戶path.png
  
  

  其實我們這里只要加入C:\Program Files\nodejs\node_global就行了
  另外一個是系統(tǒng)自己生成的，看上圖

系統(tǒng)NODE_PATH.png

添加全局包目錄所在路徑，看上圖

添加屬性.png

在系統(tǒng)變量的Path 下面添加安裝路徑，看上圖

4. 對應操作結(jié)束之后，發(fā)現(xiàn)打入 npm install express -g并不能安裝
   出現(xiàn)了下面的錯誤

   
   
   image.png
   
   

   最后終于在網(wǎng)上尋求到了答案，發(fā)現(xiàn)安裝這個時候的命令行窗口必須用管理員身份運行才可以進行安裝（win10在桌面左下角搜索欄輸入”cmd"出現(xiàn)下面這個）

   
   
   命令提示.png
   
   鼠標右鍵管理員身份運行即可。
   可以發(fā)現(xiàn)管理員身份打開命令提示符的時候是C：\Windows\system32>...

管理員身份安裝.png

安裝完之后要在命令行里面看看版本號
如果可以看，則說明配置沒有問題
express有點例外

初始化npm.png

得先定義為全局變量.png

在這里最好指定版本，如果是npm install webpack -g是直接安裝最新版本的，我在這里安裝了最新版本，在下面打包的時候就踩坑了。
安裝的時候應該輸入這句：

        npm install webpack@3.5.3 -g

在對應的目錄下面用--save-dev 可以在本地生成一個json文件
所以要先進入那個文件夾
生成之后就可以在這個文件夾進行相關(guān)操作了

C:\Windows\system32>cd C:\webpack\webpack-test

C:\webpack\webpack-test>npm install webpack --save-dev

目錄中的webpack.png

但是出現(xiàn)了問題：webpack新版不能直接使用webpack這個命令，已經(jīng)分離到了webpack-cli之中。但四使用webpack-cli還是不能使用，有很多坑。采用降級，我使用了3.5.3版，這個版本是好的?？梢灾苯佑脀ebpack命令。

所以我就把剛剛的卸載了，安裝了指定版本的

    npm uninstall webpack -g

    npm install webpack@3.5.3 -g

再次安裝webpack.png

這樣的話webpack命令就能夠直接用了。
進行打包

    webpack hello.js hello.bundle.js
    
   // 將hello.js打包成hello.bundle.js

打包：
記得要在你的打包的文件的那個路徑下面
直接在命令行輸入
webpack
就完成了

image.png

打包js文件.png

圖片第二部分有兩個模塊，是因為在hello.js中引用了這個world.js，所以一起打包了。

• 加載css文件進去的時候要注意，必須先安裝style-loader,css-loader，使得css文件被引用之前先被css-load處理，并且css文件可以生效，這樣可以正確的被webpack進行打包

安裝css-loader.png

引入css文件.png

新建一個html文件引入hello.bundle.js(跟平常引入js文件一樣）
每次修改js，css文件之后都要用 webpack命令重新打包。也可以用命令自動更新（ --watch)

webpack hello.js hello.bundle.js --watch

這樣的話修改之后就不用命令行打包了

用cnpm(淘寶鏡像）代替npm

1.png

cnpm代替npm.png

安裝指定的依賴：

格式： cnpm install 包名稱
如下：

    cnpm install babel-polyfill

也可以先在package.json文件里面先寫好要安裝的依賴包和版本
比如
"babel-polyfill":"^6.0.0"
然后再在命令行里面執(zhí)行
cnpm install

關(guān)于ｗｅｂｐａｃｋ的配置

自己新建一個webpack.config.js文件
在里面進行入口文件和輸出文件的設置

    const path = require("path")  //定義一個路徑，這個是一定要寫的，可以不用管他,就當作是我們這一整個webpack項目的位置

    module.exports={

    entry:path.join(__dirname,"src/script/main.js"),  //設置了程序的入口.就在這個項目src下面的script下面的main.js,注意dirname前面是__

    output:{

    filename:"bundle.js",    //輸出的文件名為bundle.js

    path:path.join(__dirname,"dist")     //設置了輸出文件名的路徑，在本項目的dist文件夾下面，沒有的話webpack會自己建的
     }
  }
    //module.exports就要要想外界暴露的部分，外面的人可以根據(jù)這個來進行操作

簡而言之，構(gòu)建一個ｗｅｂｐａｃｋ應用的步驟如下：
１.　新建一個文件夾，這里我給他起個名字叫　web
２.　在web的路徑下用命令行
　　cnpm install webpack --save-dev　　／／我已經(jīng)用淘寶鏡像了ｃｎｐｍ
３.　自己新建ｗｅｂｐａｃｋ．ｃｏｎｆｉｇ．ｊｓ定義入口和出口文件
４.　弄個ｊｓ文件什么的打包
在web的路徑下用命令行
　　　webpack
就可以了

打包出來的ｂｕｎｄｌｅ．ｊｓ為什么有那么多亂七八糟的內(nèi)容？
只要是為了封裝ｊｓ，使其支持ｃｏｍｍｏｎｊｓ的模塊化
ｃｏｍｍｏｎｊｓ是要依賴于ｎｏｄｅｊｓ?。鳎澹猓穑幔悖氲?/p>

如何用webpack壓縮js代碼

1. 首先在webpack.config.js中引入

    const uglify = require('uglifyjs-webpack-plugin');
   

2.然后在entry和output后面加上

  plugins:[
    new uglify()
 ]

image.png

然后再執(zhí)行“webpack”命令編譯一下

image.png

被壓縮啦

webpack都做了哪些事情？

模塊化
打包依賴
webpack支持commonjs,如果沒有模塊化，用<script>標簽引入，我們要完全搞清楚每個模塊之間的依賴關(guān)系，要保證你依賴的js文件在你這個文件的前面，搞錯一個依賴關(guān)系就完蛋，而且要定義很多全局變量，會造成全局變量污染。
webpack的理念就是一切皆模塊，把那一大堆css,js在我的一個總?cè)肟谖募equire引入，剩下的事情webpack會自動處理，包括所有模塊的前后依賴關(guān)系去下載啊處理

壓縮Js代碼
先了解一下Webpack從構(gòu)建到輸出文件結(jié)果的過程：
1.解析配置參數(shù)，合并從shell傳入和webpack.config.js文件的配置信息，輸出最終的配置信息
2.注冊配置中的插件，好讓插件監(jiān)聽webpack構(gòu)建生命周期中的事件節(jié)點，做出對應的反應
3.解析配置文件中entry入口文件，并找出每個文件依賴的文件，遞歸下去
4.在遞歸每個文件的過程中，根據(jù)文件類型和配置文件中l(wèi)oader找出相對應的loader對文件進行轉(zhuǎn)換
5.遞歸結(jié)束之后得到每個文件最終的結(jié)果，根據(jù)entry配置生成代碼chunk
6.輸出所有chunk到文件系統(tǒng)

windows怎么卸載cnpm？
npm uninstall cnpm -g

Npm常見問題

https://blog.csdn.net/ribmusic/article/details/80508748
自從在公司經(jīng)歷過莫名其妙的拋出錯誤后
自己的電腦也出現(xiàn)了問題，難道是因為自己拷了那兩個文件過去？？？？

image.png

image.png