WEBPACK開發|生產環境配置（抽離公共部分）

這是webpack4演示，webpack5有些插件不在推薦，

1. webpack.base.config.js文件的配置說明

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯亂的現象
// const CleanWebpackPlugin = require('clean-webpack-plugin');function resolve (dir) {return path.join(__dirname, dir);
}module.exports = {// webpack打包入口entry: {main: './src/main',vendors: './src/vendors' // 去除不必要的插件，在index.html中需要引入這個文件// 也就是在index.html中加入  <script src="/build/vendor.js"></script>},// webpack打包轉換后的文件輸出到磁盤位置output: {// __dirname始終指向被執行js文件的絕對路徑，這里的path就是指向dist文件夾（也就是輸出的位置）path: path.join(__dirname, '../dist/')},// externals: {//     'vue': 'Vue',//     'iview': 'iview',//     'vue-router': 'VueRouter',//     'vuex': 'Vuex',//     'js-cookie': 'Cookies',//     // 'tinymce': 'tinymce',//     'axios': 'axios',//     // 'echarts': 'echarts',//     // 'html2canvas': 'html2canvas',//     // 'sortablejs': 'Sortable'// },/*** loader是模塊解析，模塊轉換器* webpack是模塊打包工具，而模塊不僅僅是js，還可以是css，圖片或者其他格式* 但是webpack默認只處理js和json，其他模塊就需要用loader了*/ // 模塊配置，在webpack里一切皆模塊，用來配置需要的匹配規則及使用哪種loader轉換器module: {rules: [{test: /\.vue$/, // 正則表達式匹配規則，適配vueloader: 'vue-loader', // 使用vue-loader，加載和轉義vue組件options: {loaders: {less: ExtractTextPlugin.extract({use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],fallback: 'vue-style-loader'}),css: ExtractTextPlugin.extract({use: ['css-loader', 'autoprefixer-loader'],fallback: 'vue-style-loader'})}}},{test: /iview\/.*?js$/,loader: 'babel-loader'},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.css$/,use: ExtractTextPlugin.extract({use: ['css-loader?minimize', 'autoprefixer-loader'], // 指定需要什么樣的loader去編譯文件,這里由于源文件是.css所以選擇css-loaderfallback: 'style-loader' // 編譯后用什么loader來提取css文件})},{test: /\.less/,use: ExtractTextPlugin.extract({use: ['autoprefixer-loader', 'less-loader'], // autoprefixer-loader具有自動添加css前綴的功能fallback: 'style-loader'})},{test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,loader: 'url-loader'},{test: /\.(html|tpl)$/,loader: 'html-loader'}]},resolve: {// resolve.extensions在導入語句沒帶文件后綴時，webpack會自動帶上后綴，去嘗試查找文件是否存在，但是在查找的時候，會耗費一定的打包時間extensions: ['.js', '.vue'],alias: { // resolve.alias配置通過別名來將原導入路徑映射成一個新的導入路徑（優化開發體驗）'vue': 'vue/dist/vue.esm.js','@': resolve('../src'),'@views': resolve('../src/views'),'assets': resolve('../src/assets/'),'store': resolve('../src/store/'),'jquery': resolve('../src/common/js/jquery.js')}},// 增加一個pluginsplugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery"}),// new CleanWebpackPlugin('dist/*.*', {//     root: __dirname,//     verbose: true,//     dry: false// })],
};

2. webpack.dev.config.js文件的配置說明（開發環境）

