webpack学习之5.环境配置

2024-08-23 01:48
文章标签 配置 学习 环境 webpack

本文主要是介绍webpack学习之5.环境配置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

环境

项目一般要配置两个环境:
开发环境 development :配置侧重于实时重载、模块热替换HMR、便捷的source map等,在本地搭建服务器运行。
生产环境 production :配置侧重于文件压缩、轻量的source map、其他发布配置等,打包上传到服务器运行。

遵循逻辑分离,通常建议为每个环境编辑彼此独立的webpack配置。
遵循不重复原则,我们还要保留一个“通用”的配置。

可以使用webpack-merge将通用配置和独立配置合并。

单独配置

首先创建两个环境的配置文件,并分别配置:

// 开发环境
// ./config/webpack.dev.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const hotMiddlewareScript = 'webpack-hot-middleware/client?quiet=true'; // &reload=true 未使用accept重载的,使用reload重载
const HtmlWebpackPlugin = require('html-webpack-plugin');function joinPath(filepath) {return path.join(__dirname, filepath);
}module.exports = {mode: 'development',devtool: 'cheap-module-eval-source-map',entry: {main: [hotMiddlewareScript, joinPath('../src/index.js')],util: [hotMiddlewareScript, joinPath('../src/util.js')]},output: {path: joinPath('../dist'),filename: '[name].js?v=[hash]', // HMR不能使用chunkhash和contenthashchunkFilename: '[id].js?v=[hash]' // HMR不能使用chunkhash和contenthash},module: {rules: [{test: /\.css$/, // 根据正则匹配.css结尾的文件use: [ // 配置loader,倒序使用{loader: MiniCssExtractPlugin.loader,options: {hmr: true}},{ loader: 'css-loader' }]}]},optimization: {splitChunks: {chunks: 'all'}},plugins: [new HtmlWebpackPlugin(),// 用 MiniCssExtractPlugin 抽离出 css 文件new MiniCssExtractPlugin({filename: '[name].css?v=[chunkhash]' // name为entry定义的入口名:main}),new webpack.HotModuleReplacementPlugin()],
}
// 生产环境
// ./config/webpack.prod.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');function joinPath(filepath) {return path.join(__dirname, filepath);
}module.exports = {mode: 'production',devtool: 'cheap-module-source-map',entry: {main: [joinPath('../src/index.js')],util: [joinPath('../src/util.js')]},output: {path: joinPath('../dist'),filename: '[name].js?v=[chunkhash]',chunkFilename: '[id].js?v=[chunkhash]'},module: {rules: [{test: /\.css$/, // 根据正则匹配.css结尾的文件use: [ // 配置loader,倒序使用{ loader: MiniCssExtractPlugin.loader },{ loader: 'css-loader' }]}]},optimization: {splitChunks: {chunks: 'all'}},plugins: [new HtmlWebpackPlugin(),new CleanWebpackPlugin(),// 用 MiniCssExtractPlugin 抽离出 css 文件new MiniCssExtractPlugin({filename: '[name].css?v=[chunkhash]' // name为entry定义的入口名:main}),],
}

配置脚本和服务器

// package.json
{"scripts": {"build": "webpack --progress --config ./config/webpack.prod.js","server": "node server.js"},"devDependencies": {"clean-webpack-plugin": "^3.0.0","css-loader": "^3.5.3","express": "^4.17.1","html-webpack-plugin": "^4.3.0","mini-css-extract-plugin": "^0.9.0","style-loader": "^1.2.0","webpack": "^4.43.0","webpack-cli": "^3.3.11","webpack-dev-middleware": "^3.7.2","webpack-hot-middleware": "^2.25.0","webpack-merge": "^4.2.2"}// ...
}
// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware')const app = express();// 控制面板\系统和安全\系统\高级系统设置\环境变量 设置一个环境变量NODE_ENV
// 设置完最好重启一下命令行或开发工具
if (process.env.NODE_ENV == 'development') { // 开发环境使用HMRconst config = require('./config/webpack.dev.js');const compiler = webpack(config);app.use(webpackDevMiddleware(compiler));app.use(webpackHotMiddleware(compiler));
}app.use(express.static('dist'))// 在8080端口运行文件
app.listen(8080, function () {console.log('Example app listening on port 8080!\n');
});

合并配置

创建webpack.base.js放置通用配置

// ./config/webpack.dev.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {output: {path: path.join(__dirname, '../dist'),},module: {rules: [{test: /\.css$/, // 根据正则匹配.css结尾的文件use: [ // 配置loader,倒序使用{loader: MiniCssExtractPlugin.loader,options: {hmr: true}},{ loader: 'css-loader' }]}]},optimization: {splitChunks: {chunks: 'all'}},plugins: [new HtmlWebpackPlugin(),// 用 MiniCssExtractPlugin 抽离出 css 文件new MiniCssExtractPlugin({filename: '[name].css?v=[chunkhash]' // name为entry定义的入口名:main})],
}

调整dev和prod

// ./config/webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.base.js');const path = require('path');
// 加载插件
const webpack = require('webpack');
const hotMiddlewareScript = 'webpack-hot-middleware/client?quiet=true'; // &reload=true 未使用accept重载的,使用reload重载function joinPath(filepath) {return path.join(__dirname, filepath);
}module.exports = merge(common, {mode: 'development',devtool: 'cheap-module-eval-source-map',entry: {main: [hotMiddlewareScript, joinPath('../src/index.js')],util: [hotMiddlewareScript, joinPath('../src/util.js')]},output: {filename: '[name].js?v=[hash]', // HMR不能使用chunkhash和contenthashchunkFilename: '[id].js?v=[hash]' // HMR不能使用chunkhash和contenthash},plugins: [new webpack.HotModuleReplacementPlugin()]
});
// ./config/webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.base.js');const path = require('path');
// 加载插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');function joinPath(filepath) {return path.join(__dirname, filepath);
}module.exports = merge(common, {mode: 'production',devtool: 'cheap-module-source-map',entry: {main: [joinPath('../src/index.js')],util: [joinPath('../src/util.js')]},output: {filename: '[name].js?v=[chunkhash]',chunkFilename: '[id].js?v=[chunkhash]'},plugins: [new CleanWebpackPlugin(),],
});

效果与单独配置一样

参考

生产环境构建 | webpack

这篇关于webpack学习之5.环境配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1098005

相关文章

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH(SecureShell)服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素

SQLite3 在嵌入式C环境中存储音频/视频文件的最优方案

《SQLite3在嵌入式C环境中存储音频/视频文件的最优方案》本文探讨了SQLite3在嵌入式C环境中存储音视频文件的优化方案,推荐采用文件路径存储结合元数据管理,兼顾效率与资源限制,小文件可使用B... 目录SQLite3 在嵌入式C环境中存储音频/视频文件的专业方案一、存储策略选择1. 直接存储 vs

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

Nginx 重写与重定向配置方法

《Nginx重写与重定向配置方法》Nginx重写与重定向区别:重写修改路径(客户端无感知),重定向跳转新URL(客户端感知),try_files检查文件/目录存在性,return301直接返回永久重... 目录一.try_files指令二.return指令三.rewrite指令区分重写与重定向重写: 请求

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享(CORS)2. Nginx 配置跨域的场景2.1

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》:本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的

MySQL MCP 服务器安装配置最佳实践

《MySQLMCP服务器安装配置最佳实践》本文介绍MySQLMCP服务器的安装配置方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下... 目录mysql MCP 服务器安装配置指南简介功能特点安装方法数据库配置使用MCP Inspector进行调试开发指

python常见环境管理工具超全解析

《python常见环境管理工具超全解析》在Python开发中,管理多个项目及其依赖项通常是一个挑战,下面:本文主要介绍python常见环境管理工具的相关资料,文中通过代码介绍的非常详细,需要的朋友... 目录1. conda2. pip3. uvuv 工具自动创建和管理环境的特点4. setup.py5.