Webpact學習筆記記錄

Webpact學習筆記記錄

  • 一.初始化項目
    • 1.生成package.json
    • 2.安裝webpack
    • 3.執行webpack體驗
  • 二、webpack的配置文件
  • 三、less-loader解析less
    • 1.安裝loader
    • 2.配置
  • 四、eslint-loader語法檢查
    • 1.安裝loader
    • 2.配置loader
    • 3.在package.json中加入
  • 五、js語法轉換
    • 1.安裝loader
    • 2.配置loader
  • 六、js兼容性處理
    • 1. 第一種方法：使用polyfill
    • 2. 第二種方法：借助按需引入core-js
  • 七、url-loader解析樣式中的圖片
    • 1.安裝loader
    • 2.配置loader
  • 八、打包html文件
    • 1.安裝插件
    • 2.配置插件
  • 九、打包html中圖片資源
    • 1.安裝loader
    • 2.配置loader
    • 3.執行webpack命令即可
  • 十、打包其他資源
    • 1.使用file-loader處理即可，file-loader前面已經下載過
  • 十一、自動編譯打包運行
    • 1.安裝loader
    • 2.修改webpack配置
    • 3.package.json中修改如下
  • 十一、開啟熱模替換
  • 十二、devtool映射技術
  • 十三、清除打包文件目錄
    • 1.安裝插件
    • 2.配置與引用插件
  • 十四、提取css成單獨的文件
    • 1.安裝插件
    • 2.引入插件
    • 3.配置loader
  • 十五、css文件的兼容性處理
    • 1.安裝
    • 2.配置
  • 十六、壓縮css
    • 1.安裝插件
    • 2.引入插件
    • 3.配置插件
  • 十七、壓縮html
  • 十八、完整的package.json依賴如下

聲明：以下筆記內容均摘自Webpack+react全家桶開發谷粒后臺項目 ~張天禹老師的講課視頻，僅供學習使用

這個項目比較舊，因此以下的的安裝都加上了版本號，以免新版本不兼容影響學習，如果不加上版本號會有不一樣的表現，也可能出錯~。

一.初始化項目

1.生成package.json

npm init

2.安裝webpack

yarn add webpack@^4.41.2 webpack-cli@^3.3.10

3.執行webpack體驗

webpack ./src/js/index.js -o ./dist/js/index.js --mode development

$ webpack ./src/js/index.js -o ./dist/js/index.js --mode development
asset main.js 6.53 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 1.09 KiB./src/js/index.js 446 bytes [built] [code generated]./src/js/module1.js 273 bytes [built] [code generated]./src/js/module2.js 109 bytes [built] [code generated]./src/js/module3.js 288 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 118 ms

二、webpack的配置文件

在webpack_test下建一個webpack.config.js

/*** 此文件是webpack的配置文件，用于指定webpack去執行哪些任務*/const resolve = require('path').resolve;module.exports = {// 指定入口文件entry: './src/js/index.js',// 指定輸出文件output: {path: resolve(__dirname, 'dist'), // 輸出文件的路徑filename: 'js/index.js' // 輸出文件的名稱},// 模式mode: 'development' // development production 配置工作模式
};

直接執行命令webpack回車進行測試，使用配置文件進行構建

三、less-loader解析less

1.安裝loader

yarn add css-loader@^3.2.0 style-loader@^1.0.1 less-loader@^5.0.0 less@^3.10.3

2.配置

    // 指定loader,loader是用于加載某些文件的module: {rules: [// 指定loader規則{test: /\.less$/, // 匹配所有的less文件use: [// 指定使用哪些loader'style-loader', // 用于將css代碼，以style標簽的形式添加到頁面中'css-loader', // 用于將css文件加載到js中'less-loader' // 用于將less文件轉為css文件]}]}

執行webpack測試

四、eslint-loader語法檢查

對js基本語法錯誤進行提前檢查

1.安裝loader

yarn add eslint-loader@^4.0.2 eslint@^7.32.0

