react webpack 多页面应用的配置

项目的目录结构

image.png

webpack 配置文件 目录

image.png

1. webpack.common.config.js 下的 的配置

 const path= require('path');

const webpack= require("webpack");

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

//设置输入和输出的根路径

const ROOT_PATH= path.resolve(__dirname);

const APP_PATH= path.resolve(ROOT_PATH, 'src');

const BUILD_PATH= path.resolve(ROOT_PATH, 'dist');

const modules= ['home', 'goodsClass',

    'cart', 'cartPreview','goodsDetail', 'login', 'order',

    'groupBuy', 'timeBuy', 'content', 'circle','index'

];

//多页面的入口{ 'home': './src/modules/home'.....}

let entrys= {};

modules.forEach(module=>{

entrys[module]='./src/modules/${module}'

})

// html模板插件使用 使用forEach循环 减少冗余代码

const HtmlWebpack= [];

modules.forEach((item,index)=>{

let chunks= ['commons', item];

    //动态生成html插件

    HtmlWebpack[index]= new HtmlWebpackPlugin({

filename: `./${item}.html`, //生成的html存放路径，相对于 path

        template: `./src/pages/temp.html`,

        chunks: chunks,

        inject: true, //允许插件修改哪些内容，包括head与body

        hash: true, //为静态资源生成hash值

        minify: {//压缩HTML文件

            removeComments: true, //移除HTML中的注释

            collapseWhitespace: false //删除空白符与换行符

        }

})

})

//css的提取处理

const extractLess= new ExtractTextPlugin({

filename: "[name].[hash].css"

});

//公共的插件

const commonPlugin= [

//提取公共资源的插件

    new webpack.optimize.CommonsChunkPlugin({

names: "commons",

        filename: "commons.[hash].js",

        minChunks: 2

    }),

    extractLess,

    //拷贝资源插件

    new CopyWebpackPlugin([{

from: path.resolve(APP_PATH, 'assets'),

        to: path.resolve(BUILD_PATH, 'assets')

}])

]

const svgDirs= [

//require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件

    path.resolve(__dirname, './src/assets/svg'), // 2. 自己私人的 svg 存放目录

];

module.exports={

entry:entrys,

    output: {

path: BUILD_PATH,

        filename: "[name].[hash].js",

    },

    //模块解析处理的规则

    module: {

rules: [{

test: /\.js$/, //用babel编译jsx和es6

            exclude: /node_modules/,

            use: 'babel-loader'

        },

            {

test: /\.(less|css)$/,

                use: extractLess.extract({

fallback: 'style-loader',

                    use: ['css-loader', 'less-loader', 'postcss-loader'],

                })

}, {

test: /\.svg$/i,

                use: 'svg-sprite-loader',

                include: svgDirs

},

            {

test: /\.(png|jpg|gif|jpeg)$/, //处理css文件中的背景图片

                use: 'url-loader?limit=1&name=./static/assets/[name].[hash:4].[ext]'

                //当图片大小小于这个限制的时候，会自动启用base64编码图片。减少http请求,提高性能

            }

]

},

    //其他处理

    resolve:{

modules: [

path.resolve(__dirname, "./src"),

            "node_modules"

        ],

        extensions: ['.web.js', '.js', '.less', '.jsx', '.json'],

        //模块别名的定义

        alias: {

'container': path.resolve('./src/container'),

            'commonComponent': path.resolve('./src/common/components'),

            'common': path.resolve('./src/common'),

            'baseComponent': path.resolve(__dirname, './src/base-components'),

            'assets': path.resolve(__dirname, './src/assets'),

            'styles': path.resolve(__dirname, './src/styles'),

            'svg': path.resolve(__dirname, './src/assets/svg')

}

},

    //插件的使用

    plugins: HtmlWebpack.concat(commonPlugin)

}

2.webpack.dev.config.js 下的 的配置

const path= require('path');

const webpack= require("webpack");

let config= require('./webpack.common.config');

//需要转发的接口

var proxyInterface=[]

var proxy= {};

// 请求代理转发

proxyInterface.forEach(function(item) {

proxy[item]= {

target: 'http://10.10.1.15:8080/front',

        changeOrigin: true,

        logLevel: 'debug'

    };

});

//  合并 Object.assign(target, ...sources) target目标对象。sources源对象。返回值目标对象。

config= Object.assign(config, {

devtool: '#eval-source-map', // for debug es6 source

// devtool: '#cheap-module-eval-source-map',

    devServer: {

contentBase: path.join(__dirname, "dist"),

        // compress: true,

        port: 3000,

        host: '0.0.0.0',

        //解决版本升级问题

//disableHostCheck:true,

        overlay: {

warnings: true,

            errors: true

        },

        proxy: proxy

},

    plugins: [

...config.plugins,

        new webpack.HotModuleReplacementPlugin(),

    ]

});

module.exports= config

3.webpack.pro.config.js 下的 的配置

const path= require('path');

const webpack= require("webpack");

const CleanPlugin= require("clean-webpack-plugin");

const CopyWebpackPlugin= require("copy-webpack-plugin");

let config= require('./webpack.common.config')

const ROOT_PATH= path.resolve(__dirname);

const BUILD_PATH= path.resolve(ROOT_PATH, 'dist');

config.plugins= [

...config.plugins,

  new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"'

    }

}),

  //每次运行webpack清理上一次的文件夹

  new CleanPlugin([BUILD_PATH]),

  //压缩混淆JS插件,UglifyJsPlugin 将不再支持让 Loaders 最小化文件的模式。debug 选项已经被移除。Loaders 不能从 webpack 的配置中读取到他们的配置项。

  new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false,

      drop_console: false

    },

    comments: false,

    beautify: false

  })

]

module.exports= config