webpack.config.js基本配置

webpack.config.js基本配置

入口配置

entry:{
        filename:"./src/main.js"
    },

入口配置

 output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"dist")
    },

module配置

module:{
        rules:[  // 规则
            {
                test:/\.(sass|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    },

插件配置 plugins

 plugins:[
        new htmlWebpackPlugin({
            filename:"index.html",
            template:path.join(__dirname,"index.html")
        }) 
    ],

使用vue

 resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },

总结配置

let path = require("path")
let htmlWebpackPlugin = require("html-webpack-plugin")
module.exports={
    entry:{
        filename:"./src/main.js"
    },
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"dist")
    },
    plugins:[
        new htmlWebpackPlugin({
            filename:"index.html",
            template:path.join(__dirname,"index.html")
        }) 
    ],
    module:{
        rules:[  // 规则
            {
                test:/\.(sass|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },

}