Last active
August 13, 2016 14:49
-
-
Save lavezzi1/4f732b2a1fef6b5740783e61dc19e221 to your computer and use it in GitHub Desktop.
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
var path = require('path'); | |
var webpack = require('webpack'); | |
var ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
var HtmlWebpackPlugin = require('html-webpack-plugin'); | |
var glob = require('glob'); | |
// var alias = require('./configs/alias.js'); | |
var postcssModules = require('./configs/postcssModules.js'); | |
var entries = getEntry('./source/pages/**/*.js'); // Obtain entry js file | |
var chunks = Object.keys(entries); | |
module.exports = { | |
entry: entries, | |
output: { | |
path: path.resolve(__dirname, 'public'), // Output path html, css, js, image files and other resources, and all the resources files in the Public directory | |
publicPath: '/public/', // Path html, css, js, image files and other resources on the server | |
filename: 'js/[name].js', // Js file is generated for each entry configuration | |
chunkFilename: 'js/[id].js' | |
}, | |
resolve: { | |
extensions: ['', '.js', '.vue'] | |
}, | |
module: { | |
loaders: [ | |
{ | |
test: /\.css$/, | |
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') | |
}, | |
{ | |
test: /\.vue$/, | |
loader: 'vue' | |
}, | |
{ | |
test: /\.js$/, | |
loader: 'babel', | |
exclude: /node_modules/ | |
}, | |
{ | |
test: /\.(png|jpg|gif|svg)$/, | |
// Image loader, the smaller pictures turn into base64 | |
loader: 'url', | |
query: { | |
limit: 1, | |
name: './images/[name].[ext]' | |
} | |
} | |
] | |
}, | |
babel: { | |
presets: ['es2015'], | |
plugins: ['transform-runtime'] | |
}, | |
vue: { | |
loaders: { | |
js: 'babel', | |
css: ExtractTextPlugin.extract("vue-style-loader", "css-loader!postcss-loader"), | |
}, | |
postcss: postcssModules | |
}, | |
postcss: postcssModules, | |
plugins: [ | |
// Extraction common module | |
new webpack.optimize.CommonsChunkPlugin({ | |
name: 'common', // The name of the common module | |
chunks: chunks, // chunks need to extract module | |
minChunks: chunks.length | |
}), | |
// Configured to extract style files | |
new ExtractTextPlugin('css/[name].css') | |
] | |
}; | |
var prod = process.env.NODE_ENV === 'production'; | |
module.exports.plugins = (module.exports.plugins || []); | |
if (prod) { | |
module.exports.devtool = 'source-map'; | |
module.exports.plugins = module.exports.plugins.concat([ | |
// Environment Configuration | |
new webpack.DefinePlugin({ | |
'process.env': { | |
NODE_ENV: '"production"' | |
} | |
}), | |
new webpack.optimize.UglifyJsPlugin({ | |
compress: { | |
warnings: false | |
} | |
}), | |
new webpack.optimize.OccurenceOrderPlugin() | |
]); | |
} else { | |
module.exports.devtool = 'eval-source-map'; | |
module.exports.output.publicPath = '/views/'; | |
} | |
var pages = getEntry('./source/pages/**/*.html'); | |
for (var pathname in pages) { | |
// Configured to generate the html file, define paths, etc. | |
var conf = { | |
filename: prod? '../Application/Home/views/' + pathname + '.html' : pathname + '.html', // html output pathname | |
template: pages[pathname], // Template path | |
inject: true, // js insertion | |
minify: { | |
removeComments: true, | |
collapseWhitespace: false | |
} | |
}; | |
if (pathname in module.exports.entry) { | |
conf.chunks = ['common', pathname]; | |
conf.hash = false; | |
} | |
// We need to generate a html file on several HtmlWebpackPlugin object configuration | |
module.exports.plugins.push(new HtmlWebpackPlugin(conf)); | |
} | |
// According to the specific needs of the project, output the correct path js and html | |
function getEntry(globPath) { | |
var entries = {}, | |
basename, tmp, pathname; | |
glob.sync(globPath).forEach(function (entry) { | |
basename = path.basename(entry, path.extname(entry)); | |
tmp = entry.split('/').splice(+3); | |
pathname = tmp.splice(0, 1) + '/' + basename; // Correct output path of html and js | |
entries[pathname] = entry; | |
}); | |
console.log(entries); | |
return entries; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment