WEBPACK开发|生产环境配置（抽离公共部分）

ops/2024/9/23 11:15:00/

这是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.ppmy.cn/ops/44909.html

相关文章

大数据Scala教程从入门到精通第十篇：Scala在IDEA中编写Hello World代码的简单说明

大数据Scala教程从入门到精通第十篇：Scala在IDEA中编写Hello World代码的简单说明

一&#xff1a;代码展示 object Main {def main(args: Array[String]): Unit {//SCALA中可以不写;//绿色的小三角达标的是这个类中有一个MAIN方法代表是可以执行的。//ctrl shift f10可以直接运行println("Hello world!")//Java中的类库我们可以直接使用System.o…
阅读更多...
28. 找出字符串中第一个匹配项的下标

28. 找出字符串中第一个匹配项的下标

28. 找出字符串中第一个匹配项的下标 Show Swift Code func computePMT(_ pattern: String) -> [Int] { let m pattern.length var pmt [Int](repeating: 0, count: m) var j 0 for i in 1..<m { while j > 0 && pattern[pattern.index(pattern.star…
阅读更多...
【1】：计算机图形学概述

【1】：计算机图形学概述

从技术角度讲&#xff0c;什么是好的画面呢&#xff1f; 看这个画面是不是足够亮&#xff0c;也就是全局光照做的够好 什么是计算机图形学? 使用计算机合成和操作可视信息。 应用场景 Video Games 游戏 Movie 电影 Animation 动画 Design 设计&#xff1a;CAD等软件相关…
阅读更多...
AI视频教程下载：零基础学会DALL-E 、Midjourney、Microsoft Designer、Adobe Firefly

AI视频教程下载：零基础学会DALL-E 、Midjourney、Microsoft Designer、Adobe Firefly

学完本课程会得到什么&#xff1a; 掌握ChatGPT、DALL-E 2、Midjourney、Microsoft Bing Chat、Microsoft Designer和Adobe Firefly&#xff0c;全面理解生成性AI及其应用 了解OpenAI及其在生成性AI领域的尖端研究 理解提示工程的重要性以及它如何帮助产生更好的输出和数据 …
阅读更多...
面试总结之：原生和flutter混合开发，是 使用多个flutter_engine还是单个flutter_engine

面试总结之：原生和flutter混合开发，是 使用多个flutter_engine还是单个flutter_engine

在原生和Flutter混合开发的过程中&#xff0c;关于使用多个FlutterEngine还是单个FlutterEngine&#xff0c;这实际上取决于你的具体需求和应用场景。 **使用单个FlutterEngine**&#xff1a;在某些情况下&#xff0c;使用单个FlutterEngine来管理多个入口可能是有利的。这种方…
阅读更多...
python处理图片

python处理图片

一个处理python图片的程序&#xff0c;重命名&#xff0c; 删除&#xff0c;copy等 import os import shutil def write_filenames_to_txt(directory, txt_path):"""获取传入文件夹名内的所有文件名&#xff0c;并写入txt"""with open(t…
阅读更多...
C语言动态内存管理

C语言动态内存管理

学c方向&#xff0c;指针、结构体、动态内存开辟这三个直接关系到数据结构的学习&#xff0c;非常重要&#xff08;学java就还好) 栈区&#xff1a;局部变量&#xff0c;形式参数 堆区&#xff1a;malloc,calloc,realloc,free申请的空间 malloc int main() {int arr[10] { 0…
阅读更多...
OpenHarmony鸿蒙软总线使用mbedtls数据加密详解

OpenHarmony鸿蒙软总线使用mbedtls数据加密详解

OpenHarmony鸿蒙软总线子系统中使用了多种的加密技术，本篇介绍调用mbedtls的数据加密。 调用mbedtls加密的源码位于： foundation/communication/dsoftbus/adapter/common/mbedtls/softbus_adapter_crypto.c 这个源码单元，调用mbedTLS库实现了各种加密功能，包括AES-GCM加密…
阅读更多...
最新文章

Copyright @ 2022~2023