webpack 多页面模式配置

柔情只为你懂 2022-01-09 12:43 273阅读 0赞

2018年1月3日

因为工作安排，最近在搞前端

目录结构

![474883-20180103172353409-1632479497.jpg][]

package.json

{
      "name": "multientry",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack --colors"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^16.2.0",
        "react-dom": "^16.2.0"
      },
      "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-plugin-transform-react-jsx": "^6.24.1",
        "babel-preset-es2015": "^6.24.1",
        "clean-webpack-plugin": "^0.1.17",
        "html-webpack-plugin": "^2.30.1",
        "webpack": "^3.10.0"
      }
    }

webpack.config.js

var path = require("path");
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    
    module.exports = function () {
        let set = {
            entry: {
                a: './src/script/a.jsx',
                b: './src/script/b.jsx',
                c: './src/script/c.jsx',
                vendor: ['react', 'react-dom']
            },
            output: {
                path: path.resolve(__dirname, 'dist'),//输出的文件路径
                filename: 'js/[name]-[chunkhash].js'//输出的js文件名
            },
            resolve: {
                extensions: ['.jsx', '.js', '.es6', 'json']
            },
            module: {
                rules: [
                    {
                        test: /\.jsx$/,
                        use: 'babel-loader',
                        include: path.resolve(__dirname, 'src/script')
                    }
                ]
            },
            plugins: [
                new CleanWebpackPlugin(['dist']),
                new webpack.optimize.CommonsChunkPlugin({
                    name: 'vendor'
                })
            ]
        }
    
        Object.keys(set.entry).forEach(v => {
            if (v !== 'main' && v !== 'index' && v !== 'vendor') {
                set.plugins.push(
                    new HtmlWebpackPlugin({
                        filename: v + '.html',//输出的html路径
                        template: 'index.html', //html模板路径
                        //inject : 'head',  // js 文件在 head 中，若为 body 或者 true 则在 body 中
                        inject: true,
                        title: 'this is ' + v + '.html',
                        chunks: ['vendor', v] // 要加入公共文件的引用，否则会报错
                    })
                )
            }
        })
    
        
        return set;
    }

.bablerc

{
      "plugins": [
        "transform-react-jsx"
      ],
      "presets": [
        "es2015"
      ]
    }

index.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>
            <%= htmlWebpackPlugin.options.title%>
        </title>
    
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    
    </html>

a.jsx

import React from 'react';
    import ReactDOM from 'react-dom';
    
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('app')
    );

转载于:https://www.cnblogs.com/lswit/p/8184810.html

[474883-20180103172353409-1632479497.jpg]: /images/20220109/4d5d492c07f447b0ae429494f7941c79.png

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 实现自动化多页面打包

一、为什么要使用自动化多页面打包二、实现三、结果 -------------------- 一、为什么要使用自动化多页面打包当我们有多个入口时，若是手动一个

布满荆棘的人生/ 2023年06月25日 14:25/ 0 赞/ 27 阅读

相关 Webpack5构造React多页面应用

![format_png][] 来源 | https://github.com/zhedh/react-multi-page-app/ 介绍 react-

╰半橙微兮°/ 2023年01月03日 12:42/ 0 赞/ 113 阅读

相关 webpack打包HTML配置自动,记webpack下进行普通模块化开发基础配置（自动打包生成html、多入口多页面）...

写本记时(2018-06-25)的各版本 "webpack": "^4.6.0" //可直接使用4x以上的开发模式，刷新很快 "webpack-dev-server":

绝地灬酷狼/ 2022年10月06日 07:58/ 0 赞/ 235 阅读

相关 webpack学习（十一）：构建多页面应用

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

水深无声/ 2022年04月06日 18:59/ 0 赞/ 253 阅读

相关使用Webpack构建SPA模式的多页面应用（基于Vue 2）

背景 Webpack构建后生成的包实在太大了，特别是大型项目，编译后得到一个庞然大物真是个恶梦。那么问题来了，有解决办法吗？当然，我们可以指定一组文件（组件）生成到一

电玩女神/ 2022年04月06日 18:39/ 0 赞/ 294 阅读

相关 Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

0. 前言早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章，当时也是我在做自己一个个人项目时遇到的配置问题，想到别人也可能遇

Bertha 。/ 2022年03月30日 14:18/ 0 赞/ 564 阅读

相关 Web —— 单页面和多页面模式

一、前言　　前端部分的搭建，需要考虑使用哪种模式进行页面之间的跳转交互，　　而项目内的页面交互，不可避免的需要相互之间的数据共享。　　这就引出了本篇博客的目的，

电玩女神/ 2022年01月29日 01:19/ 0 赞/ 607 阅读

相关 webpack 多页面模式配置

2018年1月3日因为工作安排，最近在搞前端目录结构 ![474883-20180103172353409-1632479497.jpg][] package.js

柔情只为你懂/ 2022年01月09日 12:43/ 0 赞/ 274 阅读

相关 webpack多页面打包配置

单页面应用：整个应用里面只有一个html文件。现在主流的框架，vue，react都是单页面应用。所以webpack绝大部分都是对单页面打包。那么webpack如何对多页面进

柔光的暖阳◎/ 2021年10月25日 12:34/ 0 赞/ 482 阅读

相关 webpack4 多页面打包

方式一: 将entry修改为对象形式的多入口方式,每个入口对应对应一个html-webpack-plugin 通过html-webpack-plug

我会带着你远行/ 2021年07月24日 11:00/ 0 赞/ 500 阅读