webpack.config.js配置

// node path package
const path = require("path")
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: "./webpack-demo/src/index.js",
    output: {
        path: path.resolve(__dirname, "./webpack-demo/dist"),
        filename: "js/index.js",
        // 对编译后的url 增加前缀
        // publicPath: "dist/",
    },
    resolve: {
        // 给vue起别名
        alias: {
            // 运行时依赖版本
            "vue$": "vue/dist/vue.esm.js"
        }
    },
    module: {
        rules: [
            {
                // npm --save-dev install style-loader css-loader
                test: /\.css$/,
                // 顺序不能改变
                // use: ["style-loader", "css-loader"]
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'vue-style-loader'
                })
            },
            {
                // npm --save-dev install url-loader file-loader
                test: /\.(png|gif|jpg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            // 对文件大小限制,大于限制则使用file-loader
                            limit: 8192,
                            // 对file-loader 设置
                            name: 'img/[name].[hash:8].[ext]',

                        }
                    }
                ]
            },
            {
                // ES6 转ES5 npm --save-dev install babel-loader@7 babel-core babel-preset-es2015
                test: /\.js$/,
                // 排除，不打包该文件夹下的js
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                // vue loader
                test: /\.vue$/,
                use: ["vue-loader"]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader',
                options: {
                    outputPath: "fonts"
                }
            }
        ]

    },
    plugins: [
        new VueLoaderPlugin(),
        new ExtractTextPlugin("css/styles.css"),
        new HtmlWebpackPlugin(
            { template: "./webpack-demo/index.html" }
        )
    ]
}