前端工程化之:webpack1-7(入口和出口)

前置知识

 node 环境下 "./" 代表的意思:

  1. 模块化代码中,比如 require("./") ,表示当前 js 文件所在的目录。
  2. 在路径处理中, "./" 表示 node 运行目录。
  3. __dirname:所有情况下,都表示当前运行的 js 文件 所在的目录,它是一个绝对路径。

 node 中的 path.resolve() 用法:

var path = require("path") // 导出一个对象
var result = path.resolve(__dirname,"src")
console.log(result) // 当前js文件所在目录的src文件夹

一、入口和出口

出口:这里的出口是针对资源列表的文件名或路径的配置。出口通过 output 进行配置。

入口:入口真正配置的是 chunk 。入口通过 entry 进行配置。

1.出口的静态规则

出口文件配置常用属性有 filename path

  •  filename :配置的合并的 js 文件的规则。
  •  path :表示资源放置的文件夹路径,必须是一个绝对路径,默认为 dist

  webpack.config.js

// 该对象提供了大量路径处理的函数
var path = require("path");

module.exports = {
  mode: "development", // 打包环境,可以不写
  entry: "./src/index.js", // 入口文件
  output: {
    filename: "scripts/main.js", // 配置的合并的js文件的规则,也可以写成子文件夹形式,例:"scripts/main.js",生成的文件就存放在target/scripts目录下
    path: path.resolve(__dirname, "target"), // 表示资源放置的文件夹路径,必须配置一个绝对路径,默认是dist
  },
  devtool: "source-map", // 默认为eval,配置为eval时,浏览器报错提醒在源代码中
  watch: true, // 监听文件变化,自动打包
};

打包后生成的项目目录:

前端工程化之:webpack1-7(入口和出口)_第1张图片

 2.入口文件配置

规则: 

  •  name chunkname
  •  hash :总的资源 hash ,通常用于解决缓存问题。浏览器访问 js 文件有缓存,再次运行时不会重新访问,导致代码没有及时更新,所以要用 hash 作为文件名。
  •  chunkhash :使用 chunkhash
  •  id :使用 chunkid ,不推荐,开发环境是名字,生产环境是数字。

 默认情况下,入口配置如下, main chunk 的名称,后面是 chunk 对应的是入口模块:

entry: {
    main: "./src/index.js"  // 属性名:chunk的名称;属性值:入口模块(启动模块)
 },

 name 配置多个入口文件时,需要将出口 js 文件进行配置,用 chunkname 代替出口文件名称。

var path = require("path");

module.exports = {
  mode: "development", // 打包环境,可以不写
  entry: {
    main: "./src/index.js", // 属性名:chunk的名称,属性值:入口模块(启动模块)
    a: "./src/a.js",
  },
  output: {
    filename: "[name].js", // 配置的合并的js文件的规则
    path: path.resolve(__dirname, "target"), // 表示资源放置的文件夹路径
  },
  devtool: "source-map",
  watch: true,
};

 打包后生成的项目目录:

 前端工程化之:webpack1-7(入口和出口)_第2张图片

 hash

当文件内容发生改变会生成新的 hash 。 

var path = require("path");

module.exports = {
  mode: "development", // 打包环境,可以不写
  entry: {
    main: "./src/index.js", // 属性名:chunk的名称,属性值:入口模块(启动模块)
    a: "./src/a.js",
  },
  output: {
    filename: "[name].[hash].js", // 配置的合并的js文件的规则,hash:5 代表取5位
    path: path.resolve(__dirname, "target"),
  },
};

 打包后生成的项目目录:

前端工程化之:webpack1-7(入口和出口)_第3张图片

 chunkhash

使用 chunkhash 作为出口文件规则的好处是,当文件内容发生改变时,只会影响该 chunk 的出口,生成新的 js 文件,不会影响其他 chunk

var path = require("path");

module.exports = {
  mode: "development", // 打包环境,可以不写
  entry: {
    main: "./src/index.js", // 属性名:chunk的名称,属性值:入口模块(启动模块)
    a: "./src/a.js",
  },
  output: {
    filename: "[name].[chunkhash:5].js", // 配置的合并的js文件的规则
    path: path.resolve(__dirname, "target"),
  },
};

 打包后生成的项目目录:

前端工程化之:webpack1-7(入口和出口)_第4张图片

a.js 文件内容发生改变时,只会生成新的文件替换 a.200558.js 文件, main.db224.js 文件不会改变。

当一个 chunk 配置两个启动模块时,会按顺序先后运行这两个模块。

var path = require("path");

module.exports = {
  mode: "development", // 打包环境,可以不写
  entry: {
    main: "./src/index.js", // 属性名:chunk的名称,属性值:入口模块(启动模块)
    a: ["./src/a.js", "./src/index.js"], // 启动模块有两个
  },
  output: {
    filename: "[name].[chunkhash:5].js", // 配置的合并的js文件的规则
    path: path.resolve(__dirname, "target"),
  },
};

二、最佳实践 

场景一:一个页面一个 js 

 pageA ==> JS 

 pageB ==> JS 

 pageC ==> JS 

源码结构:

|—— src
    |—— pageA   页面A的代码目录
        |—— index.js 页面A的启动模块
        |—— ...
    |—— pageB   页面B的代码目录
        |—— index.js 页面B的启动模块
        |—— ...
    |—— pageC   页面C的代码目录
        |—— main1.js 页面C的启动模块1 例如:主功能
        |—— main2.js 页面C的启动模块2 例如:实现访问统计的额外功能
        |—— ...
    |—— common  公共代码目录
        |—— ...

 webpack 配置:

module.exports = {
    entry:{
        pageA: "./src/pageA/index.js",
        pageB: "./src/pageB/index.js",
        pageC: ["./src/pageC/main1.js", "./src/pageC/main2.js"]
    },
    output:{
        filename:"[name].[chunkhash:5].js"
    }
}

这种方式适用于页面之间的功能差异巨大、公共代码较少的情况,这种情况下打包出来的最终代码不会有太多重复。

场景二:一个页面多个 js 

pageA ==> JS1

pageA ==> JS2

pageB ==> JS1

pageB ==> JS3

源码结构:

|—— src
    |—— pageA   页面A的代码目录
        |—— index.js 页面A的启动模块
        |—— ...
    |—— pageB   页面B的代码目录
        |—— index.js 页面B的启动模块
        |—— ...
    |—— statistics   用于统计访问人数功能目录
        |—— index.js 启动模块
        |—— ...
    |—— common  公共代码目录
        |—— ...

 webpack 配置:

module.exports = {
    entry:{
        pageA: "./src/pageA/index.js",
        pageB: "./src/pageB/index.js",
        statistics: "./src/statistics/index.js"
    },
    output:{
        filename:"[name].[chunkhash:5].js"
    }
}

这种方式适用于页面之间有一些独立、相同的功能,专门使用一个 chunk 抽离这部分 JS 有利于浏览器更好的缓存这部分内容。 

场景三:单页应用 

所谓单页应用,是指整个网站(或网站的某一个功能块)只有一个页面,页面中的内容全部靠 JS 创建和控制。 vue react 都是实现单页应用的利器。

源码结构:

|—— src
    |—— subFunc   子功能目录
        |—— ...
    |—— subFunc   子功能目录
        |—— ...
    |—— common  公共代码目录
        |—— ...
    |—— index.js

  webpack 配置:

module.exports = {
    entry: "./src/index.js",
    output:{
        filename:"index.[hash:5].js"
    }
}

你可能感兴趣的:(前端工程化,前端,javascript,webpack,node.js)