React + Webpack简单配置(多入口)

最新推荐文章于 2022-11-03 10:08:03 发布
最新推荐文章于 2022-11-03 10:08:03 发布
阅读量333 收藏
点赞数
文章标签： webpack javascript json ViewUI
原文链接：https://segmentfault.com/a/1190000008123920
版权

目前有写demo的文件，各个文件中有package.json和相关的node_modules，个人需求：

统一管理，不要重复的安装依赖————实现多入口；

现有目录结构如下：
图片描述

package.json

{
  "name": "front_web_demo",
  "version": "1.0.0",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config webpack.dev.config.js",
    "build": "webpack --config webpack.production.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git@git.graysoft.cn:zhangchao/front_web_demo.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-env": "^1.1.8",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-del-plugin": "0.0.1",
    "webpack-dev-server": "^2.4.1",
    "webpack-notifier": "^1.5.0"
  },
  "dependencies": {
    "chart.js": "^2.5.0",
    "jquery": "^3.1.1",
    "jstree": "^3.3.3",
    "react": "^15.4.2",
    "react-chartjs-2": "^2.0.0",
    "react-dom": "^15.4.2",
    "react-intl": "^2.2.3",
    "underscore": "^1.8.3"
  },
  "description": ""
}

webpack.dev.config.js

var webpack = require("webpack");
var path = require("path");
var glob = require("glob");

var htmlWebpackPlugin = require("html-webpack-plugin");
var webpackCopyPlugin = require("copy-webpack-plugin");
var webpackDelPlugin = require("webpack-del-plugin");
var webpackNotifierPlugin = require("webpack-notifier");

var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH,"source");
var DIST_PATH = path.resolve(ROOT_PATH,"dist");
var TEM_PATH = path.resolve(ROOT_PATH,"templates");

var ProjectArray = glob.sync(SRC_PATH + "/*/index.js");
var ProjectEntries = {};

var config = {
    entry: {
        vendors:["react","react-dom","underscore","jquery"],
        intlVendor:["react-intl"],
        jstreeVendor:["jstree"],
        chartVendors:["react-chartjs-2","chart.js"]
    },
    output:{
        path:DIST_PATH,
        filename:"[name].js"
    },
    module:{
        rules:[
            {
                test:/\.(es6|js)$/,
                use:[
                    {
                        loader:"babel-loader"
                    }
                ],
                exclude:/node_modules/
            },
            {
                test:/\.(scss|css)$/,
                use:[
                    {
                        loader:"style-loader"
                    },
                    {
                        loader:"css-loader"
                    },
                    {
                        loader:"sass-loader"
                    }
                ],
                exclude:/node_modules/
            },
            {
                test:/\.(png|jpeg|jpg|gif)$/,
                use:[
                    {
                        loader:"url-loader",
                    }
                ],
                exclude:/node_modules/
            },
            {
                test:/\.(woff2?|otf|eot|svg|ttf)$/,
                use:[
                    {
                        loader:"url-loader"
                    }
                ]
            }
        ]
    },
    plugins:[
        new webpackNotifierPlugin({excludeWarnings: true}),
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool:"cheap-eval-source-map",
    devServer:{
        host: "0.0.0.0",
        port: "6000",
        hot: true,
        inline: true,
        historyApiFallback: true
    }
};

ProjectArray.forEach(function(f){
    var regex = new RegExp(".*\/source\/(.*?)\/index\.js");
    var name = regex.exec(f)[1];
    ProjectEntries[name] = f;

    switch (name){
        case "React_i18n":
            {
                config.plugins.push(
                    new htmlWebpackPlugin({
                        title: name,
                        filename: name + '.html',
                        template: path.resolve(TEM_PATH,"./index.html"),
                        inject: "body",
                        chunks: ["vendors","intl", name]
                    })
                );
            }
            break;
        case "JSTree":
            {
                config.plugins.push(
                    new htmlWebpackPlugin({
                        title: name,
                        filename: name + '.html',
                        template: path.resolve(TEM_PATH,"./index.html"),
                        inject: "body",
                        chunks: ["vendors","jstreeVendor", name]
                    })
                );
            }
            break;
        case "weather":
            {
                config.plugins.push(
                    new htmlWebpackPlugin({
                        title: name,
                        filename: name + '.html',
                        template: path.resolve(TEM_PATH,"./index.html"),
                        inject: "body",
                        chunks: ["vendors","chartVendors", name]
                    })
                );
            }
            break;
        default:
            {
                config.plugins.push(
                    new htmlWebpackPlugin({
                        title: name,
                        filename: name + '.html',
                        template: path.resolve(TEM_PATH,"./index.html"),
                        inject: "body",
                        chunks: ["vendors", name]
                    })
                );
            }
            break;
    }
});

config.entry = Object.assign({}, config.entry, ProjectEntries);

module.exports = config;

webpack.production.config.js

var webpack = require("webpack");
var path = require("path");
var glob = require("glob");

var htmlWebpackPlugin = require("html-webpack-plugin");
var webpackCopyPlugin = require("copy-webpack-plugin");
var webpackDelPlugin = require("webpack-del-plugin");
var webpackNotifierPlugin = require("webpack-notifier");

var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH,"source");
var DIST_PATH = path.resolve(ROOT_PATH,"dist");
var TEM_PATH = path.resolve(ROOT_PATH,"templates");