const webpack = require('webpack');
// HtmlWebpackPlugin作用：
// 1、為html文件中引入的外部資源如script、link動態添加每次compile后的hash，防止引用緩存的外部文件問題
// 2、可以生成創建html入口文件，比如單頁面可以生成一個html文件入口，配置N個html-webpack-plugin可以生成N個頁面入口
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs'); //fs 是 file-system 的簡寫，就是文件系統的意思;在 Node 中如果想要進行文件操作，就必須引入 fs 這個核心模塊fs.open('./src/config/env.js', 'w', function (err, fd) {const buf = 'export default "development";';// node --version < v10.1.0// fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {});// node --version > v10.1.0fs.write(fd, buf, 0, 'utf-8', function (err, written, buffer) {if (err) {throw new Error(err);}});
});module.exports = merge(webpackBaseConfig, {// devtool: '#source-map',devtool: '#cheap-module-eval-source-map',output: {publicPath: '/dist/',filename: '[name].js',chunkFilename: '[name].chunk.js'},plugins: [ // 每個插件的具體API配置new ExtractTextPlugin({filename: '[name].css',allChunks: true}),new webpack.optimize.CommonsChunkPlugin({name: 'vendors',filename: 'vendors.js'}),new HtmlWebpackPlugin({ // 打包輸出HTMLfilename: '../index.html',template: './src/template/index.ejs',title: '同花順管理平臺',inject: false})],devServer: {port: 8082,host: '0.0.0.0',watchOptions: { // 配置webpack服務ignored: '/node_modules/', // 不監測poll: 1200 // 監測修改的時間(ms)},// lazy: true,//只有在請求時才編譯包(bundle)。這意味著 webpack 不會監視任何文件改動。我們稱之為“惰性模式”。proxy: { // 設置代理'/yyzt-web': {// target: 'http://121.33.247.51:8602''http://cbas.ths8.com',// target: 'http://127.0.0.1:9080',// target: 'http://cbas.ths8.com',changeOrigin: true,target: 'http://cbas.ths8.com:81',pathRewrite: {'^/yyzt-web': '/yyzt3-web'}},'/yyzt3-web': {// target: 'http://121.33.247.51:8602''http://cbas.ths8.com',// target: 'http://127.0.0.1:9080',target: 'http://cbas.ths8.com:81',// target: 'http://113.9.77.117:9711',// target: 'http://172.20.51.196:8080',changeOrigin: true,pathRewrite: {'^/yyzt3-web': '/yyzt3-web'}},// 自己添加的圖片代理'/group1': { // 需要請求的資源target: "http://cbas.ths8.com:81", // 目標域名及地址changeOrigin: true, // 是否跨域pathRewrite: { // 地址重定向'^/group1': '/group1' // 也就是將前面的group1替換成后面的（這里是一樣的，所以可以不寫）}},'/cbas': {// target: 'http://121.33.247.51:8602''http://cbas.ths8.com',// target: 'http://127.0.0.1:9080',target: 'http://106.37.195.27:8083',changeOrigin: true,pathRewrite: {'^/cbas': '/cbas'}},'/yyzt-html': {// target: 'http://192.168.51.234:8080',target: 'http://point.stocke.com.cn',changeOrigin: true,pathRewrite: {'^/yyzt-html': '/yyzt-html'}},'/point': {// target: 'http://121.33.247.51:8602''http://cbas.ths8.com' 'http://127.0.0.1:9102',target: 'http://127.0.0.1:9102',changeOrigin: true,pathRewrite: {'^/point': '/point'}},'/hexinifs': {// target: 'http://192.168.51.234:8080',target: 'http://point.stocke.com.cn',changeOrigin: true,pathRewrite: {'^/hexinifs': '/hexinifs'}},'/yyzt-uamp-web': {target: 'http://point.stocke.com.cn',// target: 'http://cbas.ths8.com',changeOrigin: true,pathRewrite: {'^/yyzt-uamp-web': '/yyzt-uamp-web'}}}}
});

