webpack3.x 多入口打包的简单配置

目录结构
dist是生成的目录
pages是你的多入口文件的目录
我把每个入口的文件的js和css都抽离出来了，静态资源集中放在同一个目录

首先是 webpack.config.js

const webpack = require('webpack');const path = require('path');// 匹配文件const glob = require('glob')// 自动安装比如JS中的require import的未安装的依赖const NpmInstallPlugin = require('npm-install-webpack-plugin');// 提取css文件const ExtractTextPlugin = require("extract-text-webpack-plugin");// 清空打包后的目录const CleanWebpackPlugin = require('clean-webpack-plugin');//生成HTML模板 const HtmlWebpackPlugin = require('html-webpack-plugin')// webpack服务const wepackDevServer = require('webpack-dev-server')// 提取jsonvar GenerateAssetPlugin = require('generate-asset-webpack-plugin');// 压缩混淆jsconst UglifyJSPlugin = require('uglifyjs-webpack-plugin');// 动态获取所有入口文件const getEntries = () => {    let obj = {};    glob.sync(path.join(__dirname, './pages/*'), {}).forEach(item => {        obj[`${item.split('/').pop()}`] = `${item}/index.js`    })    return obj}const webConfig = module.exports = {//  entry: {//      app: './pages/test/index.js',//      // 应用程序开始执行//  },    entry: getEntries(),    devtool: 'inline-source-map',    output: {        filename: './[name]/[name].[hash:5].js', // 文件名称        path: path.resolve(__dirname, 'dist'), // 打包后文件输出的目录        publicPath: '../', //指定资源文件引用的目录     当前打包的文件夹    },    devServer: {        // 告诉服务器从哪里提供内容        contentBase: path.resolve(__dirname, 'static'),        // 是否压缩        compress: true,        publicPath: '/',        // 指定端口号        port: 9000      },    module: {        rules: [            {                test: /\.js$/,                exclude: /node_modules/,                use: ['babel-loader']            },            {                test: /\.(css|sass|less|scss)$/,                exclude: /node_modules/,                use: ExtractTextPlugin.extract({                    fallback: 'style-loader', // 当css没有被提取的loader                    use: [                        {                            loader: 'css-loader',                            options: {                                 minimize: true //css压缩                            }                        },                        {                            loader: 'postcss-loader', // 浏览器兼容等                            options: {                                 minimize: true //css压缩                            }                        }                    ]                })            },            {                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,                exclude: /node_modules/,                loader: 'url-loader',                options: {                    limit: 8192,                    name: '[name].[hash:5].[ext]',                    outputPath: './static/images/'                }            },            {                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,                exclude: /node_modules/,                loader: 'url-loader',                options: {                    limit: 8192,                    name: '[name].[hash:5].[ext]',                    outputPath: './static/fonts/'                    // outputPath: './xy/fonts/'                    // outputPath: './test/fonts/'                }            },            {                test: /\.html$/,                exclude: /node_modules/,                use: [{                    loader: 'html-loader',                    options: {                        minmize: true                    }                }]            },            {                test: /\.json$/,                exclude: /node_modules/,                loader: 'file-loader',                options: {                    limit: 0,                    name: '[name].[hash:5].[ext]',                    outputPath: './static/json/',                }            }        ]    },    plugins: [        // 启用HMR  webpack的热加载        new webpack.HotModuleReplacementPlugin(),        /*         * 生成带有hash的css js引用的html文件实例         * filename 指定要生成的html文件         * template 生成的html模板  可以指定你的原始html文件当做模板         * chunks 指定需要的快  比如下面的test就需要test里面的css、js啥的，就可以直接给个['test']就可以了         * *///      new HtmlWebpackPlugin({//          filename: './test/index.html',//          template: './pages/test/index.html',//          chunks: ['test']//      }),//      //      new HtmlWebpackPlugin({//          filename: './xy/index.html',//          template: './pages/xy/crm/index.html',//          chunks: ['xy']//      }),        // 自动安装依赖        //  new NpmInstallPlugin(),        // 清空dist目录实例        new CleanWebpackPlugin(['dist']),        // 提取并生成css实例  控制css的输出在这里        new ExtractTextPlugin('./[name]/[name].[hash:5].css'),        new UglifyJSPlugin()    ]}    // 引入多入口的目录    const pageArr = require('./pageArr.config.js')    pageArr.forEach((page) => {      const htmlPlugin = new HtmlWebpackPlugin({        filename: `./${page}/index.html`, // 根目录是dist        template:  `./pages/${page}/index.html`, // 根目录就是当前根目录        chunks: [page],//      title: ,        hash: true, // 为静态资源生成hash值//      minify: true,//      xhtml: true,//      showErrors: true      });      webConfig.plugins.push(htmlPlugin);    });

postcss.config.js 的配置

module.exports = {    plugins: [        require('autoprefixer')({            browsers: ['last 5 versions']        })    ]}

pageArr.config.js 的配置 这个就是你的多文件目录的文件夹名字 避免每次都new一个 HtmlWebpackPlugin

module.exports = [  'xy',  'test'];

我感觉比较容易晕的还是路径的 配置 这个自己多写写 多试试 就明白啦 小弟还很菜 希望大佬们多多关照 多多提建议 感谢大佬 给大佬递茶