webpack基本構成三---複数ページのアプリケーション
3396 ワード
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: {
'index1': './src/index1.js',
'index2': './src/index2.js',
'index3': './src/index3.js'
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
//use inline-source-map for development
//devtool: 'inline-source-map',
//use source-map for production
//devtool: 'source-map',
//source-map eval-source-map cheap-module-source-map cheap-module-eval-source-map
devtool: 'eval-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [path.resolve(__dirname, 'src')],
exclude: [path.resolve(__dirname, 'node_modules')]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new BundleAnalyzerPlugin({
openAnalyzer: false,
analyzerMode: 'static',
reportFilename: 'bundle-analyzer-report.html'
}),
new HtmlWebpackPlugin({
template: './src/index1.html',
filename: 'index1.html',
chunks: ['index1', 'mainfest', 'vendor', 'common']
}),
new HtmlWebpackPlugin({
templete: './src/index2.html',
filename: 'index2.html',
chunks: ['index2', 'mainfest', 'vendor', 'common']
}),
new HtmlWebpackPlugin({
templete: './src/index3.html',
filename: 'index3.html',
chunks: ['index3', 'mainfest', 'vendor', 'common']
}),
new webpack.HashedModuleIdsPlugin()
],
optimization: {
runtimeChunk: {
"name": "manifest"
},
splitChunks: {
cacheGroups: {
default: false,
vendors: false,
vendor: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
enforce: true,
priority: 10,
name: 'vendor'
},
common: {
chunks: 'all',
minChunks: 2,
name: 'common',
enforce: true,
priority: 5
}
}
}
}
}
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}