前端學習筆記-webpack學習

webpack三種哈希值

• hash：跟整個項目的構建相關，構建生成的文件hash值都是同樣的，只要項目裏有文件更改，整個項目構建的hash值都會更改。（通常不用）
• chunkhash：根據不一樣的入口文件(Entry)進行依賴文件解析、構建對應的chunk，生成對應的hash值。
• contenthash：由文件內容產生的hash值，內容不一樣產生的contenthash值也不同。

__dirname等

• __dirname，表示當前正在執行的js所在的目錄;
• __filename(表示當前正在執行的js的完整路徑);
• path.join('/目錄1', '../', '目錄3/目錄4', '目錄5')；合併目錄，最後的結果是"\目錄3\目錄4\目錄5"；
• process.cwd()是指當前node命令執行時所在的文件夾目錄；
• path.extname(filename);//獲取後綴名

css modules

css modules是一種解決css命名空間的方案，做爲scope CSS的替代方案

index.html裏的插值

• <%= VALUE %> 用來作不轉義插值；
• <%- VALUE %> 用來作 HTML 轉義插值；若是VALUE裏有<>這樣須要轉義的字符時用;
• <% expression %> 用來描述 JavaScript 流程控制，expression便是js語句，能夠有if else等；

env環境變量

• .env # 在全部的環境中被載入
• .env.local # 在全部的環境中被載入，但會被 git 忽略
• .env.[mode] # 只在指定的模式中被載入
• .env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
• 在webpack.config.js裏或者vue.config.js裏的chainWebpack的config.plugin('define').tap裏添加的變量，擁有更高的優先級，不會被.env重寫
• mode能夠是自定義的模式，配合vue-cli-service build --mode [mode]命令，能夠實現不一樣模式下有不一樣的環境變量。須要在.env.mode文件裏指定相應的NODE_ENV值，如NODE_ENV = 'production'，

不一樣模式不一樣的環境變量

• 命令行傳參，如npm run serve --aaa。在vue.config.js裏取值如let tempO = JSON.parse(process.env.npm_config_argv).original[2];或者const argArr = process.argv.splice(2);
• 自定義npm命令如 "local": "set VUE_APP_AAA=aaa && set BBB=qwer && npm run serve"，在mac的shell裏對應寫法是 "local": "VUE_APP_AAA=aaa set BBB=qwer npm run serve"；
• 設置不一樣的.env.[mode]文件如.env.staging，而後自定義npm命令"build:stage": "vue-cli-service build --mode staging"

這些方法也能夠有以下的使用技巧

"bn": "npm run build && node replace",
"serve": "node init && vue-cli-service serve",
複製代碼

判斷是否是生產環境

process.env.NODE_ENV === 'production'

本地預覽dist打包文件

本地預覽 dist 目錄須要啓動一個 HTTP 服務器來訪問 (除非你已經將 publicPath 配置爲了一個相對的值)，因此以 file:// 協議直接打開 dist/index.html 是不會工做的。 在本地預覽生產環境構建最簡單的方式就是使用一個 Node.js 靜態文件服務器，例如 serve： npm install -g serve

一些經常使用的修改方法

設置一個scss公用文件

在vue.config.js裏

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: "@import '~@/assets/style/public.scss';"
            }
        }
    }
}
複製代碼

若是聲明瞭一個'style',如alias: { 'style': resolve('static/style') } 在使用時，若是直接@import "style/mixin.scss";是會報錯的，須要改成@import "~style/mixin.scss";css相關文件須要特殊處理

經過chainWebpack 調整內聯文件的大小限制

例如，下列代碼會將其限制設置爲 10kb

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
    .rule('images')
    .use('url-loader')
    .loader('url-loader')
    .tap(options => Object.assign(options, { limit: 10240 }))
  }
}
複製代碼

經過chainWebpack 添加新的環境變量

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
        let ori = args[0]['process.env'];
        args[0]['process.env'] = {
            ...ori,
            AA: JSON.stringify('<span>cscs</span>'),
            BB: 999,
            VUE_APP_UU: JSON.stringify('ppooii'),
            VUE_APP_UO: JSON.stringify('v_uuu'),
        }
        return args;
    });
  }
}
複製代碼

經過chainWebpack 添加新的js loader

// vue.config.js
const path = require('path');
module.exports = {
  chainWebpack: config => {
    config.module.rule('js')
    .use('selfjs')
    .loader(path.resolve(__dirname, 'loader/selfjs.js'))
    .end()
  }
}
複製代碼

loader下的selfjs.js文件內容：

module.exports = function loader(source) {
    console.log(source)
    source = source + ';;;;;;;;';
    // return `export default ${ JSON.stringify(source) }`; // 返回值
    return source; // 返回值
    // return source; // 返回值
};
複製代碼

對應的loader或plugin名稱，能夠在output.js裏查看到

webpack插件介紹

名稱	做用	說明
compression-webpack-plugin	gzip壓縮插件
webpack-bundle-analyzer	包分析工具	cross-env須要再安裝
webpack-theme-color-replacer	全局修改主題顏色的插件	通常後臺系統用
webpack-obfuscator	代碼混淆
prerender-spa-plugin	處理單頁面應用的seo，預渲染	配合vue-meta-info使用更好
copy-webpack-plugin	將單個文件或整個目錄複製到構建目錄
webpack-merge	合併webapck配置項
html-webpack-plugin	處理html文件
clean-webpack-plugin	清理以前的打包目錄
mini-css-extract-plugin	分離打包css的插件，由於默認css會被打包到js文件裏	extract-text-webpack-plugin已經不建議使用了
babel-loader	處理js文件	配合@babel/core,@babel/preset-env
postcss-loader	處理css的瀏覽器兼容，好比加-webkit-前綴等	配合autoprefixer

不要使用cnpm

設置npm鏡像

• npm config set registry registry.npm.taobao.org

• npm config set disturl npm.taobao.org/dist

• npm config set electron_mirror npm.taobao.org/mirrors/ele…

• npm config set sass_binary_site npm.taobao.org/mirrors/nod…

• npm config set phantomjs_cdnurl npm.taobao.org/mirrors/pha…

• package.json文件只能鎖定大版本，也就是版本號的第一位，並不能鎖定後面的小版本，在npm 5時添加package-lock.json。

• npm i會根據package-lock.json裏的內容來處理和安裝依賴而不是package.json。cnpm i不受package-lock.json影響，只會根據package.json進行下載。

• npm i 會生成package-lock.json，若是刪除了，再從新npm i會生成package-lock.json。cnpm i是不會生成package-lock.json的。

• cnpm i xxx@xxx不會跟新到package-lock.json中去。npm i xxx@xxx會跟新到package-lock.json中去。

"dependencies": {
  "bluebird": "^3.3.4",
  "body-parser": "~1.15.2"
}
複製代碼

bluebird的版本號：^3.3.4 body-parse的版本號：~1.15.2

庫的版本號詳解(^和~區別)

• 波浪符號（~）：他會更新到當前minor version（也就是中間的那位數字）中最新的版本。放到咱們的例子中就是：body-parser:~1.15.2，這個庫會去匹配更新到1.15.x的最新版本，若是出了一個新的版本爲1.16.0，則不會自動升級。波浪符號是曾經npm安裝時候的默認符號，如今已經變爲了插入符號。
• 插入符號（^）：這個符號就顯得很是的靈活了，他將會把當前庫的版本更新到當前major version（也就是第一位數字）中最新的版本。放到咱們的例子中就是：bluebird:^3.3.4，這個庫會去匹配3.x.x中最新的版本，可是他不會自動更新到4.0.0。

npm和yarn命令對比

npm	yarn
npm install	yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm install react --save-dev	yarn add react --dev
npm update --save	npm update --save

npm經常使用命令

命令	含義	說明
npm config ls	查看你的 npm 配置
npm i -S packname	安裝項目（運行時、發佈到生產環境時）依賴；例：vue。對應package.json中的dependencies	npm install --save packname
npm i -D packname	安裝工程構建（開發時、「打包」時）依賴；如babel-loader。對應package.json中的devDependencies	npm install --save-dev packname
npm list -g --depth 0	查看全部已安裝的全局包
npx vue-cli-service help	查看cli全部可用的命令	vue-cli
npx vue-cli-service help build	查看npm run build命令全部可選的參數	vue-cli
npx vue-cli-service help inspect	查看vue inspect全部可選的參數	vue-cli
vue inspect > output.js	將config輸出至同目錄的output.js文件	vue-cli
vue inspect --plugins	查看全部使用的plugins	vue-cli
vue-cli-service serve --open	啓動時自動打開瀏覽器	vue-cli package.json
vue-cli-service build --report	生成 report.html 以幫助分析包內容	vue-cli package.json
vue-cli-service build --report-json	生成 report.json 以幫助分析包內容	vue-cli package.json
vue-cli-service build --modern	會產生兩個應用的版本：一個現代版的包，面向支持 ES modules 的現代瀏覽器，另外一箇舊版的包，面向不支持的舊瀏覽器,舊包帶有legacy標誌	vue-cli package.json
set NODE_ENV=production && set AAA=123 && npm run build	設置一些環境變量再執行一個命令,mac裏的寫法會不一樣NODE_ENV=production 空格 xxxx	vue-cli package.json
vue-cli-service build --mode cscs	用.env.cscs裏的環境變量打包一個內容，和npm run build --mode cscs不等價	vue-cli package.json

更多cli命令請參考：cli.vuejs.org/zh/guide/cl…

參考：2020年了,再不會webpack敲得代碼就不香了(近萬字實戰)