【webpack4.0】---webpack的基本使用(一)

 

1、初識webpack

    

一、什麼是webpack?

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

 

二、webpack工做的方式

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

 

三、做用

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

    打包：能夠把多個Javascript文件打包成一個文件，減小服務器壓力和下載帶寬。

    轉換：把拓展語言轉換成爲普通的JavaScript，讓瀏覽器順利運行。

    優化：前端變的愈來愈複雜後，性能也會遇到問題，而WebPack也開始肩負起了優化

    和提高性能的責任。

 

2、webpack與gulp、Grunt的區別

 

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

 

3、webpack的打包流程

 

    webpack是創建在module之上進行打包的

 

4、webpack基本配置

 

 

 

5、webpack4.0的安裝

    

    一、全局安裝

cnpm install webpack webpack-cli -g

 

注意：不建議全局安裝。

 

    二、局部安裝

npm init //初始化項目​cnpm install webpack webpack-cli -D // -D等價於--save-dev

    

    三、webpack-cli的做用

        可讓咱們在命令行中正確的使用webpack  以及npx webpack 等命令 若是不安            裝則沒法使用

 

    四、文件編譯

npx webpack index.js

    

    五、npx

    npx :會幫助咱們在當前目錄下面的node_modules包中找到webpack進行使用

    

npx webpack -v //查看webpack版本號​npx info webpack //查看webpack以往的一些版本號​npx webpack <文件名稱> //文件編譯

 

6、預熱：文件編譯

 

    一、webpack默認是基於webpack.config.js進行打包的，若是須要指定其餘文件名稱

         進行打包能夠按照以下這樣書寫

npx webpack --config <文件名稱>

    

    二、npm scripts

       若是在npm scripts中使用webpack的狀況下會優先在工程目錄下面的                               node_modules中找相關的依賴

 

        若是咱們的編譯命令過於複雜那麼咱們能夠在package.json中的scripts中進行簡化

        配置

 

{ "name": "myapp", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }}

 

        運行命令的時候只須要npm run <命令名稱便可>

 

    三、webpack打包環境

module.exports = { mode:"production" //生產環境 model:"development"//開發環境}

 

    

    四、預熱打包配置

        一、npm init -y 生成一個node包

        二、局部安裝webpack

        三、創建webpack.config.js

        四、配置webpack.config文件

output:{ //佔位符 知足線上地址的需求 publicPath:'html://cdn.com/'}

 

7、什麼是開發環境、測試環境、生產環境

    一、開發環境：項目尚且在編碼階段，咱們的代碼通常在開發環境中 不會在生產環

     境中，生產環境組成：操做系統 ，web服務器 ，語言環境。  php 。 數據庫 等等

 

    2：測試環境：項目完成測試，修改bug階段

 

    3：生產環境：項目數據前端後臺已經跑通，部署在阿里雲上以後，有客戶使用，

    訪問，就是網站正式運行了。

 

三個環境也能夠說是系統開發的三個階段：開發->測試->上線

 

    4：--save && --save-dev的區別

      可分別將依賴（插件）記錄到package.json中的dependencies和                                  devDependencies    下面。

 

    dependencies下記錄的是項目在運行時必須依賴的插件，常見的例如react jquery         等即及時項目打包好了、上線了，這些也是須要用的，不然程序沒法正常執行

 

    devDependencies下記錄的是項目在開發過程當中使用的插件，一旦項目打包發佈、          上線了以後，devDependencies中安裝的東西就都沒有用了

​

    若是模塊是在開發環境中使用，那麼咱們安裝依賴的時候須要--dev

 

飛機票：https://mp.weixin.qq.com/s/g6tUSLy0f40pmFnfO3QykA