時間：2023-05-28 23:45:01 | 來源：網(wǎng)站運營
時間：2023-05-28 23:45:01 來源：網(wǎng)站運營
Webpack基礎(chǔ)應(yīng)用篇-[13] 1.10 拆分開發(fā)環(huán)境和生產(chǎn)環(huán)境配置：現(xiàn)在，我們只能手工的來調(diào)整
在線咨詢
mode選項，實現(xiàn)生產(chǎn)環(huán)境和開發(fā)環(huán)境的切換，且很多配置在生產(chǎn)環(huán)境和開發(fā)環(huán)境中存在不一致的情況，比如開發(fā)環(huán)境沒有必要設(shè)置緩存，生產(chǎn)環(huán)境還需要設(shè)置公共路徑等等。publicPath 配置選項在各種場景中都非常有用。你可以通過它來指定應(yīng)用程序中所有資源的基礎(chǔ)路徑。assets/ 文件夾，它與索引頁面位于同一級別。這沒太大問題，但是，如果我們將所有靜態(tài)資源托管至 CDN，然后想在生產(chǎn)環(huán)境中使用呢？ASSET_PATH：import webpack from 'webpack';// 嘗試使用環(huán)境變量，否則使用根路徑const ASSET_PATH = process.env.ASSET_PATH || '/';export default { output: { publicPath: ASSET_PATH, }, plugins: [ // 這可以幫助我們在代碼中安全地使用環(huán)境變量 new webpack.DefinePlugin({ 'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH), }), ],};11-multiple-env/webpack.config.js//...import webpack from 'webpack';// 嘗試使用環(huán)境變量，否則使用根路徑const ASSET_PATH = process.env.ASSET_PATH || '/';export default {output: { //... publicPath: ASSET_PATH,},plugins: [ // 這可以幫助我們在代碼中安全地使用環(huán)境變量 new webpack.DefinePlugin({ 'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH), }), //... ],};import.meta.url、document.currentScript、script.src 或者 self.location 變量設(shè)置 publicPath。你需要做的是將 output.publicPath 設(shè)為 'auto'：module.exports = { output: { publicPath: 'auto', },};請注意在某些情況下不支持 document.currentScript，例如：IE 瀏覽器，你不得不引入一個 polyfill，例如 currentScript Polyfill。webpack.config.js 在 開發(fā)環(huán)境 和 生產(chǎn)環(huán)境 之間的差異，你可能需要環(huán)境變量(environment variable)。--env 參數(shù)，可以允許你傳入任意數(shù)量的環(huán)境變量。而在 webpack.config.js 中可以訪問到這些環(huán)境變量。例如，--env production 或 --env goal=local。npx webpack --env goal=local --env production --progress對于我們的 webpack 配置，有一個必須要修改之處。通常，module.exports 指向配置對象。要使用 env 變量，你必須將 module.exports 轉(zhuǎn)換成一個函數(shù)：//...module.exports = (env) => {return {//...// 根據(jù)命令行參數(shù) env 來設(shè)置不同環(huán)境的 modemode: env.production ? 'production' : 'development',//...}}webpack.config.dev.js（開發(fā)環(huán)境配置）和 webpack.config.prod.js（生產(chǎn)環(huán)境配置）。在項目根目錄下創(chuàng)建一個配置文件夾 config 來存放他們。webpack.config.dev.js 配置如下：const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const toml = require('toml')const yaml = require('yaml')const json5 = require('json5')module.exports = {entry: {index: './src/index.js',another: './src/another-module.js'},output: {filename: 'scripts/[name].js',path: path.resolve(__dirname, './dist'),clean: true,assetModuleFilename: 'images/[contenthash][ext]'},mode: 'development',devtool: 'inline-source-map',plugins: [new HtmlWebpackPlugin({ template: './index.html', filename: 'app.html', inject: 'body'}),new MiniCssExtractPlugin({ filename: 'styles/[contenthash].css'})],devServer: {static: './dist'},module: {rules: [ { test: //.png$/, type: 'asset/resource', generator: { filename: 'images/[contenthash][ext]' } }, { test: //.svg$/, type: 'asset/inline' }, { test: //.txt$/, type: 'asset/source' }, { test: //.jpg$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 4 * 1024 * 1024 } } }, { test: //.(css|less)$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] }, { test: //.(woff|woff2|eot|ttf|otf)$/, type: 'asset/resource' }, { test: //.(csv|tsv)$/, use: 'csv-loader' }, { test: //.xml$/, use: 'xml-loader' }, { test: //.toml$/, type: 'json', parser: { parse: toml.parse } }, { test: //.yaml$/, type: 'json', parser: { parse: yaml.parse } }, { test: //.json5$/, type: 'json', parser: { parse: json5.parse } }, { test: //.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [ [ '@babel/plugin-transform-runtime' ] ] } } }]},optimization: {splitChunks: { cacheGroups: { vendor: { test: /[///]node_modules[///]/, name: 'vendors', chunks: 'all' } }}}}webpack.config.prod.js 配置如下：const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')const toml = require('toml')const yaml = require('yaml')const json5 = require('json5')module.exports = {entry: {index: './src/index.js',another: './src/another-module.js'},output: {filename: 'scripts/[name].[contenthash].js',// 打包的dist文件夾要放到上一層目錄path: path.resolve(__dirname, '../dist'),clean: true,assetModuleFilename: 'images/[contenthash][ext]',publicPath: 'http://localhost:8080/'},mode: 'production',plugins: [new HtmlWebpackPlugin({ template: './index.html', filename: 'app.html', inject: 'body'}),new MiniCssExtractPlugin({ filename: 'styles/[contenthash].css'})],module: {rules: [ { test: //.png$/, type: 'asset/resource', generator: { filename: 'images/[contenthash][ext]' } }, { test: //.svg$/, type: 'asset/inline' }, { test: //.txt$/, type: 'asset/source' }, { test: //.jpg$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 4 * 1024 * 1024 } } }, { test: //.(css|less)$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] }, { test: //.(woff|woff2|eot|ttf|otf)$/, type: 'asset/resource' }, { test: //.(csv|tsv)$/, use: 'csv-loader' }, { test: //.xml$/, use: 'xml-loader' }, { test: //.toml$/, type: 'json', parser: { parse: toml.parse } }, { test: //.yaml$/, type: 'json', parser: { parse: yaml.parse } }, { test: //.json5$/, type: 'json', parser: { parse: json5.parse } }, { test: //.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [ [ '@babel/plugin-transform-runtime' ] ] } } }]},optimization: {minimizer: [ new CssMinimizerPlugin()],splitChunks: { cacheGroups: { vendor: { test: /[///]node_modules[///]/, name: 'vendors', chunks: 'all' } }}},//關(guān)閉 webpack 的性能提示performance: {hints:false}}拆分成兩個配置文件后，分別運行這兩個文件：[felix] 10-multiple-env $ npx webpack serve -c ./config/webpack.config.dev.js生產(chǎn)環(huán)境：[felix] 10-multiple-env $ npx webpack -c ./config/webpack.config.prod.jspackage.json、node_modules 與 package-lock.json拷貝到當(dāng)前目錄下，npx：{"scripts": {"start": "webpack serve -c ./config/webpack.config.dev.js","build": "webpack -c ./config/webpack.config.prod.js"}}開發(fā)環(huán)境運行腳本：[felix] 10-multiple-env $ npm run start[felix] 10-multiple-env $ npm run buildwebpack.config.common.js，配置公共的內(nèi)容：const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const toml = require('toml')const yaml = require('yaml')const json5 = require('json5')module.exports = {entry: {index: './src/index.js',another: './src/another-module.js'},output: {// 注意這個dist的路徑設(shè)置成上一級path: path.resolve(__dirname, '../dist'),clean: true,assetModuleFilename: 'images/[contenthash][ext]',},plugins: [new HtmlWebpackPlugin({ template: './index.html', filename: 'app.html', inject: 'body'}),new MiniCssExtractPlugin({ filename: 'styles/[contenthash].css'})],module: {rules: [ { test: //.png$/, type: 'asset/resource', generator: { filename: 'images/[contenthash][ext]' } }, { test: //.svg$/, type: 'asset/inline' }, { test: //.txt$/, type: 'asset/source' }, { test: //.jpg$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 4 * 1024 } } }, { test: //.(css|less)$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] }, { test: //.(woff|woff2|eot|ttf|otf)$/, type: 'asset/resource' }, { test: //.(csv|tsv)$/, use: 'csv-loader' }, { test: //.xml$/, use: 'xml-loader' }, { test: //.toml$/, type: 'json', parser: { parse: toml.parse } }, { test: //.yaml$/, type: 'json', parser: { parse: yaml.parse } }, { test: //.json5$/, type: 'json', parser: { parse: json5.parse } }, { test: //.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [ [ '@babel/plugin-transform-runtime' ] ] } } }]},optimization: {splitChunks: { cacheGroups: { vendor: { test: /[///]node_modules[///]/, name: 'vendors', chunks: 'all' } }}},//關(guān)閉 webpack 的性能提示performance: {hints:false}}改寫 webpack.config.dev.js:module.exports = {// 開發(fā)環(huán)境不需要配置緩存output: {filename: 'scripts/[name].js',},// 開發(fā)模式mode: 'development',// 配置 source-mapdevtool: 'inline-source-map',// 本地服務(wù)配置devServer: {static: './dist'}}修改 webpack.config.prod.js:const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')module.exports = {// 生產(chǎn)環(huán)境需要緩存output: {filename: 'scripts/[name].[contenthash].js',publicPath: 'http://localhost:8080/'},// 生產(chǎn)環(huán)境模式mode: 'production',// 生產(chǎn)環(huán)境 css 壓縮optimization: {minimizer: [ new CssMinimizerPlugin()]}}1.10.6 合并配置文件webpack-merge:[felix] felixcourses $ npm install webpack-merge -D創(chuàng)建 webpack.config.js，合并代碼：const { merge } = require('webpack-merge')const commonConfig = require('./webpack.config.common.js')const productionConfig = require('./webpack.config.prod.js')const developmentConfig = require('./webpack.config.dev')module.exports = (env) => {switch(true) {case env.development: return merge(commonConfig, developmentConfig)case env.production: return merge(commonConfig, productionConfig)default: throw new Error('No matching configuration was found!');}}---本章完---關(guān)鍵詞：環(huán)境,配置,生產(chǎn),基礎(chǔ)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
