打包html静态资源包,webpack打包多页面如何静态资源单独打包呢？

正常情况下，webpack打包好后的页面结构为

static

index.js

index.html

目前我是多页面，打包好后的结构如下：

static

page1

index.js

index.html

page2

index.js

index.html

这样多页面共用以上 一个static文件，如何打包多页面之后，每个html页面有自己页面的static互不影响呢？

贴上现在的webpack配置

webpack.prod.js

const merge = require('webpack-merge');

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const common = require('./webpack.common.js');

const path = require('path')

const BUILD_PATH = path.resolve(__dirname,'dist') // 打包模板生成路径

module.exports = merge(common, {

output: { // 出口文件

path: BUILD_PATH,

publicPath: '/',

filename: '[name]/[name].js' //输出文件

},

devtool: 'source-map',

plugins: [

new CleanWebpackPlugin(['dist']),

new UglifyJSPlugin({

sourceMap: true

})

]

});

weback.common.js

const webpack = require("webpack");

const path = require('path');

const glob = require('glob');

const HtmlWebpackPlugin = require('html-webpack-plugin'); // html引擎

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

let outputfile = ''

function buildEntriesAndHTML() {

// 用来构建entry

const result = glob.sync('views/**/*.js');

const config = {

hash: false,

inject: true

};

const entries = {};

const htmls = [];

result.forEach(item => {

const one = path.parse(item);

outputfile = one.dir.split('/').slice(-1)[0];

entries[outputfile] = './' + item;

const filename = {

'development':'./' + outputfile + '/index.html',

'production':'./' + outputfile + '/'+outputfile+'.html',

}

htmls.push(

new HtmlWebpackPlugin({

...config,

template: './' + one.dir + '/index.html',

filename: filename[process.env.NODE_ENV], // 输出html文件的路径

title:outputfile+'模版',

chunks: [outputfile]

})

);

});

if (htmls.length > 0) {

htmls.push(new HtmlWebpackInlineSourcePlugin());

}

return {

entries,

htmls

};

}

const final = buildEntriesAndHTML();

module.exports = {

entry: final.entries,

module: {

rules: [

{

test: /\.css$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader',

{loader: 'postcss-loader', options: {plugins: [require("autoprefixer")("last 100 versions")]}}

]

},

{

test: /\.less$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader?importLoaders=1',

{loader: 'postcss-loader', options: {plugins: [require("autoprefixer")("last 100 versions")]}},

'less-loader'

]

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

/*use:[

{

loader: 'url-loader',

options: {

limit: 1024 * 10,

name: 'image/[name].[ext]',

fallback: 'file-loader'

}

},

{

loader: 'image-webpack-loader',// 压缩图片

options: {

bypassOnDebug: true,

}

}

]*/

use: [

{

loader: 'file-loader',

options: {

name: outputfile+'/static/assets/[name].[ext]',

// name: './static/assets/[name].[ext]',

}

},

{

loader: 'image-webpack-loader',// 压缩图片

options: {

bypassOnDebug: true,

}

}

]

},

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|swf|mov)(\?.*)?$/,

use: [

{

loader: 'file-loader',

options: {

name: 'media/[name].[hash:7].[ext]',

}

},

]

},

{

test: /\.js$/,

exclude: [

/node_modules/,

path.resolve(__dirname, "assets/javascripts/swiper.min.js"),

],

use: {

loader: "babel-loader"

}

},

{

test: /\.html$/,

use: [

{

loader: "html-loader",

options: {minimize: true} // 加载器切换到优化模式，启用压缩。

}

]

}

]

},

plugins: [

new OptimizeCSSAssetsPlugin({

assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g

cssProcessor: require('cssnano'),

cssProcessorOptions: {

discardComments: {removeAll: true},

// 避免 cssnano 重新计算 z-index

safe: true,

// cssnano 集成了autoprefixer的功能

// 会使用到autoprefixer进行无关前缀的清理

// 关闭autoprefixer功能

// 使用postcss的autoprefixer功能

autoprefixer: false

},

canPrint: true

}),

new MiniCssExtractPlugin({

filename: '[name]/[name].css',

chunkFilename: '[name].css'

}),

...final.htmls

],

resolve: {

extensions: ['.js', '.json', '.jsx', '.css']

},

}