webpack入门

module.exports = {
  mode:'production',   /**⽤用来指定当前的构建环境是:production、development 还是 none */
  entry:'./src/index.js',  /**Entry ⽤用来指定 webpack 的打包⼊入⼝口 */
  output:{   /**Output ⽤用来告诉 webpack 如何将编译后的⽂文件输出到磁盘 */
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  }
};

多入口配置

module.exports = {
  mode:'production',
  entry:{
    app:'./src/app.js',
    admin:'./src/admin.js'
  },
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'[name].js'
  }
}

常用的loaders,通过loaders去支持其他文件类型并且把它们转为成有效的模块，并且可以添加到依赖图中

image.png

常用的plugins，插件用于bundle文件的优化，资源管理和环境变量的注入作用于整个构建过程

image.png

Hash:和整个项⽬目的构建相关，只要项⽬文件有修改，整个项⽬目构建的 hash 值就会更更改
Chunkhash:和 webpack 打包的 chunk 有关，不不同的 entry 会⽣生成不不同的 chunkhash 值
Contenthash:根据⽂文件内容来定义 hash ，⽂文件内容不不变，则 contenthash 不不变

output 使用 chunkhash
css 使用 contenthash
img 使用 hash