常用的webpack 配置

const path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin');

let VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

  entry: './src/main.js',

  output: {

    path: path.resolve(__dirname),

    filename:'bundle.js',

  },

  resolve: {

    // 设置别名

    alias: {

        '@': resolve('src'),// 这样配置后 @ 可以指向 src 目录

         '@components': path.resolve(__dirname, 'src/components')

    }

 },

 module:{

    rules:[

        {test:/\.css/,use:['vue-style-loader','css-loader']},

        {

            test:/\.js/,

            use:{

                loader:'babel-loader',

                options:{

                    presets:['@babel/preset-env']

                 },

            },

            exclude:/node_modules/,

        },

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

    ]

},

 plugins:[

    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({

        template:'./src/index.html'

    })

 ]

};

 

 

 

 

 webpack webpack-cli webpack-dev-server  webpack 需要的
 vue-style-loader css-loader  处理css样式
 html-webpack-plugin 处理html
 @babel/core @babel/preset-env babel-loader   处理es6 语法
 vue-template-compiler  vue-loader 处理vue  编译的
 webpack-merge  合并webpack  配置