vue - webpack.dev.conf.js for merge

webpack-merge提供了一个merge连接数组并合并创建新对象的对象的函数。如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值包装在函数中。

这种行为在配置webpack时特别有用,尽管它有超出它的用途。无论何时需要合并配置对象,webpack-merge都可以派上用场.

栗子:

 1 const devWebpackConfig = merge(baseWebpackConfig, {
 2   module: {
 3     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 4   },
 5   // cheap-module-eval-source-map is faster for development
 6   devtool: config.dev.devtool,
 7
 8   // these devServer options should be customized in /config/index.js
 9   devServer: {
10     clientLogLevel: ‘warning‘,
11     historyApiFallback: {
12       rewrites: [
13         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, ‘index.html‘) },
14       ],
15     },
16     hot: true,
17     contentBase: false, // since we use CopyWebpackPlugin.
18     compress: true,
19     host: HOST || config.dev.host,
20     port: PORT || config.dev.port,
21     open: config.dev.autoOpenBrowser,
22     overlay: config.dev.errorOverlay
23       ? { warnings: false, errors: true }
24       : false,
25     publicPath: config.dev.assetsPublicPath,
26     proxy: config.dev.proxyTable,
27     quiet: true, // necessary for FriendlyErrorsPlugin
28     watchOptions: {
29       poll: config.dev.poll,
30     }
31   },
32   plugins: [
33     new webpack.DefinePlugin({
34       ‘process.env‘: require(‘../config/dev.env‘)
35     }),
36     new webpack.HotModuleReplacementPlugin(),
37     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
38     new webpack.NoEmitOnErrorsPlugin(),
39     // https://github.com/ampedandwired/html-webpack-plugin
40     new HtmlWebpackPlugin({
41       filename: ‘index.html‘,
42       template: ‘index.html‘,
43       inject: true
44     }),
45     // copy custom static assets
46     new CopyWebpackPlugin([
47       {
48         from: path.resolve(__dirname, ‘../static‘),
49         to: config.dev.assetsSubDirectory,
50         ignore: [‘.*‘]
51       }
52     ])
53   ]
54 })

使用:

原文地址:https://www.cnblogs.com/cisum/p/9609780.html

时间: 2024-07-31 20:33:36

vue - webpack.dev.conf.js for merge的相关文章

vue - webpack.dev.conf.js

1 'use strict' 2 3 // build/util.js 4 const utils = require('./utils') 5 // node_modules里面的webpack 6 const webpack = require('webpack') 7 // config/index.js 8 const config = require('../config') 9 // 对象合并 10 const merge = require('webpack-merge') 11

vue - webpack.dev.conf.js for HtmlWebpackPlugin

描述: 这是一个webpack插件,可以简化HTML文件的创建,为您的webpack捆绑服务提供服务. 这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用,它会更改每个编译. 您可以让插件为您生成HTML文件,使用lodash模板提供您自己的模板或使用您自己的加载器. 官网:https://www.npmjs.com/package/html-webpack-plugin 原文地址:https://www.cnblogs.com/cisum/p/9612459.html

vue - webpack.dev.conf.js for FriendlyErrorsPlugin

描述:webpack网页端友好的报错信息就来自它 官网:https://www.npmjs.com/package/friendly-errors-webpack-plugin 1 new FriendlyErrorsPlugin({ 2 // 运行成功 3 compilationSuccessInfo:{ 4 message:['你的应用程序在这里运行http:// localhost:3000'], 5 notes:['有些附加说明要在成功编辑时显示'] 6 }, 7 // 运行错误 8 o

vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpack-template 中已经去掉了dev-server.js,取而代之的是webpack.dev.conf.js文件,所以可以在webpack.dev.conf.js里配置本地访问. 对比旧版本的build文件夹,新版本的build下少了dev-server.js和dev-client.js 旧版

vue - webpack.base.conf.js

描述:webapck基本配置文件. 为了给开发文件和打包文件(webpack.dev.conf.js|| webpack.prod.conf.js) 提供方便. 1 'use strict' 2 // 路径 3 const path = require('path') 4 // build/utils.js 5 const utils = require('./utils') 6 // config/index.js 7 const config = require('../config') 8

vue2.0配置webpack.dev.conf.js加载本地json数据

打开webpack.dev.conf.js 在const portfinder = require('portfinder')后加入以下配置 1 const express = require('express') 2 const app = express() // 请求server 3 var appData = require('../data.json') //加载本地数据 4 var seller = appData.seller //获取对应的数据 5 var goods = app

手撕vue-cli配置——webpack.dev.conf.js篇

const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./webpack.base.conf') //一个拷贝资源的插件,后面我会介绍用法

webpack.dev.conf.js

var utils = require('./utils')var webpack = require('webpack')var config = require('../config') // 一个可以合并数组和对象的插件var merge = require('webpack-merge')var baseWebpackConfig = require('./webpack.base.conf') // 一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插

vue - webpack.prod.conf.js

描述:webpack打包项目时的配置文件. 命令:yarn run build 或 npm run build 打包后,生成的文件在dist文件夹下 打包后,要在服务器环境下运行!!! 关于怎样运行,请查看:https://www.cnblogs.com/cisum/p/9370163.html , 1 'use strict' 2 3 // 路径 4 const path = require('path') 5 // utils 6 const utils = require('./utils