描述:webpack打包项目时的配置文件.

命令:yarn run buildnpm run build

打包后,生成的文件在dist文件夹下

打包后,要在服务器环境下运行!!!

关于怎样运行,请查看:https://www.cnblogs.com/cisum/p/9370163.html ,

 'use strict'

 // 路径
const path = require('path')
// utils
const utils = require('./utils')
// webpack打包
const webpack = require('webpack')
// 来自cofig/index.js
const config = require('../config')
// 对象合并
const merge = require('webpack-merge')
// webpack基本配置
const baseWebpackConfig = require('./webpack.base.conf') const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const env = require('../config/prod.env') const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
// 混淆加密JavaScript
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// 将css提取到自己的文件中
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
//将以下选项设置为“false”将不会从codesplit块中提取CSS。
//当webpack加载了codesplit块时,他们的CSS将使用style-loader动态插入。
//它当前设置为“true”,因为我们看到源代码包含在codesplit包中,当它是“false”时,
//增加文件大小:https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
//压缩提取的CSS。 我们正在使用这个插件,以便可能
//可以删除来自不同组件的重复CSS。
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
//使用正确的资产哈希生成dist index.html以进行缓存。
//您可以通过编辑/index.html来自定义输出
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// 更多选项:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// 通过CommonsChunkPlugin持续使用多个块的必要条件
chunksSortMode: 'dependency'
}),
// 原本模块没有改变时,保持module.id稳定
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// 将原本模块js拆分为自己的文件
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks(module) {
// node_modules中的任何必需模块都将解压缩到原模块
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}), //将webpack运行时和模块清单提取到自己的文件中
//每当应用程序包更新时,都会阻止更新供应商哈希
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}), //此实例从代码拆分块中提取共享块并捆绑它们
//在一个单独的块中,类似于供应商块
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}), // 复制自定义静态目录
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
}) // 配置Gzip压缩
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
} // 使用交互式可缩放树形图可视化webpack输出文件的大小
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
} module.exports = webpackConfig

11

vue - webpack.prod.conf.js的更多相关文章

  1. vue-cli脚手架之webpack.prod.conf.js

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

  2. vue - webpack.base.conf.js

    描述:webapck基本配置文件. 为了给开发文件和打包文件(webpack.dev.conf.js|| webpack.prod.conf.js) 提供方便. 'use strict' // 路径 ...

  3. vue-cli脚手架npm相关文件解读(2)webpack.prod.conf.js

    系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...

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

    // 下面是引入nodejs的路径模块 var path = require('path') // 下面是utils工具配置文件,主要用来处理css类文件的loader var utils = req ...

  5. vue - webpack.dev.conf.js

    描述:开发时的配置.(配置开发时的一些操作) 例如这里,是否自动打开浏览器(默认true) 'use strict' // build/util.js const utils = require('. ...

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

    'use strict' const path = require('path') const utils = require('./utils') const webpack = require(' ...

  7. webpack.prod.conf.js

    // 引入依赖模块 var path = require('path') var utils = require('./utils') var webpack = require('webpack') ...

  8. vue - webpack.dev.conf.js for merge

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

  9. vue - webpack.dev.conf.js for FriendlyErrorsPlugin

    描述:webpack网页端友好的报错信息就来自它 官网:https://www.npmjs.com/package/friendly-errors-webpack-plugin new Friendl ...

随机推荐

  1. [mysql] 删除唯一约束unique

    alter table ot_document drop index title

  2. 《深入理解Android2》读书笔记(四)

    接上篇<深入理解Android2>读书笔记(三) ActivityManagerService(AMS) 1.AMS由ActivityManagerNative(AMN)类派生,并实现Wa ...

  3. (1)go 环境搭建

    1 .下载安装 https://golang.org/ 2.环境变量配置 安装后会自动配置三个环境变量 (1) GOROOT: (2) PATH: (3) GOPATH GOPATH 从1.8开始,w ...

  4. 训练continue

    11.16 树状数组 http://codeforces.com/contest/1070/problem/C digit sum+% dp http://codeforces.com/contest ...

  5. oracle return code 2112

    SQL-02112 SELECT..INTO returns too many rows Cause: A SELECT...INTO statement returned more rows tha ...

  6. uva 10910(子集和问题)

    Marks Distribution Time limit: 3.000 seconds In an examination one student appeared in N subjects an ...

  7. 背包问题(dp基础)

    题目描述: 在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2……Wn(Wi为整数),与之相对应的价值为P1,P2……Pn(Pi为整数).求背包能够容纳的最大价值. Input 第1 ...

  8. Python标准库:内置函数divmod(a, b)

    本函数是实现a除以b,然后返回商与余数的元组. 如果两个参数a,b都是整数,那么会采用整数除法,结果相当于(a//b, a % b).如果a或b是浮点数,相当于(math.floor(a/b), a% ...

  9. Problem I: 零起点学算法88——青年歌手大奖赛_评委会打分

    #include<stdio.h> int main(void) { ],n,i; while(scanf("%d",&n)!=EOF) { n>& ...

  10. MYSQL复习笔记7-索引

    Date: 20140207Auth: Jin 索引是根据表中一列或若干列按照一定顺序建立的列值与记录行之间的对应关系表. 索引的主要作用 快速存取数据 保证数据记录的唯一性 实现表与表之间的参照完整 ...