前言:

拿到一個(gè)項(xiàng)目 , 生成默認(rèn)package.json筏勒，可以執(zhí)行npm init -y
package.json中dependencies和devDependencies的部分都會(huì)被安裝垒迂，區(qū)別在于前者用于生產(chǎn)環(huán)境擦耀，后者用于開發(fā)環(huán)境
-g 表示全局安裝呵俏，通常用于安裝腳手架等工具
-save(-S) 表示本地安裝畔师，會(huì)被加至dependencies部分 eg: npm i jquery -S 安裝jquery包
-save-dev(-D) 表示本地安裝薄霜，會(huì)被加至devDependencies部分 eg: cnpm i webpack-dev-server -D (實(shí)現(xiàn)自動(dòng)打包編譯)
什么都不加也會(huì)安裝违诗，但是不會(huì)加至package.json中

開始:

拿到一個(gè)項(xiàng)目之后:::

• 第一步:
  
  package-json.png

新建文件夾, 用 npm 的包管理工具 管理起來 ( 命令行輸入 npm init -y ) 文件里出現(xiàn) package.json
如果文件名有 中文 , 命令行輸入 npm init 不需要 -y 回車 會(huì)重新讓寫一個(gè)名字

• 第二步:
  創(chuàng)建兩個(gè) 文件夾 src ( 存放項(xiàng)目源代碼的 ) 和 dist ( 項(xiàng)目打包之后輸出的文件放到dist里邊 )
  1. 在src 里 新建 index.html 項(xiàng)目首頁
  2. 然后 在src 里 建一個(gè) main.js , 這是項(xiàng)目的 JS 入口文件
  在 main.js 先console.log 一句話 接下來我們要 嘗試著 把main.js 打包一下 然后 引入到 index.html 里面 ,看我們這個(gè) 能不能正常 打包 ( 命令行輸入 webpack ./src/main.js ./dist/bundle.js ) → dist文件夾 有了 bundle.js
  3. 如果 我們把 dist文件夾 刪掉 命令行運(yùn)行 webpack ./src/main.js ./dist/bundle.js 也會(huì)自動(dòng)生成 dist文件夾
  4. 在 index.html 用 script標(biāo)簽 引入 ../dist/bundle.js 運(yùn)行瀏覽器右鍵查看 console.log出了 你好

  每次修改了一些代碼 都需要手動(dòng)重新運(yùn)行  webpack ./src/main.js ./dist/bundle.js,體驗(yàn)不好
        我們想要  自動(dòng)打包  怎么辦呢?
  

  • 第一步:
    安裝工具 , ( 命令行 輸入 cnpm i webpack-dev-server@2.9.7 -D ) 實(shí)現(xiàn)自動(dòng)打包編譯的 功能
  • 第二步:
    裝完之后 , 需要在 項(xiàng)目根目錄新建一個(gè) webpack的 配置文件 叫 : webpack.config.js ( 裝完之后, 命令行 提示 dev-server 依賴于 webpack, 需要項(xiàng)目本地 安裝webpack )
  • 第三步:
    安裝本地 webpack , ( 命令行輸入 cnpm i webpack@3.10.0 -D ) 此處 ,安裝了指定webpack版本 , 避免與webpack-dev-server沖突

  寫一下 配置文件 在webpack.config.js中

  1. const path = require('path') //由于 webpack是 基于node進(jìn)行構(gòu)建的 , 所以, webpack的配置文件中 ,任何 合法的 node 代碼 都是支持的
  2. 向外 暴露 一個(gè) 配置對象:
     module.exports = { } 當(dāng)以命令行 形式 運(yùn)行 webpack 或 webpack-dev-server 的時(shí)候, 工具會(huì)發(fā)現(xiàn) , 我們并沒有提供 要打包的 文件的 入口 和 出口文件 , 此時(shí) ,他會(huì)檢查項(xiàng)目根目錄中的 配置文件 , 并 讀取這個(gè)文件 , 就拿到了 導(dǎo)出的 這個(gè) 配置對象 , 然后 根據(jù)這個(gè) 對象 , 進(jìn)行打包 構(gòu)建
     (1.) 指定入口文件 :entry: path.join(__dirname,'./src/main.js')
     (2.) 通過 output 指定 輸出選項(xiàng) output: { }

    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
  

  3. 配置完成后 , 命令行 輸入 webpack 打包 , 此時(shí)并沒有實(shí)現(xiàn) 實(shí)時(shí)打包
  4. 如果 我們要 利用 dev-server 這個(gè) 工具 實(shí)時(shí)打包的話 , 需要在 package.json里 添加一個(gè) 腳本 , 在
     scripts: { } 里 再添加一個(gè)指令: "dev": "webpack-dev-server"

  • webpack-dev-server的配置參數(shù)

