webpack多页面配置

目录

• webpack多页面配置

 

webpack多页面配置

相比于单页面配置，有几个注意的点

1 入口

    entry: {
        'index': "./src/js/index.js",
        'detail':"./src/js/detail.js"
    },

2 出口 filename 改成[name]

    //出口
    output: {
        //不配置默认输出到dist目录
        path: path.resolve(__dirname, './dev'),
        //这里的哈希值会通过htmlwebpackplugin插件引入到html上
        // filename: "index-[hash].js"
        filename:"[name]-[hash].js"
    },

3 插件 用两个htmlWebpackPlugin，改name和chunk，miniCssExtractPlugin 改成[name]

new htmlWebpackPlugin({
            //这里设置的值可在index页面调用<%= %>
            title: "htmlWP set detailtitle",
            //配置入口js文件对应的html模板
            template: "./src/views/detail.html",
            // 模板名
            filename: 'detail.html',
            // 指定页面加载时要加载的js,防止加载此页面的时候加载其他js
            chunks: ['detail']
        }),
        new miniCssExtractPlugin(
            {
                //此处绑定的是css不是js
                filename: '[name]-[hash].css'
            }
        )

配置文件

/* 
    多页面
*/
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
//这个不需要引入
// const devServer = require('webpack-dev-server');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {

    //开发模式
    mode: "development",
    //入口
    entry: {
        'index': "./src/js/index.js",
        'detail':"./src/js/detail.js"
    },
    //出口
    output: {
        //不配置默认输出到dist目录
        path: path.resolve(__dirname, './dev'),
        //这里的哈希值会通过htmlwebpackplugin插件引入到html上
        // filename: "index-[hash].js"
        filename:"[name]-[hash].js"
    },
    //配置热更新服务webpack-dev-server
    devServer: {
        //监听端口
        port: 9099,
        //开启服务是否打开页面
        open: true
    },
    //插件
    plugins: [
        new htmlWebpackPlugin({
            //这里设置的值可在index页面调用<%= %>
            title: "htmlwebpackplugin set title",
            //配置入口js文件对应的html模板
            template: "./src/views/index.html",
            // 模板名
            filename: 'index.html',
            // 指定页面加载时要加载的js,防止加载此页面的时候加载其他js
            chunks: ['index']
        }),
        new htmlWebpackPlugin({
            //这里设置的值可在index页面调用<%= %>
            title: "htmlWP set detailtitle",
            //配置入口js文件对应的html模板
            template: "./src/views/detail.html",
            // 模板名
            filename: 'detail.html',
            // 指定页面加载时要加载的js,防止加载此页面的时候加载其他js
            chunks: ['detail']
        }),
        new miniCssExtractPlugin(
            {
                //此处绑定的是css不是js
                filename: '[name]-[hash].css'
            }
        )
    ],
    //配置scss解析并绑定给import它的js文件
    module: {
        rules: [
            {
                //正则筛选
                test: /s[ac]ss$/,
                //指定要用的loader
                use: [
                    //指定内部样式
                    // 'style-loader',
                    //指定外部样式
                    miniCssExtractPlugin.loader,
                    //指定css
                    'css-loader',
                    //把sass转成css
                    'sass-loader'
                ]
            }
        ]
    }
}