webpack.config.dev.js

// 用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var webpack = require('webpack');
module.exports = function (config) {
    console.log(config);
    var webpackConfig = {
        devtool: 'eval',
        devServer: {
            disableHostCheck: true,
            host: 'localhost',
            port: config.port || 8080,
            open: true
        },
        entry: {
            index: './main/index.js'
        },
        output: {
            path: __dirname,
            filename: '.y/scripts/[name].bundle.js'
        },
        module: {
            rules: [
                // {
                //     test: /.js$/,
                //     loader: 'babel-loader',
                //     options: {
                //         presets: ['@babel/preset-env'],
                //         plugins: ['@babel/plugin-proposal-class-properties']
                //     }
                // },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: 'vue-style-loader'
                        },
                        {
                            loader: 'css-loader'
                        },
                        { loader: 'less-loader' }
                    ]
                },
                {
                    test: /\.less$/,
                    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' }]
                },
                { test: /\.vue$/, loader: 'vue-loader' },
                {
                    test: /\.(png|jpe?g|gif)$/,
                    loader: 'url-loader',
                    options: {
                        limit: 5120,
                        name: 'static/images/[name].[hash:7].bundle.[ext]',
                        esModule: false
                    }
                },
                {
                    test: /\.(|eot|woff|woff2|ttf|svg)$/,
                    loader: 'url-loader',
                    options: {
                        limit: 5120,
                        name: './static/fonts/[name].[hash:7].bundle.[ext]',
                        esModule: false
                    }
                },
                {
                    test: /\.(xls|doc)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 5120,
                        name: './static/other/[name].[hash:7].bundle.[ext]',
                        esModule: false
                    }
                }
            ]
        },
        // 配置webpack插件
        plugins: [
            new HtmlWebpackPlugin({
                filename: './index.html',
                template: './main/index.html',
                favicon: './main/favicon.ico',
                inject: true,
                title: config.title || 'DaiVUE'
            }),
            new webpack.DefinePlugin({
                // 定义环境和变量
                'process.env': {
                    NODE_ENV: JSON.stringify('development')
                }
            }),
            new VueLoaderPlugin()
        ],
        resolve: {
            // Vue v2.x 之后 NPM Package 预设会分出 runtime-only 版本，若要使用 standalone 功能则需下列设定s
            alias: {
                vue$: 'vue/dist/vue.js'
            }
        },
        mode: 'development'
    };
    return webpackConfig;
};