2.配置loader

webpack.config.js中加入以下

            // js語法檢查{test: /\.js$/,exclude: /node_modules/, // 排除node_modules文件夾loader: 'eslint-loader', // 指定使用的loaderenforce: 'pre', // 指定loader的執行順序，pre表示優先執行options: { // 指定eslint-loader的配置// eslint options (if necessary)}}

3.在package.json中加入

  "eslintConfig": {"parserOptions": {"ecmaVersion": 6,"sourceType": "module"},"env": {"browser": true,"node": true},"globals": {"$": "readonly"},"rules": {"no-console": 0,"eqeqeq": 2,"no-alert": 2},"extends": "eslint:recommended"}

以上配置參考了https://blog.csdn.net/qq_41040989/article/details/128924218
“eslintConfig”: {
“parserOptions”: {
“ecmaVersion”: 6, // 支持es6
“sourceType”: “module” // 使用es6模塊化
},
“env”: { // 設置環境
“browser”: true, // 支持瀏覽器環境： 能夠使用window上的全局變量
“node”: true // 支持服務器環境: 能夠使用node上global的全局變量
},
“globals”: { // 聲明使用的全局變量, 這樣即使沒有定義也不會報錯了
“$”: “readonly” // $ 只讀變量
},
“rules”: { // eslint檢查的規則 0 忽略 1 警告 2 錯誤
“no-console”: 0, // 不檢查console
“eqeqeq”: 2, // 用而不用=就報錯
“no-alert”: 2 // 不能使用alert
},
“extends”: “eslint:recommended” // 使用eslint推薦的默認規則 https://cn.eslint.org/docs/rules/
},

最后執行webpack測試

五、js語法轉換

1.安裝loader

yarn add babel-loader@^8.0.6 @babel/core@^7.7.2 @babel/preset-env@^7.7.1

2.配置loader

            // js語法轉換{test: /\.js$/,exclude: /node_modules/, // 排除node_modules文件夾use: {loader: 'babel-loader', // 指定使用的loaderoptions: { // 指定babel-loader的配置presets: ['@babel/preset-env']}}}

六、js兼容性處理

1. 第一種方法：使用polyfill

#安裝
yarn add @babel/polyfill@^7.7.0

使用: 在App.js或index.js中引用

import '@babel/polyfill'; // 引入babel-polyfill，用于兼容ie瀏覽器

缺點：體積太大。

2. 第二種方法：借助按需引入core-js

安裝：

yarn add core-js@^3.4.1

配置loader

            // js語法轉換{test: /\.js$/,exclude: /node_modules/, // 排除node_modules文件夾use: {loader: 'babel-loader', // 指定使用的loaderoptions: { // 指定babel-loader的配置presets: [['@babel/preset-env',{useBuiltIns: 'usage', // 按需引入需要使用polyfillcorejs: { version: 3 }, // 指定core-js的版本targets: { // 指定兼容到哪個版本的瀏覽器chrome: '58',ie: '9',}}],],cacheDirectory: true // 開啟babel緩存}}}

七、url-loader解析樣式中的圖片

1.安裝loader

yarn add file-loader@^4.2.0 url-loader@^2.2.0

2.配置loader

            // 處理圖片, url-loader,可以將圖片轉為base64處理{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader', // 指定使用的loaderoptions: {limit: 1024 * 10, // 8 * 1024 = 8kb 以下的圖片會被base64處理outputPath: 'images', // 指定輸出的目錄publicPath: '../dist/images', // 指定圖片的公共路徑name: '[hash:5].[ext]' // 指定輸出的文件名}}]}

八、打包html文件

html不再主動引入js了，由webpack自動打包引入
如需要將以下的<script src="../dist/js/index.js"></script>取消引入，然后由插件打包進去

<head><meta charset="UTF-8"><title>Webpack_test</title><script src="../dist/js/index.js"></script>
</head>

1.安裝插件

yarn add html-webpack-plugin@^4.5.0

