webpack 学习1

一. 基础

主要是记录一些容易忘记的简单的使用方法。参考文档：
https://webpack.docschina.org/guides/getting-started/#basic-s...

1. webpack-cli

官方文档
我们启动本地开发、启动构建项目 在命令行输入的命令，就是使用了webpack-cli，用webpack命令启动项目。
启动webpack的两种命令方法：

1. npx
   npx 是npm某个版本中支持的一个命令，作用是，可以直接以模块名的方式，执行这个安装在本项目内的模块（如果还未安装，会自动安装再执行）。 比如 npx webpack 这个命令，就代表执行webpack命令。
2. package.json scripts脚本
   为了避免每次运行都要输入很长一段命令，我们可以在package.json的 scripts脚本中定义别名，通过运行别名的方式，执行webpack。

{
  scripts: {
    "build":"webpack --color --progress --env production",
  }
}

这样在命令行执行 npm run build 就相当于执行了那一长串命令。

webpack环境变量
cli 另一个重要的作用，就是可以在命令中传入参数（我们可以叫做webpack环境变量），这个参数可以在webpack.config.js配置文件里拿到。 这些参数通过一个前缀 --env 传入
--env
--env 可以接受多个参数，方式有两种：

1. webpack --env country=sg 在配置文件中，env.country 就等于 'sg'
2. webpack --env production 只传了一个标志，没有值，相当于它为true。env.production === true

记住：使用env环境变量有一个条件，配置文件中导出的必须改为函数，而不是对象

module.exports = (env) => {
  env.country
  return {}
}

webpack常使用的命令

1. serve 用来启动 webpack-dev-server ，开启本地开发。命令： webpack serve
2. build 用来运行webpack，即用来构建项目。该参数可省略 即使用 webpack build 或直接 webpack ，都是相同的作用。

二. entry 入口

官方文档
另一个解释比较清楚的文档
搞清楚后就知道，其实entry有三种传入方式：

1. 传入字符串，单入口简写

entry: './src/index.tsx'
这表明： 只有一个入口，是src下的index.tsx文件。webpack会从该文件作为入口，把所依赖的所有资源，打包输出成一个文件。这个文件名会是main，因为这种写法其实是下面的简写：

entry :{
  main: './src/index.tsx'
}

entry是一个对象，但只有一对键值对，依旧是单入口。且key是main，说明打包后生成的文件名是main。即： entry 如果是一个对象，那么key就会是打包后输出的文件名。如果是简写形式（entry是一个字符串），那么默认文件名是main

2. 传入数组

entry: ['./src/a.js', './src/b.js']
官方文档的说明是： 我们也可以将一个文件路径数组传递给 entry 属性，这将创建一个所谓的 "multi-main entry"。在你想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 "chunk" 中时，这种方式就很有用。
刚看到会不明白，但意思其实就是：传入数组，意味着会将数组内的多个文件及其依赖，最终都打包成一个文件，也就是会将他们合并。 假如两个文件并没有依赖关系，但是一个文件又需要另一个文件的内容，那么就需要这样做让代码最终都打包在一个文件里。
上面也是下面的一种简写：main这个key名也是可以自定义的。最终输出的文件名会与这个key相同

entry :{
  main: ['./src/a.js', './src/b.js']
}

3. 对象

entry: {
  app: './src/index.js',
  vendor: './src/vendor.js'
}

这种就是多入口的写法。因为他们是两个不同的入口，是相互独立的，意味着最终会将这两个源文件打包成不同的两个文件输出。 这个vendor ，在webpack<4时就代表第三方库，这样写就是为了将第三方库作为一个单独的文件打包。 然而在 webpack 4中，更好的做法是使用 optimization.splitChunks，来将第三方库同app（应用程序）分离。

三. output 输出

output 可以描述webpack打包得到的文件的存放位置。尽管entry可以有多个，但输出只能有一个出口。
最简单的output配置：

output: {
  filename: 'bundle.js'
}

只配置一个filename，表示webpack打包生成的文件名会是 bundle.js ，而存放位置默认是当前项目的dist目录。
存放位置也可以通过设置 path 自定义：

output: {
  path: path.resolve(__dirname, 'dist/xxx'),
  filename: 'bundle.js'
}

表示最终生成的文件，会存放在 dist/xxx 目录下

生产环境下资源的基础路径 publicPath ：
当把项目部署到生产环境，所有资源 js css 图片等，都会存放到cdn上，访问时就会访问cdn的地址。 publicPath的作用，就是作为在生产环境下，所有资源被引用的基础路径。 也就是说，加载到html，按照html上的script link标签去加载资源的时候，该去哪里找资源，资源的路径是什么，就是由publicPath指示的。
它只是一个基础路径，打包后 资源的访问路径，可以用以下公示表示：
静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径

如：

output: {
  path: path.resolve(__dirname, 'dist/xxx'),
  filename: '[name].js',
  publicPath: 'https://xxx.com/xxx/'
}

则 js资源的最终访问路径是 ： https://xxx.com/xxx/[name].js
还有一个点： 如果我们用html-webpack-plugin插件，会生成一个html文件，打包好的js css文件都会加到html文件里，那么在html里，用script link标签引入的webpack生成的资源，它们的路径就会是 output.publicPath + output.filename ，所以项目部署到生产环境后，去拉取的资源路径也是这个。 也就是说，publicPath 设置成什么，index.html文件里，资源的基础路径就会是什么，从而项目部署到生产环境后，就会去这个地方找资源。
所以我们说：要想让生产环境下去哪里找资源，就配置 output.publicPath 就好了

而output.path和 publicPath完全无关，path只是指定了打包后文件的存放目录而已。

publicPath 有三种路径设置方式：

1. 配置为相对路径。那么资源的引入路径，会是 相对于index.html文件

   publicPath: './',   // 相对于index.html获取资源
   
   在index.html文件里，注入的资源路径： app.js就是与index.html同一目录下的文件
   <script src="./app.js"></script>

2. 配置为绝对路径，但不带域名

   publicPath: '/assets/',   // 从当前服务器 获取资源
   
   <script src="/assets/app.js"></script>

3. 配置为绝对路径，使用cdn，可配置全路径

   publicPath: 'https://cdn.example.com/assets/',   // 从这个域名里 获取资源
   
   <script src="https://cdn.example.com/assets/app.js"></script>

不论是哪一种方式，尾部必须要带 /