Webpack标准配置

Posted 2020-12-04 一个学者

let htmlWebpckPlugin= require(‘html-webpack-plugin‘);//该组件能将src下面提定的html文件与打包后在js文件打包在一起
module.exports={
    mode:‘development‘,
    entry:‘./src/main.js‘, //入口文件
    output:{
        filename:"bundle.js", //出口文件名
        path:__dirname+"/dist"  //出口文件目录
    },
    module:{
      rules:[
          {test:/.js$/,use:"babel-loader",exclude:/node_modules/},
          {test:/.css$/,use:[‘style-loader‘,‘css-loader‘]},
          {test:/.less$/,use:‘less-loader‘},
          {test:/.(jpg|png|gif|jpeg|)$/,use:"url-loader?limit=8192"},
          {test:/.(woff|woff2|eot|ttf|svg)$/,use:‘url-loader‘},
          {test:/.vue$/,use:"vue-loader"}
      ]
    },
    plugins:[
        new htmlWebpckPlugin({
            template:"./src/index.html",
            //filename:"" 设置生成在dist下面的html文件名称
        })
    ],
    devServer: {  //给webpack-dev-server配置默认的环境
        host:"127.0.0.1",
        port:8088
    },
};