var ProjectArray = glob.sync(SRC_PATH + "/*/index.js");
var ProjectEntries = {};

var config = {
    entry: {
        vendors:["react","react-dom","underscore","jquery"],
        intlVendor:["react-intl"],
        jstreeVendor:["jstree"],
        chartVendors:["react-chartjs-2","chart.js"]
    },
    output:{
        path:DIST_PATH,
        filename:"[name].js"
    },
    module:{
        rules:[
            {
                test:/\.(es6|js)$/,
                use:[
                    {
                        loader:"babel-loader"
                    }
                ],
                exclude:/node_modules/
            },
            {
                test:/\.(scss|css)$/,
                use:[
                    {
                        loader:"style-loader"
                    },
                    {
                        loader:"css-loader"
                    },
                    {
                        loader:"sass-loader"
                    }
                ],
                exclude:/node_modules/
            },
            {
                test:/\.(png|jpeg|jpg|gif)$/,
                use:[
                    {
                        loader:"url-loader",
                    }
                ],
                exclude:/node_modules/
            },
            {
                test:/\.(woff2?|otf|eot|svg|ttf)$/,
                use:[
                    {
                        loader:"url-loader"
                    }
                ]
            }
        ]
    },
    plugins:[
        new webpackDelPlugin({match: DIST_PATH}),
        new webpackNotifierPlugin({excludeWarnings: true}),
        new webpack.optimize.UglifyJsPlugin({minimize: true}),
        new webpack.optimize.CommonsChunkPlugin({
            name : 'vendors',
            filename: 'vendors.js'
        })
    ]
};

