webpack入门四安装vue，并打包

//vue开发------------------------------------------------------------------------
npm install vue

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
var path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {path: path.resolve(__dirname, './dist'), filename: 'app.js'},
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options:
                            {
                                limit: 8192,
                                name: '[path][name].[ext]',
                            },
                    },
                ],
            },
            {
                test: /\.vue$/i,
                use: ['vue-loader']
            },

        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Custom template',
            // filename:'index.html',
            inject: 'body',
            template: path.resolve(__dirname, "index.html")
        }),
        new CopyPlugin({
            patterns: [
                {from: "static", to: "static"},
            ],
        }),
    ],
    resolve: {
        alias:
            {
                'vue': 'vue/dist/vue.js'
            }
    }
};

main.js

import user from './t1'
import css from './t1.css'
import Vue from 'vue'

console.log('this is main', user, css, Vue)
var main = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3>{{message}}</h3>
</div>
</body>
</html>

posted on 2021-02-07 16:25 biind 阅读(71) 评论(0) 收藏举报

webpack入门四 安装vue，并打包

webpack入门四安装vue，并打包