Skip to main content

通用配置

./config/webpack.base.js
const path = require('path');const htmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const HappyPack = require('happypack');const { merge } = require('webpack-merge');const devConfig = require('./webpack.dev');const proConfig = require('./webpack.pro');
const Appconfig = {    entry:{        main: './src/index.jsx'    },    output:{        path: path.resolve(__dirname, '../public'),        filename: '[name].js'    },    resolve:{        extensions:['.jsx','.tsx','.ts','.js']    },    module: {        rules:[            {                test: /\.css$/,                use: [                    'css-hot-loader',                    MiniCssExtractPlugin.loader,                    {                        loader: 'css-loader'                    },                    {                        loader: 'postcss-loader',                        options: {                            postcssOptions:{                                plugins:[                                    ['autoprefixer'],                                ]                            }                        }                    }                ]            },            {                test: /\.(png|jpe?g|gif|svg|ttf|eot|woff|woff2)$/,                use: {                  loader: 'url-loader',                  options: {                    esModule: false,                    name: '[name]_[hash].[ext]',                    outputPath: 'imgs/',                    limit: 2048                  }                }            },            {                test: /\.scss$/,                use: [                    'css-hot-loader',                    MiniCssExtractPlugin.loader,                    'css-loader',                    {                        loader: 'postcss-loader',                        options:{                            postcssOptions:{                                plugins:[                                    ['autoprefixer'],                                ]                            }                        }                    },                    'sass-loader'                ]            },            {                test: /\.less$/,                use: [                    'css-hot-loader',                    MiniCssExtractPlugin.loader,                    'css-loader',                    {                        loader: 'postcss-loader',                        options:{                            postcssOptions:{                                plugins:[                                    ['autoprefixer'],                                ]                            }                        }                    },                    'less-loader'                ]            },            {                test: /\.tsx?$/,                use: {                    loader: 'ts-loader'                }            },            {                test: /\.jsx?$/,                exclude: /node_modules/,                include: path.resolve(__dirname, '../src'),                use: ['happypack/loader?id=babel']            }        ]    },    optimization:{        splitChunks:{            chunks: 'all'        }    },    plugins:[       new htmlWebpackPlugin({           filename: 'index.html', // 输出文件【注意:这里的根路径是module.exports.output.path】           template: 'src/index.html', // 源模板文件           // inejct: 向template或者templateContent中注入所有静态资源,不同的配置值注入的位置不经相同。           // 1.true或者body:所有JavaScript资源插入到body元素的底部           // 2.head: 所有JavaScript资源插入到head元素中           // 3.false: 所有静态资源css和JavaScript都不会注入到模板文件中           inject:true,           favicon: path.resolve(__dirname,'../src/assets/images/favicon.ico') //动态添加favicon       }),       new MiniCssExtractPlugin({           filename: '[name].css'       }),       new HappyPack({           id: 'babel',           loaders:['babel-loader?cacheDirectory']       })    ]}
module.exports = env => {    if (env && env.production){        return merge(Appconfig, proConfig)    } else {        return merge(Appconfig, devConfig)    }}