ProjectArray.forEach(function(f){
    var regex = new RegExp(".*\/source\/(.*?)\/index\.js");
    var name = regex.exec(f)[1];
    ProjectEntries[name] = f;

    switch (name){
        case "React_i18n":
        {
            config.plugins.push(
                new htmlWebpackPlugin({
                    title: name,
                    filename: name + '.html',
                    template: path.resolve(TEM_PATH,"./index.html"),
                    inject: "body",
                    chunks: ["vendors","intl", name]
                })
            );
        }
            break;
        case "JSTree":
        {
            config.plugins.push(
                new htmlWebpackPlugin({
                    title: name,
                    filename: name + '.html',
                    template: path.resolve(TEM_PATH,"./index.html"),
                    inject: "body",
                    chunks: ["vendors","jstreeVendor", name]
                })
            );
        }
            break;
        case "weather":
        {
            config.plugins.push(
                new htmlWebpackPlugin({
                    title: name,
                    filename: name + '.html',
                    template: path.resolve(TEM_PATH,"./index.html"),
                    inject: "body",
                    chunks: ["vendors","chartVendors", name]
                })
            );
        }
            break;
        default:
        {
            config.plugins.push(
                new htmlWebpackPlugin({
                    title: name,
                    filename: name + '.html',
                    template: path.resolve(TEM_PATH,"./index.html"),
                    inject: "body",
                    chunks: ["vendors", name]
                })
            );
        }
            break;
    }


    var AssetArray = glob.sync(SRC_PATH + "/"+ name +"/*/");
    AssetArray.forEach(function(f){
        var assetRegex = new RegExp(".*\/source\/"+ name +"\/(.*?)\/");
        var asset = assetRegex.exec(f)[1];

        if(asset !== "components"){
            config.plugins.push(
                new webpackCopyPlugin([
                    {
                        from:path.resolve(SRC_PATH,name,asset),
                        to:path.resolve(DIST_PATH,name,asset)
                    },
                    {
                        from:path.resolve(SRC_PATH,name,asset),
                        to:path.resolve(DIST_PATH,name,asset)
                    },
                    {
                        from:path.resolve(SRC_PATH,name,asset),
                        to:path.resolve(DIST_PATH,name,asset)
                    },
                    {
                        from:path.resolve(SRC_PATH,name,asset),
                        to:path.resolve(DIST_PATH,name,asset)
                    },
                    {
                        from:path.resolve(SRC_PATH,name,asset),
                        to:path.resolve(DIST_PATH,name,asset)
                    }
                ])
            )
        }
    })

});

config.entry = Object.assign({}, config.entry, ProjectEntries);

module.exports = config;

.babelrc

