Last active
March 24, 2018 07:24
-
-
Save ramosmerino/aa7bf6cf2e1e2b5f3f02ec667e584915 to your computer and use it in GitHub Desktop.
Production build configuration for a personal project using Vue+Vuetify and Webpack 4, with ExtractTextPlugin and SplitChunks.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log('build.js') | |
const rm = require('rimraf') | |
const path = require('path') | |
const chalk = require('chalk') | |
const webpack = require('webpack') | |
const config = require('./config') | |
const webpackConfig = require('./webpack.prod.conf') | |
const t0 = process.hrtime() | |
console.log(chalk.gray('---------------------PRODUCCIÓN----------------------')) | |
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { | |
if (err) throw err | |
webpack(webpackConfig, function (err, stats) { | |
if (err) throw err | |
process.stdout.write(stats.toString({ | |
colors: true, | |
modules: false, | |
children: false, | |
chunks: false, | |
chunkModules: false | |
}) + '\n') | |
if (stats.hasErrors()) { | |
console.log(chalk.red(' Error.')) | |
process.exit(1) | |
} | |
const t1 = process.hrtime(t0) | |
console.log(chalk.cyan(' Completado en ' + (t1[0]) + '.' + (t1[1]) + ' segundos.')) | |
console.log(chalk.cyan(' A las: ' + new Date())) | |
}) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log('config.js') | |
// Based on template version: 1.1.3 | |
// see http://vuejs-templates.github.io/webpack for documentation. | |
const path = require('path') | |
module.exports = { | |
build: { | |
env: { NODE_ENV: '"production"' }, | |
index: path.resolve(__dirname, '/build-app/index.html'), | |
assetsRoot: path.resolve(__dirname, '/build-app/assets'), | |
assetsSubDirectory: 'static', | |
assetsPublicPath: '/', | |
productionSourceMap: false, | |
// Gzip off by default as many popular static hosts such as | |
// Surge or Netlify already gzip all static assets for you. | |
// Before setting to `true`, make sure to: | |
// npm install --save-dev compression-webpack-plugin | |
productionGzip: false, | |
productionGzipExtensions: ['js', 'css'], | |
// Run the build command with an extra argument to | |
// View the bundle analyzer report after build finishes: | |
// `npm run build --report` | |
// Set to `true` or `false` to always turn it on or off | |
//bundleAnalyzerReport: process.env.npm_config_report | |
bundleAnalyzerReport: false | |
}, | |
dev: { | |
env: { NODE_ENV: '"development"' }, | |
port: process.env.PORT || 8080, | |
autoOpenBrowser: true, | |
assetsSubDirectory: 'static', | |
assetsPublicPath: '/', | |
proxyTable: {}, | |
// CSS Sourcemaps off by default because relative paths are "buggy" | |
// with this option, according to the CSS-Loader README | |
// (https://github.com/webpack/css-loader#sourcemaps) | |
// In our experience, they generally work as expected, | |
// just be aware of this issue when enabling this option. | |
cssSourceMap: false | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"scripts": { | |
"build": "node build/build.js", | |
}, | |
"dependencies": { | |
"vue": "2.5.x", | |
}, | |
"devDependencies": { | |
"babel-core": "6.26.x", | |
"babel-loader": "7.1.4", | |
"babel-minify": "0.x.x", | |
"babel-plugin-transform-runtime": "6.x.x", | |
"babel-register": "6.x.x", | |
"chalk": "2.3.2", | |
"connect-history-api-fallback": "1.x.x", | |
"copy-webpack-plugin": "4.x.x", | |
"cross-env": "5.1.4", | |
"cross-spawn": "5.x.x", | |
"css-loader": "0.28.11", | |
"eventsource-polyfill": "0.9.x", | |
"extract-text-webpack-plugin": "^4.0.0-beta.0", | |
"file-loader": "1.1.11", | |
"friendly-errors-webpack-plugin": "1.6.x", | |
"html-webpack-plugin": "3.1.0", | |
"inject-loader": "3.0.x", | |
"node-sass": "4.8.3", | |
"opn": "5.3.0", | |
"optimize-css-assets-webpack-plugin": "4.0.0", | |
"portfinder": "1.0.x", | |
"sass-loader": "6.0.7", | |
"style-loader": "0.20.3", | |
"url-loader": "1.0.1", | |
"vue-loader": "14.2.2", | |
"vue-style-loader": "4.1.0", | |
"vue-template-compiler": "2.x.x", | |
"webpack": "^4.2.0", | |
"webpack-bundle-analyzer": "2.11.1", | |
"webpack-dev-middleware": "3.0.1", | |
"webpack-hot-middleware": "2.21.2", | |
"webpack-merge": "4.1.2" | |
}, | |
"engines": { | |
"node": ">= 6.0.0", | |
"npm": ">= 3.0.0" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log('webpack.base.conf.js') | |
const path = require('path') | |
const utils = require('./utils') | |
const config = require('./config') | |
const ExtractTextPlugin = require('extract-text-webpack-plugin') | |
function resolve(dir) { | |
return path.join(__dirname, '..', dir) | |
} | |
module.exports = { | |
entry: { | |
app: "./src/main.js" | |
}, | |
output: { | |
path: config.build.assetsRoot, | |
filename: "[name].js", | |
publicPath: process.env.NODE_ENV === "production" ? | |
config.build.assetsPublicPath : | |
config.dev.assetsPublicPath | |
}, | |
resolve: { | |
extensions: [".js", ".vue", ".json"], | |
symlinks: false, | |
alias: { | |
vue$: "vue/dist/vue.runtime.esm.js", | |
"@": resolve("src") | |
} | |
}, | |
module: { | |
rules: [{ | |
test: /\.vue$/, | |
loader: "vue-loader", | |
include: [resolve("src")], | |
options: { | |
loaders: ExtractTextPlugin.extract({ | |
use: [{ | |
loader: 'vue-style-loader', | |
options: { | |
minimize: true, | |
processCssUrls: false, | |
sourceMap: false, | |
} | |
}, | |
{ | |
loader: 'css-loader', | |
options: { | |
minimize: true, | |
processCssUrls: false, | |
sourceMap: false, | |
} | |
}], | |
fallback: 'vue-style-loader' | |
}), | |
transformToRequire: { | |
video: "src", | |
source: "src", | |
img: "src", | |
image: "xlink:href" | |
} | |
} | |
}, | |
{ | |
test: /\.js$/, | |
loader: "babel-loader?cacheDirectory", | |
include: [resolve("src"), resolve("test")] | |
}, | |
{ | |
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, | |
loader: "url-loader", | |
options: { | |
limit: 10000, | |
name: utils.assetsPath("img/[name].[hash:7].[ext]") | |
} | |
}, | |
{ | |
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, | |
loader: "url-loader", | |
options: { | |
limit: 10000, | |
name: utils.assetsPath("media/[name].[hash:7].[ext]") | |
} | |
}, | |
{ | |
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, | |
loader: "url-loader", | |
options: { | |
limit: 10000, | |
name: utils.assetsPath("fonts/[name].[hash:7].[ext]") | |
} | |
} | |
] | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log('webpack.prod.conf.js') | |
const path = require('path') | |
const utils = require('./utils') | |
const webpack = require('webpack') | |
const config = require('./config') | |
const merge = require('webpack-merge') | |
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 env = process.env.NODE_ENV === 'testing' | |
? { | |
NODE_ENV: 'testing' | |
} | |
: { | |
NODE_ENV: 'production' | |
} | |
const webpackConfig = merge(baseWebpackConfig, { | |
mode: process.env.NODE_ENV === 'testing' ? 'development' : 'production', | |
module: { | |
rules: utils.styleLoaders({ | |
sourceMap: config.build.productionSourceMap, | |
extract: true | |
}) | |
}, | |
devtool: config.build.productionSourceMap ? '#source-map' : 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 | |
}), | |
// ExtractTextPlugin extract css into its own file (must be version ^4.0.0-beta) | |
new ExtractTextPlugin({ | |
filename: utils.assetsPath('css/[name].[contenthash].css') | |
}), | |
// Compress extracted CSS. We are using this plugin so that possible | |
// duplicated CSS from different components can be deduped. | |
new OptimizeCSSPlugin({ | |
cssProcessorOptions: { | |
safe: true | |
} | |
}), | |
// generate dist index.html with correct asset hash for caching. | |
// you can customize output by editing /index.html | |
// see https://github.com/ampedandwired/html-webpack-plugin | |
new HtmlWebpackPlugin({ | |
filename: | |
process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, | |
template: 'index.html', | |
inject: true, | |
minify: { | |
removeComments: true, | |
collapseWhitespace: true | |
// more options: | |
// https://github.com/kangax/html-minifier#options-quick-reference | |
}, | |
}), | |
new webpack.HashedModuleIdsPlugin(), | |
new CopyWebpackPlugin([ | |
{ | |
from: path.resolve(__dirname, '../static'), | |
to: config.build.assetsSubDirectory, | |
ignore: ['.*'] | |
} | |
]) | |
] | |
}); | |
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 | |
}) | |
) | |
} | |
if (config.build.bundleAnalyzerReport) { | |
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin | |
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) | |
} | |
module.exports = webpackConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Don't forget to upgrade extract-text-webpack-plugin: | |
yarn upgrade extract-text-webpack-plugin@next --dev |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment