记录vue需要安装的loader和plugin

1.全局安装webpack 打包工具

npm install webpack webpack-cli -g

2.解析css 和 展示样式的loader --save-dev开发时需求

npm install css-loader style-loader --save-dev      

3.解析url 背景图片或者需要地址的时候

npm install url-loader --save-dev

4.解析.vue文件 模块化 组件

npm install vue-loader vue-template-compiler --save-dev

5.自动生成index.html文件自动导入js

	npm install html-webpack-plugin --save-dev

6.发布时使用 压缩文件

npm install uglifyjs-webpack-plugin --save-dev

7.服务器运行

npm install webpach-dev-server --save-dev

8.还有一些相关配置做一个笔记

const path = require('path')
const webpack = require('webpack')
//自动生成html什么七七八八插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//压缩js插件
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const VueLoaderPlugin = require('vue-loader')

module.exports = {
//入口 (打包的文件)
entry: './fvue/main.js',
//出口 (打包生成的文件，之后使用)
output: {
    //使用绝对路径，找到文件夹
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //url默认文件夹 HtmlWebpackPlugin使用了该插件就不需要这个配置了
    // publicPath: "dist/"
},
// mode: "development",

//一些loader
module: {
    rules: [{
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
        },

        {
            test: /\.(png|jpg|gif)$/i,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    name: 'img/[name].[hash:8].[ext]'
                },
            }],
        },

        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },


    ],
},

//编译vue中的template  
resolve: {
    //alias 别名
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
},
plugins: [
    // make sure to include the plugin for the magic
    // new VueLoaderPlugin(),//这个会报错不知道为什么
    new webpack.BannerPlugin("最终版权归'orange'所有"),
    new HtmlWebpackPlugin({
        template: 'index.html'
    })
],

devServer: {
    contentBase: './dist',
    inline: true,
}
}