{
  "presets": [
      "react",
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

附带官网Clock组件类的代码：

var React = require('react');
var ReactDOM = require('react-dom');
var Clock = React.createClass({

getInitialState: function() {
    return {date: new Date()};
},
render:function(){
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
},
componentDidMount:function(){
    this.timerID = setInterval(
        //此处必须bind(this)，因为如果不绑定，setInterval里的this已经变化
        function(){this.tick()}.bind(this),
        1000
    );
},
componentWillUnmount:function(){
    clearInterval(this.timerID);
},

tick : function(){
    this.setState({
        date:new Date()
    })
}
});

ReactDOM.render(
    <Clock />,
    document.body
);
weixin_34255055
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React+Webpack配置开发项
Mr_Dave的博客
01-09 638
一、React+Webpack 3.10基本配置 首先：初始化npm init 1、安装react 模块 npm install -g react npm install -g react-dom 2、安装依赖包 npm install babel -g npm install webpack -g npm install webpack-dev-se
React小项目（React+webpack+nodejs）--- 一、webpack入门
github_39322772的博客
04-23 1031
 新建一个名为ReactProject文件夹，进入后执行： npm init //使用init命令来初始化一个package.json文件 执行： npm install web pack --save-dev //安装webpack 在项目根路径下新建名为webpack.config.js文件并进行配置 const path = require('path'); //入口...
react项目利用webpack从0开始配置多入口
最新发布
qq_32445707的博客
11-03 1047
最近在项目开发中遇到许多关于webpack打包配置问题，特意写一篇博文进行总结。 1、webpack打包react项目 2、打包.scss类型文件 3、打包图片类型文件【小于10kb转为base64格式】，并将打包后的图片放置指定目录下 4、copy-webpack-plugin插件的使用 5、html-webpack-plugin插件的使用 6、配置多入口 7、clean-webpack-plugin插件的使用
学习react阶段如何在一个React项目中写多个index.js入口
qq_36722315的博客
06-20 407
学习React基础，不想每次都删掉代码或者重新创建React项目 有没有什么好的办法没有好办法目前在用的：修改node_modules->react-scripts->config->path.js里面的index.js入口 这个路径也无需手动填写，在index.js外层目录右键，复制相对路径，粘贴即可...
react webpack多入口应用项目配置
Mrs_dai的博客
12-11 996
背景：目前前端主流的框架例如react、vue大多用于进行单页面开发，但是随着项目的不断扩大，如果每做一个项目都搭建一个框架有点过于浪费资源，或者在对公司的老项目进行迭代开发的时候整体架构需要做一些改善（比如很多早期的项目都是原生js或者jq写的 而且还存在还多前后端不分离的项目），在原有的项目上进行增加新的功能也会增加开发成本并且使得项目难以维护。本文章主要讲解在react项目中配置多页面多入口案例。
React官方脚手架 create-react-app的多入口配置
weixin_47232046的博客
10-14 1633
在生成react项目时候，使用Facebook官方脚手架create-react-app是一个不错的选择，但是默认只能生成一个SPA，入口是index.html。虽然页面的切换可以用前端路由来实现，但某些情况下，仍要将页面切分为多个页面，或者在同一个工程开发多个SPA，这个时候就需要将项目改为多入口 react官方对这个问题的回答是： Sorry, but Create React App doesn’t support this use case. You can eject and then confi
Webpack打包React支持多入口
08-10
Webpack打包React的脚手架，可自动识别 ./src 目录下的 .js 文件作为入口。区分多个环境，已正确配置热加载
React+TypeScript+webpack4多入口配置详解
10-16
在本文中，我们将深入探讨如何配置一个使用React、TypeScript和webpack 4的多入口项目。这个配置旨在提供良好的开发体验，高效的项目打包，并遵循团队规范。首先，我们需要确保已经安装了必要的工具和依赖。 ## ...
React + webpack 环境配置的方法步骤
12-03
最后，为了实现React组件的热更新，我们需要在webpack配置中添加`webpack.HotModuleReplacementPlugin`插件，并在`entry`中添加`webpack/hot/dev-server`： ```javascript // 在plugins数组中添加 new webpack....
浅谈react+es6+webpack的基础配置
08-29
浅谈React+ES6+Webpack的基础配置 React是一款流行的前端框架，ES6是最新的ECMAScript语法规范，Webpack是一个强大的模块打包工具。本文将带领大家从头开始，学习如何配置React+ES6+Webpack的基础环境。 一、安装...
react-一个支持多入口多页面开发的reactwebpack前端项目demo
08-14
一个支持多入口，多页面开发的react-webpack前端项目demo
webpack4+react多页面架构的实现
10-17
webpack在单页面打包上应用广泛，以create-react-app为首的脚手架众多。这篇文章主要介绍了webpack4+react多页面架构的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
react 应用多入口配置及实践总结
10-17
主要介绍了react 应用多入口配置及实践总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解一个基于react+webpack的多页面应用配置
10-17
总结起来，基于 React 和 Webpack 的多页面应用配置涉及到入口文件、输出配置、公共模块拆分以及加载器配置等多个方面。理解并掌握这些配置是构建高效、可维护的多页面应用的关键。同时，使用 CLI 工具可以进一步...
webpack
无名小小卒的博客
01-12 5706
webpack
react+webpack4搭建前端项目（二）react全家桶的使用
weixin_43834567的博客
03-29 303
前言 react+webpack4搭建前端项目分为三个章节。链接如下。目的是实现从零搭建一个react后台管理系统 1、react+webpack4搭建前端项目（一）基础项目搭建 2、react+webpack4搭建前端项目（二）react全家桶的使用 3、react+webpack4搭建前端项目（三）打包优化 webpack配置的讲解 4、react+webpack4.x搭建前端项目（四）配置抽取和区分环境 5、react+webpack4.x搭建前端项目（五）多页面配置 6、react+webpack4
React + Webpack多入口打包配置（一）基础配置快速打包，优化打包速度
朱建伟的专栏
01-12 4158
1. 安装编译插件 编译 jsx、es6、scss 等资源 ● 使用 bael 和 babel-loader 编译 jsx、es6 ● 安装插件: babel-preset-es2015 用于解析 es6 ● 安装插件：babel-preset-react 用于解析 jsx 安装插件 $ npm i --save-dev babel-core babel-loader...
SurviveJS：Webpack与React入门到精通
本书会逐步引导读者从零基础到熟练掌握Webpack的配置和优化技巧，包括如何配置热模块替换（Hot Module Replacement）以实现快速开发迭代，以及如何利用Tree Shaking和Source Maps进行代码优化。同时，读者也将学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值