webpack-dev-server配置參數(shù).png

     (1.)  自動(dòng)打開瀏覽器  --open"  
     (2.)  設(shè)置啟動(dòng)時(shí)的默認(rèn)端口  --port 3000
     (3.)  指定托管的 根目錄   --contentBase src
     (4.)  啟動(dòng)熱更新   --hot

5. 命令行 輸入 npm run dev 右鍵審查 報(bào)錯(cuò) 頁面里的 bundle.js 路徑不對
   第一種: 把頁面里的 ../dist/bundle.js 路徑 改為 : /bundle.js
   第二種: 注釋掉 <script type="text/javascript" src="/bundle.js"></script>
   用 html-webpack-plugin來實(shí)現(xiàn) 他為我們 在內(nèi)存中生成 一份 一模一樣的頁面 , 并且會(huì) 自動(dòng) 把 bundle.js 注入到 頁面底部 我們不需要再手動(dòng) 處理 bundle.js 的引用路徑
6. 命令行 安裝 cnpm i html-webpack-plugin -D
7. 在 配置文件中 , 引入 const htmlWebpackPlugin = require('html-webpack-plugin')
8. 插件引入進(jìn)來了 , 如果要 配置插件 , 需要在 導(dǎo)出的 對象中, 掛載一個(gè) plugins 節(jié)點(diǎn) , plugins是一個(gè)數(shù)組, 和output平級 , 配置 一個(gè) plugins:[ ] <plugins是所有 webpack 插件的 配置節(jié)點(diǎn)>, 然后 new一下 htmlWebpackPlugin

plugins: [
    new htmlWebpackPlugin({ 
        template: path.join(__dirname,'./src/index.html'), 
        filename: 'index.html'
    })
]

***** 如果 想要 引入 css 樣式:

新建 index.css

1. 我們可以在index.html link一下css文件, 但是這樣會(huì)發(fā)起 請求 ; ( 不贊同這種方式 )
2. 我們可以在 main.js 里 , import 一下 eg: import './css/index.css' 保存 會(huì)報(bào)錯(cuò), 提示我們 webpack 處理不了這種類型的文件 , 需要我們 安裝 loader
3. 安裝 處理樣式表的 loader : ( 命令行輸入 cnpm i style-loader css-loader -D )
4. 然后 我們需要 添加一下 配置節(jié)點(diǎn) module 節(jié)點(diǎn) module: { rules: [ 處理css文件的loader ] }
   { test: /\.css$/, use: ['style-loader', 'css-loader'] } //處理 css文件的 loader

***** 如果 想要 引入 less 文件:

命令行安裝 cnpm i less-loader less -D
{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] } //處理 less文件的 loader

***** 如果 想要 引入 scss 文件:

命令行安裝 cnpm i sass-loader node-sass -D
{ test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader'] } //處理 scss文件的 loader

若我們 想在 css 里 寫一個(gè) 背景圖片 eg: background: url(../images/cat2.jpg) no-repeat;
保存 報(bào)錯(cuò) , 也就是說 默認(rèn)情況下 , webpack 無法幫我們處理 css 文件中的 url 地址 不管是 圖片 還是 字體庫 , 只要是 url 地址 都處理不了

解決辦法:

• 第一步:
  安裝 url-loader , 同時(shí) url-loader 也需要依賴于 它內(nèi)部的 file-loader
  ( 命令行 輸入 cnpm i url-loader file-loader -D )
• 第二步:
  在配置文件中 ,配置一下 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' } //處理 圖片路徑的 loader
• 第三步:
  npm run dev 運(yùn)行 右鍵審查 發(fā)現(xiàn) background: url 地址里 自動(dòng)轉(zhuǎn)成了 base64 格式的 背景圖, 這樣可以避免多次請求 , 但是 我們有時(shí)候, 一些小圖可以轉(zhuǎn)成 base64的 , 有些大圖 不想讓轉(zhuǎn)成 base64格式 怎么辦呢???
• 第四步:
  在配置文件中 , 找到 url-loader 加參數(shù) , 和 url地址傳參一樣 url-loader 有一個(gè)固定的 參數(shù) limit , 后邊跟的是 圖片的 字節(jié)數(shù)
  eg: { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=19898' }, //處理 圖片路徑的 loader
  1.) 如果limit 后邊給定的值 , 大于圖片本身的字節(jié)數(shù)時(shí), 會(huì)把圖片進(jìn)行base64編碼
  2.) 如果limit 后邊給定的值 , 等于或者小于圖片本身的字節(jié)數(shù)時(shí), 則不會(huì) 轉(zhuǎn)為 base64的字符串, 但是 圖片路徑為 數(shù)字和字母組成的 避免重復(fù)的名字 , 如果不想改名, 我們傳的什么名字的圖片, 打包完還要那個(gè)名字的 , 怎么辦呢?
