const path =  require(‘path‘)
module.exports = {
entry:‘./src/index.js‘,
mode:‘development‘,
// mode:‘production‘, //会代码分割，会压缩，output后的文件是1.main.js
output:{
path:path.resolve(__dirname,‘./dist‘), //path:绝对路径的字符串
filename:‘main.js‘
}
}

"script":{
"dev":"webpack",  //使用默认的配置文件
"build":"webpack --config webpack-config.js" // 或者通过--config webpack-config.js 来指定webpack使用哪个配置文件来执行构建
}

module.exports = {
 entry:‘./src/index.js‘ //可以是字符串
 // 数组 entry:[‘./src/index.js‘]  // 多个数组元素会被打包到一个文件
// 对象 entry:{
  // index:‘./src/index.js‘
   // }

}

entry:{
main:‘./src/index.js‘,
other:‘./src/other.js‘
},
output:{
path:path.resolve(__dirname,"./dist"),
filename:"[name].js"  //name是占位符
} 

module:{
  rules:[
    {
      test:/\.css$/,
    //loader的执行顺序 从右往左
　　// css-loader: 把样式代码写入js ,这一步还不够，样式不起作用
　　// style-loader：把写入的js样式，插入到index.html中 (html.head.style中)
      use:["style-loader","css-loader"]
   },
   {
     test:/\.png$/,
     //use:["file-loader"] 
     //给loader添加参数
  　 use:{
      loader:‘file-loader‘,
      options:{
      name:"[name].[ext]
      }
     }
    }
  ]
} 

//会在打包结束后，自动生成一个html文件，并把打包生成的js模块引入到html中
const htmlWebpackPlugin = require("html-webpack-plugin-)
plugins:[
  new htmlWebpackPlugin({
    title:‘测试标题‘,
    template:‘./index.html‘ ,//使用哪一个作为模板
    filename:‘index.html‘, //打包后的filename
  })
  
// 设置完标题后需要在index.html中 将title更换掉
//<title> <%= htmlWebpackPlugin.options.title %></title>
]    

plugins:[
//在构建之前，将dist文件删除掉
new CleanWebpackPlugin()
]

//把css提取成独立文件
{
 test:/\.css$/,
use:[MiniCssExtractPlugin.loader,"css-loader"]
}

new MiniCssExtractPlugin({
filename:"[name][chunkhash:8].css"
})

// none 若要关闭配置，则设置为none
// source-map:产生.map文件、
// eval:速度最快，使用eval包裹模块代码、
// cheap:较快，不包含列信息、
// Module:第三方模块，包含loader的sourcemap（比如jsx to js ,babel的sourcemap）、
// inline:将.map作为dataURI嵌入，不单独生产.map文件

配置推荐：
devtool:"cheap-module-eval-source-map" //开发环境部署
//线上不推荐开启devtool:暴露代码&影响解析速度
devtool:‘cheap-module-source-map‘  //线上生成配置

plugins:[
webpack.HotModuleReplacementPlugin()
]

 if(module.hot){
 module.hot.accept(‘./index.js‘,()=>{
 //重新执行一遍操作
})
}

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