webpack 基础使用

webpack

模块化打包工具

哈希值

• 通过一定的哈希算法，将一段较长的数据映射为较短小的数据,这段短小的数据就是大数据的哈希值。一旦原始数据发生变化，其哈希值也会变化。一般可以用于文件校验。

MIME Type

网络资源的媒体类型，告知浏览器当前文件是什么类型，浏览器会根据该类型选择合适的形式展现。

占位符（ placeholders ）

名称	描述
[ext]	资源扩展名
[name]	资源的基本名称
[path]	资源路径
[hash]	哈希值

入口 和 出口

// 大括号  多对多： 多个入口多个打包文件
entry:{
   
    // 多入口文件
    main:"src/main.js",
    index:"src/index.js"
}
/*
// 中括号 多对一： 多个入口一个打包文件
entry: [
   'src/index1.js',
   'src/index2.js',
]
*/
/*
// 字符串   一对一 ： 一个入口一个打包文件
entry: './src/index.js'
*/
output:{
   
    publicPath:"http://cdn.....", // 相当于自动添加一个路径前缀
    filename:"[name].js",
    path:path.join(__dirname,"dist")
}

SourceMap

如果不开启 SourceMap ，那么一旦代码出现错误，会在打包生成的 js 文件中查找错误【 生成出来的 js 文件几乎是没法看的。。。 】，开启 SourceMap 可以在源文件代码中寻错。

// 如果 设置 mode : 'development' ,那么自动会开启 SourceMap
// devtool:none, // 可关闭 SourceMap【一般用于生产环境】

devtool: "source-map"; // 会在打包目录中自动生成一个 .map 的文件，这里面包含了映射关系
/*

"inline-source-map"; // 打开 sourceMap 会将映射关系写入到 生成的文件中

"cheap-inline-source-map" ; //打开 sourceMap 会将映射关系写入到 生成的文件中，并且告诉映射代码只需要映射到出错的行，不需要再映射出错的列，可以缩短出错代码的映射时间

"cheap-module-inline-source-map" ; // 除了自己的业务逻辑代码，同时也关注第三方模块的出错内容

"eval" ; // 最快的打包方式，eval 会以 js 字符串的形式打包，可以想想 eval 函数，另外虽然 eval 比较好用，但是对于一些比较复杂的代码，提示是不全面的

// 推荐：
devtool:'cheap-module-eval-source-map' // 开发环境中,可以更加详细也更快的列举出错的代码

*/

devServer

开启一段服务，用于提升用户的开发效率

// 会将 dist 目录中的代码先存放到内存，以便于更快的响应代码变更。
devServer: {
   
  contentBase: path.join(__dirname, "dist"), // 将 dist 目录作为服务根地址
  open: true, // 自动打开浏览器
  port: 8000, // 端口
  lazy: true,// 惰性模式, dev-server 只有在请求时才编译包(bundle)。