• 第五步:
  配置文件url-loader 傳入第二個(gè)參數(shù) name=[name].[ext]
  eg: { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=19898&name=[name].[ext]' }, //處理 圖片路徑的 loader
  [name]是指: 之前是什么名兒, 還是什么名 [ext] 打包前是什么后綴名, 還是什么后綴名
  • 如果src 里 建立兩個(gè)文件夾: images images2 里邊各有一張 圖片名 cat.jpg 的 圖片 此時(shí), 瀏覽器里 兩個(gè)div的背景圖 會(huì)顯示同一張cat.jpg的圖片 因?yàn)樗麄兊拿忠粯? 為避免這種情況 我們可以在 [name] 前再加一個(gè) 參數(shù) 哈希值
    eg: { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=19898&name=[hash:8]-[name].[ext]' }, //處理 圖片路徑的 loader
    [hash:8] 表示 要截取哈希的前8位放到圖片名字前, 哈希值最大可以設(shè)置32位

***** 針對處理一些更高級的 ES6與ES7語法:

在 webpack 中 , 默認(rèn)只能處理 一部分 ES6的 新語法 , 一些 更高級的 ES6語法 或者 ES7語法 , webpack是處理不了的 , 這時(shí)候 , 就需要 借助于 第三方 loader 來幫助 webpack 處理這些 高級的 語法 , 當(dāng) 第三方loader 把 高級語法 轉(zhuǎn)為 低級的語法之后 , 會(huì)把結(jié)果 交給 webpack 去打包 到 bundle.js 中

解決方法:

通過Babel , 可以 幫我們 將 高級的 語法轉(zhuǎn)為 低級的 語法

• 1. 在 webpack 中 , 可以運(yùn)行 如下的 兩套命令 , 安裝 兩套包 , 去 安裝 Babel 相關(guān)的 loader功能
  • 1.1 第一套包: cnpm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D ;
  • 1.2 第二套包: cnpm i babel-preset-env babel-preset-stage-0 -D ;
• 2. 打開 webpack 的 配置文件, 在 module 節(jié)點(diǎn)下的 rules 數(shù)組中 , 添加 一個(gè) 新的 匹配規(guī)則

  • 2.1 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

  • 2.2 注意: 在配置 babel 的 loader 規(guī)則的時(shí)候 , 必須把 node_modules 目錄, 通過 exclude 選項(xiàng) 排除掉
    原因有 :

    • 2.2.1 如果 不排除 node_modules , 則 babel 會(huì)把 node_modules 中 所有的 第三方 JS 文件 , 都打包 編譯 , 這樣 , 會(huì)非常 消耗 CPU , 同時(shí) , 打包速度 非常慢 ;
    • 2.2.2 哪怕, 最終 babel 把 所有的 node_modules 中的 JS 轉(zhuǎn)換完畢了 , 但是 項(xiàng)目也 無法正常 運(yùn)行
• 3. 在項(xiàng)目的 根目錄中 , 新建一個(gè) 叫做 .babelrc 的 Babel 配置文件, 這個(gè) 配置文件 屬于 JSON格式 , 所以 在寫 .babelrc 配置的 時(shí)候 , 必須符合 JSON 語法規(guī)范 : 不能寫注釋 , 字符串 必須用 雙引號
  • 3.1 在 .babelrc 寫如下的 配置: presets: 可以翻譯成 語法的意思 plugins: 插件
    
    babelrc文件.png

        {
            "presets": ["env", "stage-0"],
            "plugins": ["transform-runtime"]
        }

***** 默認(rèn), webpack 無法打包 .vue 文件 , 需要安裝相關(guān)的 loader:

1. cnpm i vue-loader vue-template-compiler -D
2. 在配置文件中 , 新增 loader 配置項(xiàng) { test:/\.vue$/, use: 'vue-loader' }

***** 總結(jié)梳理: webpack中 如何使用 vue

1. 安裝 vue 的包: cnpm i vue -S
2. 由于 在 webpack中 , 推薦使用 .vue 這個(gè)組件模板文件定義組件 , 所以 , 需要安裝 能解析這種文件 的 loader , cnpm i vue-loader vue-template-compiler -D
   3.在 main.js 中 , 導(dǎo)入 vue 模塊 import Vue from 'vue'
3. 定義一個(gè) .vue 結(jié)尾的 組件, 其中 組件由三部分組成 : template script style
4. 使用 import 導(dǎo)入這個(gè)組件 import login from './login.vue'
5. 創(chuàng)建 vm實(shí)例 var vm = new Vue({ el: '#app', render: c => c(login) })
6. 在頁面中 創(chuàng)建 一個(gè) id 為 app 的 div元素 , 作為我們 vm 實(shí)例 要控制 的 區(qū)域