2.配置插件

	const HtmlWebpackPlugin = require('html-webpack-plugin');// 配置插件plugins: [// 用于將指定的html文件，移動到輸出目錄，并且自動引入打包后的js文件new HtmlWebpackPlugin({template: './src/index.html' // 指定要移動的html文件})]

九、打包html中圖片資源

url-loader和file-loader只能處理js中的圖片資源，要處理件中的圖片資源，需要使用html-loader。

1.安裝loader

yarn add html-loader@^0.5.5

2.配置loader

            // 處理html中的圖片{test: /\.html$/,use: [{loader: 'html-loader', // 指定使用的loaderoptions: {esModule: false // 指定html-loader不使用es6模塊化解析}}]}

3.執行webpack命令即可

十、打包其他資源

1.使用file-loader處理即可，file-loader前面已經下載過

            // 使用file-loader處理字體文件和其他文件{test: /\.(eot|svg|ttf|woff|woff2|mp3|mp3|avi)$/,loader: 'file-loader', // 指定使用的loaderoptions: {outputPath: 'media', // 指定輸出的目錄name: '[hash:5].[ext]' // 指定輸出的文件名}}

十一、自動編譯打包運行

1.安裝loader

yarn add webpack-dev-server@^3.9.0

2.修改webpack配置

    // 配置開發服務器devServer: {compress: true, // 啟動gzip壓縮port: 3000, // 指定端口號open: true, // 自動打開瀏覽器}

3.package.json中修改如下

  "scripts": {"start": "webpack-dev-server",},

十一、開啟熱模替換

