多页面打包
'use strict' const path = require('path') const glob = require('glob') const webpack = require('webpack') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const setMPA = () => { const entry = {} const htmlWebpackPlugins = [] const entryFiles = glob.sync(path.join(__dirname, '/src/*/index.js')) // 找到src下所有包含index.js的文件夹的路径是一个路径组成的数组 console.log('entryFiles:', entryFiles) Object.keys(entryFiles).map(index => { const entryFile = entryFiles[index] // 找到对应的路径 const match = entryFile.match(/src\/(.*)\/index\.js/) const pageName = match && match[1] // 文件名 entry[pageName] = entryFile // 文件名与对应的路径构成的对象 htmlWebpackPlugins.push( new HtmlWebpackPlugin({ template: path.join(__dirname, `src/${pageName}/index.html`), // 模板文件 filename: `${pageName}.html`, chunks: [pageName], inject: true, minify: { html5: true, collapseWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } }) ) }) return { entry, htmlWebpackPlugins } } const { entry, htmlWebpackPlugins } = setMPA() module.exports = { entry: entry, output: { path: path.join(__dirname, 'dist'), filename: '[name]_[chunkhash:8].js' }, mode: 'production', module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: {} }, 'css-loader' ] }, { test: /.less$/, use: [ { loader: MiniCssExtractPlugin.loader, options: {} }, 'css-loader', 'less-loader', { loader: 'postcss-loader', options: { plugins: () => [ require('autoprefixer')({ overrideBrowserslist: [ 'Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8' ], grid: true }) ] } }, { loader: 'px2rem-loader', options: { remUnit: 75, remPrecision: 8 } } ] }, { test: /.(png|jpg|gif|jpeg)$/, use: [ { loader: 'file-loader', options: { name: '[name]_[hash:8].[ext]' } } ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css' }), new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano') }), new CleanWebpackPlugin() ].concat(htmlWebpackPlugins) }
'use strict'
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const setMPA = () => {
const entry = {}
const htmlWebpackPlugins = []
const entryFiles = glob.sync(path.join(__dirname, '/src/*/index.js')) // 找到src下所有包含index.js的文件夹的路径是一个路径组成的数组
console.log('entryFiles:', entryFiles)
Object.keys(entryFiles).map(index => {
const entryFile = entryFiles[index] // 找到对应的路径
const match = entryFile.match(/src\/(.*)\/index\.js/)
const pageName = match && match[1] // 文件名
entry[pageName] = entryFile // 文件名与对应的路径构成的对象
htmlWebpackPlugins.push(
new HtmlWebpackPlugin({
template: path.join(__dirname, `src/${pageName}/index.html`), // 模板文件
filename: `${pageName}.html`,
chunks: [pageName],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
})
)
})
return {
entry,
htmlWebpackPlugins
}
}
const { entry, htmlWebpackPlugins } = setMPA()
module.exports = {
entry: entry,
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]_[chunkhash:8].js'
},
mode: 'production',
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {}
},
'css-loader'
]
},
{
test: /.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {}
},
'css-loader',
'less-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
],
grid: true
})
]
}
},
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 8
}
}
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash:8].[ext]'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano')
}),
new CleanWebpackPlugin()
].concat(htmlWebpackPlugins)
}