3. webpack.prod.config.js文件的配置說明（生產環境）

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const fs = require('fs');
var path = require('path')
const FastUglifyJsPlugin = require('fast-uglifyjs-plugin');fs.open('./src/config/env.js', 'w', function (err, fd) {const buf = 'export default "production";';// fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});fs.write(fd, buf, 0, 'utf-8', function (err, written, buffer) { });
});module.exports = merge(webpackBaseConfig, {output: {publicPath: './dist/',filename: '[name].[hash].js',chunkFilename: '[name].[hash].chunk.js'},plugins: [new ExtractTextPlugin({filename: '[name].[hash].css',allChunks: true}),new webpack.optimize.CommonsChunkPlugin({name: 'vendors',filename: 'vendors.[hash].js'}),new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}),// new webpack.optimize.UglifyJsPlugin({//     compress: {//         warnings: false//     }// }),new FastUglifyJsPlugin({sourceMap: true,compress: {warnings: false,drop_console: true,},// debug設為true可輸出詳細緩存使用信息:debug: true,// 默認開啟緩存，提高uglify效率，關閉請使用 false:cache: true,// 默認緩存路徑為項目根目錄，手動配置請使用:cacheFolder: path.resolve(__dirname, '../.build_cache'),// 工作進程數，默認os.cpus().lengthworkerNum: 2}),new HtmlWebpackPlugin({filename: '../index_prod.html',template: './src/template/index.ejs',title: '同花順管理平臺',inject: false}),new CleanWebpackPlugin(['./dist/main.*.css', './dist/*.js'],　 //匹配刪除的文件{root: __dirname,       　　　　　　　　　　//根目錄verbose: true,        　　　　　　　　　　//開啟在控制臺輸出信息dry: true        　　　　　　　　　　//啟用刪除文件})]
});

4.webpack-merge 合并配置文件

webpack-merge 是一個工具，它允許你將多個 webpack 配置文件合并成一個，這對于維護不同環境（如開發環境、生產環境）的配置特別有用。通過使用 webpack-merge，你可以保持基礎配置不變，同時為不同環境添加或覆蓋特定的配置選項。

以下是如何使用 webpack-merge 來合并 webpack 配置文件的示例：

首先，你需要安裝 webpack-merge：

bash復制代碼
npm install --save-dev webpack-merge
yarn add webpack-merge --dev

安裝完成后，webpack-merge 將被添加到你的 node_modules 目錄中，并且其版本信息將被添加到你的 package.json 文件的 devDependencies 部分。

然后，你可以創建多個配置文件，例如一個基礎配置文件 webpack.base.config.js，一個用于開發環境的配置文件 webpack.dev.config.js，以及一個用于生產環境的配置文件 webpack.prod.config.js。

webpack.base.config.js