hot: true，package.json中增加此配置

    devServer: {compress: true, // 啟動gzip壓縮port: 3000, // 指定端口號open: true, // 自動打開瀏覽器hot: true, // 開啟熱更新}

入口配置修改如下

entry: ['./src/js/index.js', './src/index.html'],

十二、devtool映射技術

在webpack.config.js中加入以下配置即可

    devtool: 'cheap-module-eval-source-map' // 開發環境下使用// devtool: 'cheap-module-source-map' // 生產環境下使用

十三、清除打包文件目錄

通過插件自動刪除上一次的打包文件

1.安裝插件

yarn add clean-webpack-plugin@^3.0.0

2.配置與引用插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

    // 配置插件plugins: [// 用于清除指定目錄的文件new CleanWebpackPlugin()],

十四、提取css成單獨的文件

1.安裝插件

yarn add mini-css-extract-plugin@^0.8.0

2.引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 用于將css代碼提取為單獨的文件

3.配置loader

{test: /\.less$/, // 指定匹配的文件// 指定使用的loaderuse: [MiniCssExtractPlugin.loader,'css-loader', // 用于將css文件加載到js中'less-loader' // 用于將less文件轉為css文件]}

十五、css文件的兼容性處理

1.安裝

yarn add postcss-loader@^3.0.0 postcss-flexbugs-fixes@^4.1.0 postcss-preset-env@^6.7.0 postcss-normalize@^8.0.1

2.配置

{loader: 'postcss-loader', // 用于給css代碼自動添加兼容性前綴options: {postcssOptions: {plugins: () => [require('postcss-flexbugs-fixs'),require('postcss-preset-env')({autoprefixer: {flexbox: 'no-2009'},stage: 3})],sourceMap: true}}},

在src目錄下增加.browserslistrc文件：

# Browsers that we supportlast 1 version
> 1%
IE 10 # sorry

十六、壓縮css

1.安裝插件

yarn add optimize-css-assets-webpack-plugin@^5.0.3

2.引入插件

const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // 用于壓縮css代碼

3.配置插件

// 用于壓縮css代碼new optimizeCssAssetsWebpackPlugin({cssProcessorPluginOptions: {presets: ['default', { discardComments: { removeAll: true } }]},cssProcessorOptions: {map: {inline: false, // 不生成內聯映射，這樣配置就會生成一個source-map文件annotation: true // 如果沒有源映射，就會生成一個注釋}}})

十七、壓縮html

在插件HtmlWebpackPlugin中加入以下配置即可

new HtmlWebpackPlugin({template: './src/index.html', // 指定要移動的html文件minify: { // 配置html壓縮removeComments: true, // 移除注釋collapseWhitespace: true, // 移除空格removeRedundantAttributes: true, // 移除多余的屬性useShortDoctype: true, // 使用短的文檔聲明removeEmptyAttributes: true, // 移除空的屬性removeStyleLinkTypeAttributes: true, // 移除style和link標簽的type屬性keepClosingSlash: true, // 保留閉合斜線minifyJS: true, // 壓縮內聯js代碼minifyCSS: true, // 壓縮內聯css代碼minifyURLs: true, // 壓縮內聯的url}})

十八、完整的package.json依賴如下

  "dependencies": {"@babel/core": "7.7.2","@babel/polyfill": "7.7.0","@babel/preset-env": "7.7.1","babel-loader": "8.0.6","clean-webpack-plugin": "^3.0.0","core-js": "3.4.1","css-loader": "3.2.0","eslint": "7.32.0","eslint-loader": "4.0.2","file-loader": "4.2.0","html-loader": "0.5.5","html-webpack-plugin": "4.5.0","less": "3.10.3","less-loader": "5.0.0","mini-css-extract-plugin": "^0.8.0","optimize-css-assets-webpack-plugin": "^5.0.3","postcss-flexbugs-fixes": "^4.1.0","postcss-loader": "^3.0.0","postcss-normalize": "^8.0.1","postcss-preset-env": "^6.7.0","style-loader": "1.0.1","url-loader": "2.2.0","webpack": "4.41.2","webpack-cli": "3.3.10","webpack-dev-server": "3.9.0"}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/41211.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/41211.shtml
英文地址，請注明出處：http://en.pswp.cn/news/41211.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

前端能正常跑起來但是控制臺報錯數據undefined之onMounted最好不要用異步寫法

前端能正常跑起來但是控制臺報錯數據undefined之onMounted最好不要用異步寫法

記錄問題 在做項目的時候&#xff0c;項目可以正常運行&#xff0c;但是控制臺總是報錯&#xff0c;有一個數據是undefined。 分析問題 一般遇到這種情況&#xff0c;就是vue找不到這個數據。但是為什么能正常運行&#xff1f;說明是開始加載的時候找不到數據&#xff0c;但…
閱讀更多...
Java進階篇--數據結構

Java進階篇--數據結構

目錄 一.數組&#xff08;Array&#xff09;&#xff1a; 1.1 特點&#xff1a; 1.2 基本操作&#xff1a; 1.3 使用數組的好處包括&#xff1a; 1.4 數組也有一些限制&#xff1a; 二.集合框架&#xff08;Collections Framework&#xff09;&#xff1a; 2.1 列表…
閱讀更多...
當你出差在外時，怎樣輕松訪問遠程訪問企業局域網象過河ERP系統？

當你出差在外時，怎樣輕松訪問遠程訪問企業局域網象過河ERP系統？

文章目錄 概述1.查看象過河服務端端口2.內網穿透3. 異地公網連接4. 固定公網地址4.1 保留一個固定TCP地址4.2 配置固定TCP地址 5. 使用固定地址連接 概述 ERP系統對于企業來說重要性不言而喻&#xff0c;不管是財務、生產、銷售還是采購&#xff0c;都需要用到ERP系統來協助。…
閱讀更多...
miniconda克隆arcpy

miniconda克隆arcpy

arcpy環境克隆 前言嘗試思考到此結束 前言 最近遇到了一些問題&#xff0c;需要用到arcpy來處理一些東西&#xff0c;但眾所周知&#xff0c;arcgis的arcpy是python 2.0的&#xff0c;我不是很喜歡&#xff1b;所以我安裝了arcgis pro 2.8&#xff0c;我發現這也是個坑&#x…
閱讀更多...
Git分布式版本控制系統

Git分布式版本控制系統

目錄 2、安裝git 2.1 初始環境 2.2 Yum安裝Git 2.3 編譯安裝 2.4 初次運行 Git 前的配置 2.5 初始化及獲取 Git 倉庫 2.6 Git命令常規操作 2.6.2 添加新文件 2.6.3 刪除git內的文件 2.6.4 重命名暫存區數據 2.6.5 查看歷史記錄 2.6.6 還原歷史數據 2.6.7 還原未來…
閱讀更多...
react使用antd的table組件，實現點擊彈窗顯示對應列的內容

react使用antd的table組件，實現點擊彈窗顯示對應列的內容

特別提醒&#xff1a;不能在table的columns的render里面設置彈窗組件渲染&#xff0c;因為這會導致彈窗顯示的始終是最后一行的內容&#xff0c;因為這樣渲染的結果是每一行都會重新渲染一遍這個彈窗并且會給傳遞一個content的值&#xff0c;渲染到最后一行的時候&#xff0c;就…
閱讀更多...
Unity的TimeScale的影響范圍分析

Unity的TimeScale的影響范圍分析

大家好&#xff0c;我是阿趙。 這期來說一下Unity的TimeScale。 一、前言 Unity提供了Time這個類&#xff0c;來控制時間。其實我自己倒是很少使用這個Time&#xff0c;因為做網絡同步的游戲&#xff0c;一般是需要同步服務器時間&#xff0c;所以我比較多是在使用System.Date…
閱讀更多...
linux驅動 - 20230817

linux驅動 - 20230817

練習: 通過字符設備驅動分步注冊方式編寫LED燈的驅動&#xff0c;應用程序使用ioctl函數編寫硬件控制邏輯 頭文件 head.h #ifndef __HEAD_H__ #define __HEAD_H__ typedef struct{unsigned int MODER;unsigned int OTYPER;unsigned int OSPEEDR;unsigned int PUPDR;unsigned…
閱讀更多...
問道管理：機器人概念走勢活躍，新時達漲停，拓斯達、豐立智能等大漲

問道管理：機器人概念走勢活躍，新時達漲停，拓斯達、豐立智能等大漲

機器人概念17日盤中走勢活躍&#xff0c;到發稿&#xff0c;拓斯達大漲18%&#xff0c;昊志機電漲近16%&#xff0c;豐立智能漲超13%&#xff0c;步科股份、優德精細漲超10%&#xff0c;新時達漲停&#xff0c;天璣科技、兆龍互聯、中大力德漲逾9%。 消息面上&#xff0c;8月16…
閱讀更多...
HTTP 介紹

HTTP 介紹

HTTP 介紹 HTTP 協議一般指 HTTP&#xff08;超文本傳輸協議&#xff09;。超文本傳輸協議&#xff08;英語&#xff1a;HyperText Transfer Protocol&#xff0c;縮寫&#xff1a;HTTP&#xff09;是一種用于分布式、協作式和超媒體信息系統的應用層協議&#xff0c;是因特網…
閱讀更多...
Java 計算兩個字符的相似度

Java 計算兩個字符的相似度

在Java中&#xff0c;要計算兩個字符的相似度&#xff0c;可以借助一些字符串相似度算法。以下是幾種常見的字符串相似度算法&#xff1a; Levenshtein距離&#xff1a;也稱為編輯距離&#xff0c;用于計算兩個字符串之間的最小編輯操作次數&#xff08;插入、刪除、替換&…
閱讀更多...
解決ios隔空播放音頻到macos沒有聲音的問題

解決ios隔空播放音頻到macos沒有聲音的問題

解決ios隔空播放音頻到macos沒有聲音的問題 一、檢查隔空播放支持設備和系統要求二、打開隔空播放接收器三、重置MAC控制中心進程END 一、檢查隔空播放支持設備和系統要求 Mac、iPhone、iPad 和 Apple Watch 上“連續互通”的系統要求 二、打開隔空播放接收器 ps;我設備是同一…
閱讀更多...
java 并發 簡單使用

java 并發 簡單使用

文章目錄 概要代碼 概要 java 并發 簡單使用 代碼 public static final ExecutorService EXECUTOR_GENERAL new ThreadPoolExecutor(100, 1000,0L, TimeUnit.MILLISECONDS, new LinkedBlockingQueue<>(10000));int size 1000;List<UserService> userServices …
閱讀更多...
element+vue 表格行拖拽功能

element+vue 表格行拖拽功能

解決方案 使用 sortable.js 步驟一&#xff1a; 安裝 npm install vuedraggable步驟二&#xff1a;引入 import Sortable from sortablejs;步驟三&#xff1a; el-table 添加row-key屬性&#xff0c;外層包一層 sortableDiv <div class"sortableDiv"> 拖…
閱讀更多...
分類預測 | MATLAB實現WOA-CNN-BiLSTM-Attention數據分類預測

分類預測 | MATLAB實現WOA-CNN-BiLSTM-Attention數據分類預測

分類預測 | MATLAB實現WOA-CNN-BiLSTM-Attention數據分類預測 目錄 分類預測 | MATLAB實現WOA-CNN-BiLSTM-Attention數據分類預測分類效果基本描述程序設計參考資料 分類效果 基本描述 1.MATLAB實現WOA-CNN-BiLSTM-Attention數據分類預測&#xff0c;運行環境Matlab2023b及以上…
閱讀更多...
Django圖書商城系統實戰開發-部署上線操作

Django圖書商城系統實戰開發-部署上線操作

Django圖書商城系統實戰開發-打包部署 技術背景掌握 當你需要在服務器上部署Web應用程序時&#xff0c;Nginx是一個強大且常用的選擇。Nginx是一個高性能的Web服務器和反向代理服務器&#xff0c;它可以處理大量的并發連接&#xff0c;并提供負載均衡、緩存、SSL等功能。下面…
閱讀更多...
seata 的部署和集成

seata 的部署和集成

文章目錄 seata的部署和集成一、部署Seata的tc-server1.下載2.解壓3.修改配置4.在nacos添加配置5.創建數據庫表6.啟動TC服務 二、微服務集成seata1.引入依賴2.修改配置文件 TODO三、TC服務的高可用和異地容災1.模擬異地容災的TC集群2.將事務組映射配置到nacos3.微服務讀取nacos…
閱讀更多...
中期國際：MT4數據挖掘與分析方法：以數據為導向，制定有效的交易策略

中期國際：MT4數據挖掘與分析方法：以數據為導向，制定有效的交易策略

在金融市場中&#xff0c;制定有效的交易策略是成功交易的關鍵。而要制定一份可靠的交易策略&#xff0c;數據挖掘與分析方法是不可或缺的工具。本文將介紹如何以數據為導向&#xff0c;利用MT4進行數據挖掘與分析&#xff0c;從而制定有效的交易策略。 首先&#xff0c;我們需…
閱讀更多...
操作系統搭建相關知識

操作系統搭建相關知識

文章目錄 系統篇netstat命令systemctl命令Systemd系統資源分類&#xff08;12類&#xff09; 網絡篇ifconfig命令操作系統配置動態IP腳本dhcp服務的安裝與配置防火墻相關知識 操作系統常用配置文件 系統篇 netstat命令 netstat指路 systemctl命令 常用于重啟系統的每個服務…
閱讀更多...
注解@DependsOn

注解@DependsOn

注解 DependsOn 1. 注解由來&#xff1a; DependsOn 注解是 Spring 框架提供的一種注解&#xff0c;用于指定 Bean 之間的依賴關系。通過在 Bean 上添加 DependsOn 注解&#xff0c;可以確保在初始化時先初始化指定的依賴 Bean&#xff0c;從而滿足對象之間的正確順序。 2. 注…
閱讀更多...
最新文章

Copyright @ 2022~2023