generator-wxnode-boilerplate/node_boilerplate/templates/build/webpack.base.config.js

Yeoman generator for wxnode boilerplate

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const {VueLoaderPlugin} = require('vue-loader');
const isProd = process.env.NODE_ENV === 'production';
const isDebugServer = process.env.DEBUG === 'server';

module.exports = {
    devtool: isProd
        ? false
        : '#cheap-module-source-map',
    output: {
        path: path.resolve(__dirname, '../dist'),
        publicPath: isProd && !isDebugServer ? 'https://res.wx.qq.com/community/dist/' : '/community/dist/',
        filename: '[name].[chunkhash].js'
    },
    mode: 'production',
    resolve: {
        alias: {
            'public': path.resolve(__dirname, '../public'),
            '@': path.resolve('src'),
        },
        extensions: ['.tsx', '.ts', '.js', '.vue']
    },
    module: {
        noParse: /es6-promise\.js$/, // avoid webpack shimming process
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        preserveWhitespace: false
                    }
                }
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    },
                    {
                        loader: 'ts-loader',
                        options: isProd ? {
                            appendTsSuffixTo: [/\.vue$/],
                            // 指定特定的ts编译配置，为了区分脚本的ts配置
                            configFile: path.resolve(__dirname, '../client/tsconfig.json')
                        } : {
                            appendTsSuffixTo: [/\.vue$/],
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            name: '[name]_[hash:hex:6].[ext]',
                            outputPath: 'images/',
                            publicPath: isProd && !isDebugServer ? 'https://res.wx.qq.com/community/dist/images' : '/community/dist/images',
                        }
                    },

                ],
            },
            {
                test: /(\.css)$/,
                use: isProd
                    ? ['vue-style-loader', MiniCssExtractPlugin.loader, 'css-loader']
                    : ['vue-style-loader', 'css-loader']
            },
            {
                test: /(\.less)$/,
                use: isProd
                    ? [ 'vue-style-loader', MiniCssExtractPlugin.loader,'css-loader']
                    : ['vue-style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            },
        ]
    },
    performance: {
        maxEntrypointSize: 300000,
        hints: isProd ? 'warning' : false
    },
    plugins: isProd
        ? [
            new VueLoaderPlugin(),
            new webpack.optimize.ModuleConcatenationPlugin(),
            new MiniCssExtractPlugin({
                filename: 'common.[hash].css'
            })
        ]
        : [
            new VueLoaderPlugin(),
            // new FriendlyErrorsPlugin(),
            new BundleAnalyzerPlugin({
                analyzerPort: 8000
            }),
        ]
};