webpack打包vue（2）devserver resolve module

一：devserver

需要安装插件

npm i webpack-dev-server -D

这个是开发环境起服务用

devServer:{
    port:2020
}

二：resolve

extensions是用来忽略后缀名 alias:是用于添加别名

resolve:{
    extensions:[".js",".vue","json"],
    alias:{
        vue$:"vue/dist/vue.esm.js",
        "@":path.resolve(__dirname,"src")
    }
}

三:module

(1)vue

npm i vue -S
npm i vue-loader vue-template-compiler -D

引入plugin

const {VueLoaderPlugin}=require("vue-loader")

loader使用test里写正则

module:{
    rules:[
    {
        test:/\.vue$/,
        use:["vue-loader"]
    }
    ]
}

VueLoaderPlugin需要在plugins添加

plugins:[
new VueLoaderPlugin()
]

(2)js js一般要使用babel转化，使低版本的浏览器也可以兼容es高级写法

npm i babel-loader @babel/core @babel/preset-env -D

module:{
    rules:[
    {
        test:/\.js$/,
        use:["babel-loader"],
        exclude:"/node_modules/"
    }
    ]
}

新建.babelrc文件

{
    presets:[
    "@babel/preset-env"
    ]
}

这时一些let const 等es6方法打包会转化为var 但es新增的一些全局方法和一些比较新的es语法@babel/presets-env就不支持了 这时就需要@babel/polyfill垫片来辅助