110 lines
2.3 KiB
JavaScript
110 lines
2.3 KiB
JavaScript
|
const path = require('path');
|
||
|
|
const webpack = require('webpack');
|
||
|
|
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||
|
|
|
||
|
|
/*
|
||
|
|
* SplitChunksPlugin is enabled by default and replaced
|
||
|
|
* deprecated CommonsChunkPlugin. It automatically identifies modules which
|
||
|
|
* should be splitted of chunk by heuristics using module duplication count and
|
||
|
|
* module category (i. e. node_modules). And splits the chunks…
|
||
|
|
*
|
||
|
|
* It is safe to remove "splitChunks" from the generated configuration
|
||
|
|
* and was added as an educational example.
|
||
|
|
*
|
||
|
|
* https://webpack.js.org/plugins/split-chunks-plugin/
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||
|
|
|
||
|
|
/*
|
||
|
|
* We've enabled HtmlWebpackPlugin for you! This generates a html
|
||
|
|
* page for you when you compile webpack, which will make you start
|
||
|
|
* developing and prototyping faster.
|
||
|
|
*
|
||
|
|
* https://github.com/jantimon/html-webpack-plugin
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
module.exports = {
|
||
|
|
mode: 'development',
|
||
|
|
entry: path.resolve(__dirname, 'src/index.js'),
|
||
|
|
|
||
|
|
output: {
|
||
|
|
filename: '[name].[chunkhash].js',
|
||
|
|
path: path.resolve(__dirname, 'dist')
|
||
|
|
},
|
||
|
|
|
||
|
|
plugins: [
|
||
|
|
new webpack.ProgressPlugin(),
|
||
|
|
new HtmlWebpackPlugin({
|
||
|
|
template: path.resolve(__dirname, 'src/index.html'),
|
||
|
|
}),
|
||
|
|
new VueLoaderPlugin(),
|
||
|
|
],
|
||
|
|
|
||
|
|
module: {
|
||
|
|
rules: [
|
||
|
|
{
|
||
|
|
test: /\.vue$/,
|
||
|
|
exclude: /node_modules/,
|
||
|
|
loader: 'vue-loader',
|
||
|
|
options: {
|
||
|
|
loaders: {
|
||
|
|
'scss': 'vue-style-loader!css-loader!sass-loader',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
test: /\.scss$/,
|
||
|
|
use: [
|
||
|
|
'style-loader',
|
||
|
|
'css-loader',
|
||
|
|
'sass-loader'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
test: /\.js$/,
|
||
|
|
exclude: /node_modules/,
|
||
|
|
loader: 'babel-loader',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
test: /\.css$/,
|
||
|
|
use: [
|
||
|
|
'vue-style-loader',
|
||
|
|
'css-loader'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
|
||
|
|
resolve: {
|
||
|
|
extensions: ['.js', '.vue', '.json'],
|
||
|
|
alias: {
|
||
|
|
'vue$': 'vue/dist/vue.esm.js',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
devtool: '#eval-source-map',
|
||
|
|
|
||
|
|
optimization: {
|
||
|
|
splitChunks: {
|
||
|
|
cacheGroups: {
|
||
|
|
vendors: {
|
||
|
|
priority: -10,
|
||
|
|
test: /[\\/]node_modules[\\/]/
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
chunks: 'async',
|
||
|
|
minChunks: 1,
|
||
|
|
minSize: 30000,
|
||
|
|
name: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
devServer: {
|
||
|
|
open: true
|
||
|
|
}
|
||
|
|
};
|