前端學習筆記-webpack學習

時間  2021-08-12
標籤 css html vue node react webpack git web vue-cli shell 欄目 CSS 简体版
原文   原文鏈接

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的替代方案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"

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

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

判斷是否是生產環境

process.env.NODE_ENV === 'production'vue

本地預覽dist打包文件

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

一些經常使用的修改方法

設置一個scss公用文件

在vue.config.js裏react

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相關文件須要特殊處理webpack

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

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

// 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文件內容：web

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

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

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鏡像shell

  • 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敲得代碼就不香了(近萬字實戰)

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程