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 // build/vue-loader.conf.js
 9 const vueLoaderConfig = require(‘./vue-loader.conf‘)
10
11 function resolve(dir) {
12   return path.join(__dirname, ‘..‘, dir)
13 }
14
15
16 module.exports = {
17   context: path.resolve(__dirname, ‘../‘),
18   // 入口
19   entry: {
20     app: ‘./src/main.js‘
21   },
22   // 出口
23   output: {
24     path: config.build.assetsRoot,
25     filename: ‘[name].js‘,
26     publicPath: process.env.NODE_ENV === ‘production‘
27       ? config.build.assetsPublicPath
28       : config.dev.assetsPublicPath
29   },
30   // 详情可以看看这篇文章:http://www.php.cn/js-tutorial-385863.html
31   resolve: {
32     extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
33     alias: {
34       ‘vue$‘: ‘vue/dist/vue.esm.js‘,
35       ‘@‘: resolve(‘src‘),
36     }
37   },
38   // 模块
39   module: {
40     rules: [
41       {
42         test: /\.vue$/,
43         loader: ‘vue-loader‘,
44         options: vueLoaderConfig
45       },
46       {
47         test: /\.js$/,
48         loader: ‘babel-loader‘,
49         include: [resolve(‘src‘), resolve(‘test‘), resolve(‘node_modules/webpack-dev-server/client‘)]
50       },
51       {
52         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
53         loader: ‘url-loader‘,
54         options: {
55           limit: 10000,
56           name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
57         }
58       },
59       {
60         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
61         loader: ‘url-loader‘,
62         options: {
63           limit: 10000,
64           name: utils.assetsPath(‘media/[name].[hash:7].[ext]‘)
65         }
66       },
67       {
68         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
69         loader: ‘url-loader‘,
70         options: {
71           limit: 10000,
72           name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
73         }
74       }
75     ]
76   },
77   node: {
78     //阻止webpack注入无用的setImmediate polyfill,因为Vue
79     // source包含它(尽管只有它是原生的才使用它)。
80     setImmediate: false,
81     //阻止webpack向模块本机模块注入模拟
82     //对客户没有意义
83     dgram: ‘empty‘,
84     fs: ‘empty‘,
85     net: ‘empty‘,
86     tls: ‘empty‘,
87     child_process: ‘empty‘
88   }
89 }

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

时间: 2024-10-08 00:02:53

vue - webpack.base.conf.js的相关文章

vue-cli脚手架build目录中的webpack.base.conf.js配置文件

此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件,主要用来处理各种文件的配置 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 上代码 // 引入nodejs路径模块 var path = require('path') // 引入utils工具模块,具体查看我的博客关于utils的解释,utils主要用来处理css-loader和vue-st

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.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

vue - webpack.dev.conf.js for merge

webpack-merge提供了一个merge连接数组并合并创建新对象的对象的函数.如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值包装在函数中. 这种行为在配置webpack时特别有用,尽管它有超出它的用途.无论何时需要合并配置对象,webpack-merge都可以派上用场. 栗子: 1 const devWebpackConfig = merge(baseWebpackConfig, { 2 module: { 3 rules: utils.styleLoaders({ so

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-cli脚手架之webpack.prod.conf.js

webpack.prod.conf.js 生产环境配置文件: 'use strict'//js严格模式执行 const path = require('path')//这个模块是发布到NPM注册中心的NodeJS"路径"模块的精确副本 const utils = require('./utils')//utils.js文件 const webpack = require('webpack')//webpack模块 const config = require('../config')/

vue-cli脚手架build目录中的webpack.prod.conf.js配置文件

// 下面是引入nodejs的路径模块 var path = require('path') // 下面是utils工具配置文件,主要用来处理css类文件的loader var utils = require('./utils') // 下面引入webpack,来使用webpack内置插件 var webpack = require('webpack') // 下面是config目录下的index.js配置文件,主要用来定义了生产和开发环境的相关基础配置 var config = require

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 旧版