javascript復制代碼const path = require('path');  module.exports = {  entry: {  app: './src/index.js'  },  output: {  filename: '[name].bundle.js',  path: path.resolve(__dirname, 'dist')  },  module: {  rules: [  // 通用加載器配置  ]  },  // 其他通用配置...  
};

webpack.dev.config.js

javascript復制代碼const merge = require('webpack-merge');  
const baseConfig = require('./webpack.base.config.js');  module.exports = merge(baseConfig, {  mode: 'development',  devtool: 'inline-source-map',  devServer: {  contentBase: './dist',  hot: true  },  // 開發環境特有的配置...  
});

webpack.prod.config.js

javascript復制代碼const merge = require('webpack-merge');  
const baseConfig = require('./webpack.base.config.js');  module.exports = merge(baseConfig, {  mode: 'production',  optimization: {  minimize: true  },  plugins: [  // 生產環境特有的插件...  ],  // 生產環境特有的配置...  
});

在上面的示例中，webpack.dev.config.js 和 webpack.prod.config.js 都使用了 webpack-merge 來合并 webpack.base.config.js 中的基礎配置。然后，它們各自添加了針對開發環境和生產環境的特定配置。

通過這種方式，你可以確保基礎配置的一致性，并只關注不同環境之間的差異。當你運行 webpack 時，只需要根據當前環境選擇正確的配置文件即可。

例如，在開發環境中，你可以這樣運行 webpack：

bash復制代碼
npx webpack --config webpack.dev.config.js

在生產環境中，你可以這樣運行：

bash復制代碼
npx webpack --config webpack.prod.config.js

或者，你可以在 package.json 的 scripts 部分設置相應的命令，以便更方便地運行 webpack。

常用的loader和插件種類繁多，以下是一些常見的示例：

Loader示例：

  1. babel-loader：用于將ES6+的語法轉化為向后兼容的JavaScript版本，使得新特性能夠在舊版瀏覽器中使用。
  2. style-loader 和 css-loader：用于處理CSS文件。style-loader將CSS添加到DOM中，而css-loader解析CSS文件中的import和url()。
  3. file-loader 和 url-loader：用于處理在JavaScript中引入的文件，例如圖片或字體文件。它們能夠將文件移動到輸出目錄，并在代碼中引用它們。
  4. vue-loader：專門用于加載Vue.js組件，處理單文件組件的.vue文件。
  5. ts-loader：用于加載TypeScript文件，并將其轉換為JavaScript。

插件示例：

  1. HtmlWebpackPlugin：簡化HTML文件的創建，自動引入打包后的JS文件。
  2. MiniCssExtractPlugin：將CSS提取到單獨的文件中，而不是嵌入到JS中。
  3. CleanWebpackPlugin：在每次構建之前清理輸出目錄，確保沒有舊的構建文件。
  4. DefinePlugin：允許在編譯時創建配置的全局常量，這對于配置模式或環境變量非常有用。
  5. CopyWebpackPlugin：將單個文件或整個目錄復制到構建目錄中。
  6. WebpackBar：在構建過程中顯示進度條和相關信息，提供視覺反饋。

這些只是眾多可用loader和插件中的一部分。實際上，webpack的生態系統非常龐大，你可以根據項目需求選擇適合的loader和插件。同時，隨著技術的不斷發展，新的loader和插件也不斷涌現，建議經常查看webpack的官方文檔和社區資源，以獲取最新的信息和最佳實踐。

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

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

相關文章

【LeetCode面試經典150題】100. 相同的樹

【LeetCode面試經典150題】100. 相同的樹

一、題目 100. 相同的樹 - 力扣&#xff08;LeetCode&#xff09; 給你兩棵二叉樹的根節點 p 和 q &#xff0c;編寫一個函數來檢驗這兩棵樹是否相同。 如果兩個樹在結構上相同&#xff0c;并且節點具有相同的值&#xff0c;則認為它們是相同的。 二、思路 二叉樹的題&#…
閱讀更多...
C++的lambda函數、bind函數、類函數綁定參數，學習測試用例

C++的lambda函數、bind函數、類函數綁定參數，學習測試用例

在C中&#xff0c;Lambda函數、std::bind 和類函數綁定參數提供了靈活的方式來處理函數調用。 Lambda函數是一種匿名函數&#xff0c;可以捕獲外部變量并在函數體內使用。它們提供了簡潔而強大的方式來定義內聯函數。std::bind 用于創建一個新的函數對象&#xff0c;其中部分參…
閱讀更多...
2024電工杯數學建模B題高質量成品論文，包括代碼數據

2024電工杯數學建模B題高質量成品論文，包括代碼數據

2024電工杯數學建模B題高質量成品論文&#xff0c;包括代碼數據 完整內容見文末名片 摘要 大學時期是學生們知識學習和身體成長的重要階段&#xff0c;良好的飲食習慣對于促進生長發育和保證身體健康具有重要意義。針對當前大學生中存在的飲食結構不合理及不良飲食習慣的問題…
閱讀更多...
為了性能，放棄tft_eSPI，選擇arduino_gfx吧

為了性能，放棄tft_eSPI，選擇arduino_gfx吧

本來對于tft_espi和arduino_gfx沒啥特別的感覺&#xff0c;都是tft屏幕驅動,arduino_gfx的好處就是除了支持tft外還支持一些oled屏幕。 誰知道在探尋我那個在單片機項目上顯示中文方案 https://github.com/StarCompute/tftziku 時候&#xff0c;尋求極致性能測了一些東西。 t…
閱讀更多...
23種設計模式之一————工廠模式詳細講解

23種設計模式之一————工廠模式詳細講解

工廠模式介紹 定義分類工廠模式核心角色&#xff1a;簡單工廠模式定義特點優點缺點應用場景代碼實現 工廠方法模式&#xff08;別名&#xff1a;虛擬構造&#xff09;定義特點優點缺點應用場景代碼實現 抽象工廠模式定義特點優點缺點應用場景代碼實現工廠模式小結 定義 工廠模…
閱讀更多...
算法之背包問題

算法之背包問題

可分的背包問題是可以用貪心法來解決&#xff0c;而0-1背包問題通常使用動態規劃方法來解決。 可分背包問題&#xff1a; 在可分背包問題中&#xff0c;物品可以被分割&#xff0c;您可以取走物品的一部分以適應背包的容量。這里的關鍵是物品的價值密度&#xff0c;即單…
閱讀更多...
最小產品價格差值

最小產品價格差值

題目描述 給定某產品多少天的價格&#xff0c;記錄于prices中&#xff0c;請找出任意兩天之間的最小價格差&#xff08;即abs(prices[i] - prices[j])&#xff09;的最小值&#xff0c;i!j&#xff09;并計算最小介個差組合的個數 樣例1 輸入 [1,3,7,5,12] 輸出 3 樣例2…
閱讀更多...
VTK9.2.0+QT5.14.0繪制三維顯示背景

VTK9.2.0+QT5.14.0繪制三維顯示背景

背景 上一篇繪制點云的博文中&#xff0c;使用的vtkCameraOrientationWidget來繪制的坐標軸&#xff0c;最近又學習到兩種新的坐標軸繪制形式。 vtkOrientationMarkerWidget vtkAxesActor 單獨使用vtkAxesActor能夠繪制出坐標軸&#xff0c;但是會隨著鼠標操作旋轉和平移時…
閱讀更多...
微服務中使用Maven BOM來管理你的版本依賴

微服務中使用Maven BOM來管理你的版本依賴

摘要: 原創出處 sf.gg/a/1190000021198564 「飄渺Jam」歡迎轉載&#xff0c;保留摘要&#xff0c;謝謝&#xff01; 為什么要使用BOM? 如何定義BOM? 項目使用方法? BOM&#xff08;Bill of Materials&#xff09;是由Maven提供的功能,它通過定義一整套相互兼容的jar包版…
閱讀更多...
通過 NIO + 多線程 提升硬件設備與系統的數據傳輸性能

通過 NIO + 多線程 提升硬件設備與系統的數據傳輸性能

一、項目展示 下圖&#xff08;模擬的數據可視化大屏&#xff09;中數據是動態顯示的 二、項目簡介 描述&#xff1a;使用Client模擬了硬件設備&#xff0c;比如可燃氣體濃度檢測器。Client通過Socket與Server建立連接&#xff0c;Server保存數據到txt文件&#xff0c;并使用W…
閱讀更多...
結構體（位段）內存分配

結構體（位段）內存分配

結構體由多個數據類型的成員組成。那編譯器分配的內存是不是所有成員的字節數總和呢&#xff1f; 首先&#xff0c;stu的內存大小并不為29個字節&#xff0c;即證明結構體內存不是所有成員的字節數和。 ??其次&#xff0c;stu成員中sex的內存位置不在21&#xff0c;即可推測…
閱讀更多...
Swift 請求用戶授權以跟蹤其跨應用或網站的活動

Swift 請求用戶授權以跟蹤其跨應用或網站的活動

步驟1：導入框架 首先，需要在Swift文件中導入AppTrackingTransparency框架。 import AppTrackingTransparency import AdSupport步驟2：請求跟蹤許可 在適當的地方請求用戶的跟蹤許可。通常，這個請求會在應用啟動時或者在用戶執行某些操作（例如，訪問應用中的廣告相關功能…
閱讀更多...
Linux服務器安裝docker，基于Linux(openEuler、CentOS8)

Linux服務器安裝docker，基于Linux(openEuler、CentOS8)

本實驗環境為openEuler系統(以server方式安裝)&#xff08;CentOS8基本一致&#xff0c;可參考本文) 目錄 知識點實驗 知識點 Docker 是一個開源的應用容器引擎。它允許開發者將應用及其所有依賴項打包到一個可移植的容器中&#xff0c;并發布到任何支持Docker的流行Linux或Wi…
閱讀更多...
基于python flask的web服務

基于python flask的web服務

基本例子 from flask import Flask app Flask(__name__) app.route(/)#檢查訪問的網址&#xff0c;根路徑走這里 def hello_world():return hello world#返回hello worldif __name__ __main__:# 綁定到指定的IP地址和端口app.run(host0.0.0.0, port1000, debugTrue)##綁定端…
閱讀更多...
設計一個完美的用戶角色權限表

設計一個完美的用戶角色權限表

設計一個完美的用戶角色權限表需要考慮系統的安全性、靈活性和可擴展性。以下是一個詳細的用戶角色權限管理表設計方案&#xff0c;包含多個表結構和字段描述。 目錄 1. 用戶表&#xff08;Users Table&#xff09;2. 角色表&#xff08;Roles Table&#xff09;3. 權限表&…
閱讀更多...
【數據結構與算法 | 基礎篇】環形數組模擬隊列

【數據結構與算法 | 基礎篇】環形數組模擬隊列

1. 前言 上文我們用環形單向鏈表實現了隊列.接下來我們用環形數組來模擬隊列.并實現了isFull()&#xff0c;isEmpty()等方法. 2. 環形數組模擬隊列 (1). Queue接口 : public interface Queue<E> {//向隊伍插入值, 插入成功返回true, 否則返回falseboolean offer(E v…
閱讀更多...
【Linux】TCP協議【上】{協議段屬性：源端口號/目的端口號/序號/確認序號/窗口大小/緊急指針/標記位}

【Linux】TCP協議【上】{協議段屬性：源端口號/目的端口號/序號/確認序號/窗口大小/緊急指針/標記位}

文章目錄 1.引入2.協議段格式4位首部長度16位窗口大小32位序號思考三個問題【demo】標記位URG: 緊急指針是否有效提升某報文被處理優先級【0表示不設置1表示設置】ACK: 確認號是否有效PSH: 提示接收端應用程序立刻從TCP緩沖區把數據讀走RST: 對方要求重新建立連接; 我們把攜帶R…
閱讀更多...
windows 設置系統字體 （win11 win10）

windows 設置系統字體 （win11 win10）

由于微軟的字體是有版權的&#xff0c;所以我打算替換掉 1.下載替換工具 github的項目&#xff0c;看起來很多人對微軟默認字體帶版權深惡痛絕。 項目地址&#xff1a;nomeiryoUi地址 這里選取最新的版本即可 2.打開軟件 這里顯示標題欄不能改&#xff0c;確認&#xff0c;其…
閱讀更多...
蓋雅技能發展云，助力制造企業人效合一

蓋雅技能發展云，助力制造企業人效合一

制造行業盡管經歷多次變革&#xff0c;但企業對人的管理始終是一項高度依賴經驗和耗費人力的工作。隨著供應鏈管理和生產設備的自動化、數字化升級&#xff0c;如何將第一生產要素——人&#xff0c;通過數字化的工具融入制造過程的閉環&#xff0c;對企業實現自動化工廠和智能…
閱讀更多...
力扣 滑動窗口題目總結

力扣 滑動窗口題目總結

Leetcode3.無重復字符的最長子串 思路&#xff1a; 這道題主要用到思路是&#xff1a;滑動窗口 什么是滑動窗口&#xff1f; 其實就是一個隊列,比如例題中的 abcabcbb&#xff0c;進入這個隊列&#xff08;窗口&#xff09;為 abc 滿足題目要求&#xff0c;當再進入 a&#x…
閱讀更多...
最新文章

Copyright @ 2022~2023