什么是webpack?

概念：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

参考官网：https://www.webpackjs.com/concepts/

webpack的四大核心概念  

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)
module.exports = {
  entry:  //入口路径
};
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),  //输出到dest文件夹下
    filename:"[name].js"  //默认文件名
name  后加-[hash:1] 加上：随机生成长度为1的文件名  为了解决浏览器缓存问题
  }

};

webpack （JavaScript 打包器） 基本语法 ！ 随笔 第1张

 mode：development 开发环境  production 生产环境

loader 是打包除了js 以外的文件 可看官网 查询相关loader

 webpack （JavaScript 打包器） 基本语法 ！ 随笔 第2张

webpack （JavaScript 打包器） 基本语法 ！ 随笔 第3张

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